啊，这个问题，厉害了

我们这边团队的前端技术栈是vue，因为之前我们前端研发小姐姐，在别的项目里面封装了wangEditor来用，看了下，emm，虽然功能好像不是很多，但是好的点在于之前的前端小姐姐已经封装好了，所以我懒，直接复制黏贴封装好的wangEditor的组件过来直接用，然后就不管了。

结果上线前一堆复制乱码的问题T.T。。。。我的锅唉。。。

主要表现为粘贴进去富文本编辑框还好好的

但是只要点击预览，我们是用的v-html指令将富文本的内容直接插入到另一个组件里面进行展示，然后麻烦就来了呜呜呜。。。

冤孽。。。一堆word文档里面的标签你还不知道怎么搞。。。而且即将上线有人用了，非常紧急。。。

先是觉得时间赶不及，先百度了下，发现有这方面的文，上链接https://blog.csdn.net/weixin_43213137/article/details/102715072

but！因为这些标签，虽然能解决谷歌浏览器的问题，但是IE的edge浏览器我怎么试，底下都有可恶的””出现，而且在qq浏览器里面底下会有””出现。。。虽然我后来通过添加替换过滤解决了(如下所示)，但是实际上console.log(html)还是能看到很多多余的word的标签，和很多空行)

// qq浏览器会把style标签显示出来移除style，// qq浏览器复制过来的文本会遗留style，进行全局替换html = html.replace(/?style[^>]*>/gi,'')

// microsoft edge的浏览器复制过来的文本会自带这strike，去掉// html = html.replace(/?strike[^>]*>/gi, '')//移除strike(直接移除没用，换成下面这行的移除办法)html = html.replace('

html = html.replace(/(n[st]*r*n)/g,'n').replace(/^[nrnt]*|[nrnt]*$/g,'') //删除空行

而且以上办法其实一点都不高明，也不智能，也不万全，因为只要出了一些新的标签，不同浏览器的解释就是不同。。。连粘贴的文本的标签位置都可以不同。。。

之前我们这边cto介绍说，kindEditor的演示界面，复制word文档的内容进去，预览是正常的哟~，然后我就觉得诶~可以看看！看到希望了

幸好kindEditor是开源的，给大家上github地址：https://github.com/kindsoft/kindeditor

其中看代码的步骤是这样的：

1、kindEditor的主要的富文本插件的入口在src/main.js里面

如图里面有对word的内容作了专门的处理，然后接下来就是开干抄就行了

2、从下图可以看出，其实kindEditor对word内容的处理是跟上面我说的那个文章的思路是差不多的，首先把一些显而易见的东西先replace掉

tips: 代码图里面的console.log都是我自己加的，为了调试代码hhhhh，大家休要误会~

3、然后将上面第一步清理好的html文本内容丢到format的函数里进行进一步的处理

因为这边的这个format的处理非常的长，具体也就以下的操作：

删除script和style内容

去掉空行

空的标签的处理

无闭合标签自动添加斜线

标签里面的class、attr、style、等等的处理

吧啦吧啦吧啦~反正就是很鬼长，抄就是了~，里面用到很多一些数据细微的处理的自定义的函数，其实也都是小的东西，抄就是了~

最后结果就是预览正常了，那些标签全不见了，太开心了~~~~

最大的收获其实是看kindEditor的源码，感觉十分规范，虽然很多东西写的不是那么的es6的那种import和export的方式，导致一个js文件上千行(main.js就有1600行左右)，但是它的注释很全面，而且比较规范，哪里是修复了什么问题都看得到，所以读代码感觉很容易很舒服，基本每行都能懂它是干什么的，这极好~

解决了个问题之后觉得加班干也值得~之后可以考虑继续用wangEditor，封装的更完善些，作为公共组件来使用。

完结撒花！