本系列是本人在OPPO工作一年半中，为了解决开发或者运营的困扰，自制的一些小工具合集，特地以文章的形式记录下来，一方面作为自己的知识储备，另一方面期望能够给遇到相同问题的同学一些启发。
问题
在我们打开 app 的时候，经常会有很多隐私协议和用户声明的文档，你要同意了才能进入APP，不同版本的文档、不同app 和不同语言，我大概维护了几十篇类似文档，并且经常会因为各种各样的原因，导致需要频繁地更新文档。每次手动去修改 html 很麻烦呀，经常在开发得正爽的时候，产品告诉你，诶，麻烦开发小哥你帮我改一下这段文案。
头大、心累并且立刻深呼吸一口保证自己精神不会错乱，所以怎样应付众多版本的文档，并且快速修改上线，成了一个急需解决的问题。
分析
解决这种模版化，并且只有简单的文字和图片的项目，不就专门为富文本打造的吗？
- 利用富文本，可以直接将 word 的内容转化为html文本。
- 导出 html 文本，支持其他开发人员进行二次开发。
- 导入线上的 html 文本，可以直接在原有的文档基础上进行修改。
确定了页面需要哪些功能，马上开始动手操作！
富文本
很简单，咱们使用一款免费开源的 wangEditor 富文本编辑器就行了，简单初始化一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>富文本</title>
<link rel="stylesheet" href="./editorStyle.css">
</head>
<body>
<select id="tools">
<button style="margin-bottom: 20px;margin-right: 20px ;float: right;" id="btn">导出html</button>
<label>
<input type="text" id="linkUrl" placeholder="请输入想要导入的链接地址">
<button id="importUrl">导入页面</button>
</label>
</select>
<section class="main-wrap">
<div id="main"></div>
</section>
<script type="text/javascript" src="./wangEditor.min.js"></script>
<script type="text/javascript">
var editor = new window.wangEditor('#main')
var config = editor.customConfig ? editor.customConfig : editor.config;
config.uploadImgShowBase64 = true
editor.config.height = 800
editor.create()
</script>
</body>
</html>
页面内主要有一个富文本展示区域，和工具区域（导入线上链接和导出html按钮）。
导出 html 文件
因为，页面可能不止一个团队使用，每个团队有自己的要求，那么需要导出 html 页面便于进行二次开发。
var funDownload = function (content, filename) {
var eleLink = document.createElement('a');
eleLink.download = filename;
eleLink.style.display = 'none';
var blob = new Blob([content]);
eleLink.href = URL.createObjectURL(blob);
document.body.appendChild(eleLink);
eleLink.click();
document.body.removeChild(eleLink);
};
document.getElementById('btn').addEventListener('click', function () {
var html = '<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><link rel=\"stylesheet\"href=\"http://activity-cdo.heytapimage.com/cdo-activity/static/202102/03/maincopy20210203.css\"></head><body>{{content}}</body></html>';
var content = document.getElementsByClassName('w-e-text')[0].innerHTML;
funDownload(html.replace('{{content}}', content), 'result.html')
})
上一篇文档中也有涉及到导出 excel 文档，其实原理都是类似的，拼凑成一个字符串，然后生成a标签下载下来。
导入线上 html 页面
其实原理很简单，通过 iframe 加载线上的链接，加载完成后读取其中的 dom 结构即可完成相关操作。
// 删除插入的 iframe 标签
function delIframe() {
var self = document.getElementsByTagName('iframe')[0];
if (!self) {
return;
}
var parent = self.parentElement;
var removed = parent.removeChild(self);
}
// 利用iframe标签加载对应 html 文件（注意iframe的跨域问题）
function insertIframe(url) {
delIframe()
var iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.src = url;
if (iframe.attachEvent) {
iframe.attachEvent("onload", function () {
console.log("Local iframe is now loaded.");
});
} else {
iframe.onload = function () {
var doc = iframe.contentWindow.document;
var content = doc.body.innerHTML
editor.txt.html(content) // wangEditor导入html文本
};
}
document.body.appendChild(iframe);
}
// 取出输入的线上链接
document.getElementById('importUrl').addEventListener('click', () => {
var val = document.getElementById('linkUrl') && document.getElementById('linkUrl').value
if (!val) {
return
}
insertIframe(val)
})
页面完成之后，极大地加快了完成任务的速度，再多来几个页面也没问题。
总结和感悟
很多问题都能够以很简单的想法简化很多流程，在这里仅仅花了30分钟开发的页面，却节省了我90%的开发和修改的时间有，将几件极为简单的逻辑组装起来，却能提高成倍的开发效率。
这个小工具让我认识到，原来不一定非得使用一些令人惊叹的技巧和精细化安排的设计，利用自己所学到的知识，就能解决工作和生活中绝大部分事情，有时候只需要一点点灵感就好了。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！