前言:本文记录作者在vue项目中使用到wangEditor富文本编辑器复制粘贴功能所遇到的bug,故此把自己所遇到的坑及问题详细的记录下来。如果觉得作者写的不错,希望得到您的点赞/收藏/支持,如果有不同意见,欢迎下方评论区留言。
一、自定义处理粘贴的文本内容
1、配置 自定义处理粘贴的文本内容~~~如下图
const E = window.wangEditor
const editor = new E('#div1')
// 配置粘贴文本的内容处理
editor.config.pasteTextHandle = function (pasteStr) {
// 对粘贴的文本进行处理,然后返回处理后的结果
return pasteStr + '巴拉巴拉'
}
editor.create()
2、到这里以为就OK了?NO!NO!NO!其实不然,到这里去复制word文档再粘贴进富文本,word文档格式样式是有了,但是也会把word文档样式文本也复制进去~~~如下图
是不是很恶心!别急,下面就是解决该问题的方法。请往下看!
二、处理粘贴word文档内容携带样式文本
1、直接上菜!
//配置 自定义处理粘贴的文本内容
config.pasteTextHandle = function (pasteStr) {
var newStr = pasteStr.replace(/@font-face{[^>]*div.Section0{page:Section0;}/g, "");
return newStr
};
2.效果图
至此,wangEditor复制粘贴word文档的功能就写好了!
最后来复习一下:如果觉得作者写的不错,希望得到您的点赞/收藏/支持,如果有不同意见,欢迎下方评论区留言。