背景
按照上一篇文章处理自定义粘贴之后，发现复制表格之后，会出现表格样式失效问题，原因是自定义粘贴没有处理表格数据，导致按照文本格式粘贴了
处理方式
- 自定义表格（如果业务有需求需要更新表格样式的，那就要研究一下wangEditor/editor的table-module的部分源码熟悉node的数据结构）非必要不需要这样
- 自定义粘贴中，忽略含有表格数据的粘贴（本文采用方式）
代码如下
utils/index.js
/*** 自定义粘贴* @description 富文本自定义粘贴* @returns {boolean} 是否不阻止默认粘贴行为*/
export function customPasteItemFunc(editor, event) {try {/** 粘贴事件 */const clipboardData = event.clipboardData;const html = clipboardData.getData("text/html");/** 正则匹配table标签 */const res = html.match(/<table[^>]+>/g);if (res) {return true;}if (clipboardData && clipboardData.items) {for (let i = 0; i < clipboardData.items.length; i++) {const item = clipboardData.items[i];// 如果是由图片文件if (item.type.indexOf("image") !== -1) {customUploadImage.call(this, item, editor);return false;}// 如果是由视频文件else if (item.type.indexOf("video") !== -1) {customUploadVideo.call(this, item, editor);return false;} else if (item.type.indexOf("text/html") !== -1 && !res) {customPasteTextMain.call(this, clipboardData, editor);return false;}}}return false;} catch (e) {this.$Message.error(e.message);}
}edit.vue
<template><Editor...@customPaste="handleCustomPaste"/>
</template>
methods: {handleCustomPaste(editor, event) {const isStop = customPasteItemFunc.call(this, editor, event);// 阻止默认的粘贴行为if (!isStop) event.preventDefault();return isStop;}
}
核心思路
是否阻止粘贴事件的默认行为
wangeditor/editor中针对在自定义粘贴事件中阻止默认粘贴行为，需要使用如下代码
function customPaste(editor, event) {/** 相关业务处理 */...// 阻止默认行为event.preventDefault();return false;
}
总结
书接上文，大家只看这篇的可以翻看上一节，如果有帮助到大家，记得帮博主点个赞！！！
