前言： 最近工作上有个一键复制网页内容的需求，这个功能实现起来很简单，但是粘贴到微信公众平台等编辑器中时，有很多坑。在此记录，避免再踩。
1. 如何实现一键复制功能？
-
document.getElementById('x').select(); document.execCommand('copy');前两个是插件，有官方使用文档，使用起来很简单方便。第三个是复制功能的核心API。
2. 复制的到底是什么？
这是第一个坑了。
前端同学们写完一键复制的功能后，复制网页上的内容，可以粘贴到 .txt 文件中， 也可以粘贴到QQ/微信聊天框中， 也就是说，默认复制的格式是text， 这种格式的内容粘贴到网页编辑器中时，大概率会发生样式错乱，比如元素宽度不正常。需改变默认的复制格式：
dom.addEventListener("copy",e=>{
e.preventDefault()
e.clipboardData.setData("text/html",dom.innerHTML)
})
这段代码将复制的内容设置为 text/html 格式。这种格式的内容只能粘贴到支持 text/html 的文本框中，如网页编辑器。 不能粘贴到.txt文件中了。如果你只想复制纯文本，可以这样写：
dom.addEventListener("copy",e=>{
e.preventDefault()
e.clipboardData.setData("text/plain", dom.innerHTML)
})
3. 网页编辑器中的坑
即使复制内容的格式是text/html，粘贴到微信公众平台上时，内容还是会出现样式错乱的问题。这就是编辑器中的坑了。目前网上大部分在线编辑器都是用的百度的 UEditor，这个编辑器为了避免xss攻击 （最近我司也遇到了xss攻击，解决思想：一定不能相信用户的输入），对用户粘贴的内容进行了过滤处理，影响我们的主要是：
- 标签过滤
- 标签格式化
4. 标签过滤
UEditor 默认的过滤：
//默认过滤规则相关配置项目
disabledTableInTable:true, //禁止表格嵌套
allowDivTransToP:true, //允许进入编辑器的div标签自动变成p标签
rgb2Hex:true, //默认产出的数据中的color自动从rgb格式变成16进制格式
还有白名单、黑名单等处理。这些都可以在源码的 ueditor.config.js 中看到。
我之前觉得奇怪，为什么粘贴内容到编辑器中，div全变p标签了。原因就是上述。
5. 标签格式化
粘贴到网页编辑器中的HTML代码会被二次处理规范化，比如在H1标签中嵌套H2标签，此时H2标签就被会提出来跟H1标签平行而非嵌套。这样也会影响我们原有的样式。
我尝试过取消微信公众平台的粘贴事件，然后把内容粘贴进去，样式基本上就是正常的。所以微信编辑器自身也对粘贴的内容进行了处理
6. 如何处理4、5两个问题
目前没有完美的解决方案，一切的问题来源于根，如果粘贴的HTML是规范的，如果编辑器没有进行二次处理，就不会出现样式错乱的问题了。
我目前的处理方案有两步： 1、遍历复制内容的dom节点，对表现怪异的标签预先处理。 2、正则匹配表现怪异的标签，替换为正常标签。
- 遍历dom节点预处理
traverse(els, arr = []) {
for (let dom of els) {
let { localName, children } = dom;
let obj = { localName, children: [] };
if (
localName !== "html" &&
localName !== "head" &&
localName !== "body"
) {
this.setStyles(dom, {
boxSizing: "border-box",
maxWidth: "100%"
});
// 开始处理各种特殊情况
// 1.把pre、 blockquote标签改为的display改为block
if (localName === "pre") {
this.setStyles(dom, {
whiteSpace: "normal",
fontFamily: `"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif`
});
}
// br
if (localName === "br") {
this.setStyles(dom, {
display: "inline-block",
whiteSpace: "pre-line"
});
}
// img
if (localName === "img") {
if (dom.style.width.indexOf("%") !== -1) {
dom.style.maxWidth = dom.style.width;
} else {
dom.style.maxWidth = "100%";
}
}
//
if (localName === "blockquote") {
this.setStyles(dom, {
border: "none",
padding: "0px",
margin: 0
});
}
if (localName === "em") {
dom.style.fontStyle = "normal";
}
}
if (children && children.length) {
obj.children = this.traverse(children, arr);
}
arr.push(obj);
}
},
/**
* 给新建的dom设置样式
*/
setStyles(dom, styleObj) {
if (!styleObj || !dom) return;
Object.keys(styleObj).forEach(key => {
dom.style[key] = styleObj[key];
});
},
- 正则预处理
由于正则匹配非常吃性能+耗时，甚至可能导致浏览器假死！所以我选择使用webworker开辟新线程专门做正则匹配。项目是用的vue做的，有 vue-worker 插件方便写 webworker
// 首先创建新线程
createWorker() {
this.webWorker = this.$worker.create([
{
message: "getContent",
func(str) {
/**
* content_copy内容处理函数，用于去除content_copy中无法被微信解析的样式、标签等
* 有其他异常情况，可直接在此正则替换。
* @param str
* @returns {*}
*/
console.log("begin resolve copycontent");
if (!str) return null;
return (
str
// 处理H1标签中嵌套其他H标签
.replace(
/<(?:h1|H1)\s+?style=\"(.*?)\">(?:[\s\S]*)<\/(?:h1|H1)>/gi,
(match, p1) => {
return (
match
.replace(/^<h\d/i, "<section")
.replace(/<\/h\d>$/i, "</section>")
// 添加H1标签的默认样式
.replace(
p1,
`margin-block-start: 0.67em;margin-block-end: 0.67em;margin-inline-start: 0px;margin-inline-end: 0px;${p1}`
)
);
}
)
// .replace(
// /(overflow-y:\s?auto;overflow-x:\s?hidden;|overflow-x:\s?hidden;overflow-y:\s?auto;)/gi,
// "overflow:auto;"
// )
// .replace(/\?x-oss-process=style\/xmorient/gi, "")
// .replace(/[;"]?width:\s?(.{1,4})%;/gi, (match, p1) => {
// return `${match}max-width:${p1}% !important;`;
// })
// 处理图片后面出现的空格
.replace(/<img(?:.*?)\/>(\s+)/g, (match, p1) => {
return match.replace(p1, "");
})
// 处理span元素后面出现的空格 (待优化)
.replace(/<span.*?>.+?<\/span>(\s+)/gi, match => {
return match.replace(
/<span.*?>.*?<\/span>(\s+)/gi,
(match, p1) => {
return match.replace(p1, "");
}
);
}) // 处理回车换行
.replace(/\/?>([\n|\r|\s|.])*/g, (match, p1, p2) => {
return match.replace(/(\s)*/g, "");
})
// 处理pre标签
.replace(/[>|\s](<pre)[\s.*?>|>]/gi, (match, p1) => {
return match.replace(p1, "<section");
})
.replace(/[>|\s|.](<\/pre>)/gi, (match, p1) => {
return match.replace(p1, "</section>");
})
// .replace(/[>|\s](<blockquote)[\s.*?>|>]/gi, (match, p1) => {
// return match.replace(p1, "<div");
// })
// .replace(/[>|\s|.](<\/blockquote>)/gi, (match, p1) => {
// return match.replace(p1, "</div>");
// })
);
}
}
]);
}
// 然后run新线程
runWorker() {
let data = '...' // 文案内容（html代码）
this.webWorker
.postMessage("getContent", [data])
.then(res => {
this.copyContent = res;
console.log("reg end");
this.traverse([this.divForCopy], []);
console.log("end resolve");
this.resolvedSignal = true;
if (this.clickedSignal) {
this.$Message.success("文案解析完成");
}
this.webWorker = null;
});
}
这样子基本上解决了目前已知的样式问题了，如果以后遇到了新的问题，应该又要添加正则匹配的规则了。
网友评论