1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > c语言 复制到编辑页面 乱码 富文本编辑器的复制word到浏览器发生乱码(vue+wangEditor)...

c语言 复制到编辑页面 乱码 富文本编辑器的复制word到浏览器发生乱码(vue+wangEditor)...

时间:2023-09-13 19:09:16

相关推荐

c语言 复制到编辑页面 乱码 富文本编辑器的复制word到浏览器发生乱码(vue+wangEditor)...

啊,这个问题,厉害了

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

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

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

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

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

先是觉得时间赶不及,先百度了下,发现有这方面的文,上链接/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地址:/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,封装的更完善些,作为公共组件来使用。

完结撒花!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。