wangEditor粘贴word样式解决方案

痛定思痛。 2022-11-19 04:24 1271阅读 0赞

wangEditor在普通输入时是没问题的，但是复制word内容之后会将word的样式一并粘贴过去，获取内容会出现[if gte mso 9]等字样，以至于展示的时候出现js语法错误，基本上解决方案有两种

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW93b2NoYW9jaGFv_size_16_color_FFFFFF_t_70]

## 关闭粘贴样式的过滤 ##

当从其他网页复制文本内容粘贴到编辑器中，编辑器会默认过滤掉复制文本中自带的样式，目的是让粘贴后的文本变得更加简洁和轻量。用户可通过editor.customConfig.pasteFilterStyle = false手动关闭掉粘贴样式的过滤。

// 关闭粘贴样式的过滤
    editor.customConfig.pasteFilterStyle = false

但是添加之后并不起作用

## 自定义处理粘贴的文本内容 ##

> 参考：https://blog.csdn.net/qq\_41619741/article/details/85685153

// 自定义处理粘贴的文本内容
 editor.customConfig.pasteTextHandle = function (content) { 
 // content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回
 if (content == '' && !content) return ''
 var str = content
 str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '')
 str = str.replace(/<style>[\s\S]*?<\/style>/ig, '')
 str = str.replace(/<\/?[^>]*>/g, '')
 str = str.replace(/[ | ]*\n/g, '\n')
 str = str.replace(/ /ig, '')
 str = str.replace(/<([a-z]+?)(?:\s+?[^>]*?)?>\s*?<\/\1>/, '')
 str = str.trim();
 str = str.replace(/\n\s*/g, ' ')
 str = str.replace(/ <\/p> <\/p>/, '')
 console.log('****', str)
 return str
 }

修改完成之后存在数据库回显发现还是有语法错误，主要是重新编辑用的el赋值，原值其实是有换行的，这样就造成了语法错误。  
![在这里插入图片描述][20210414173116135.png]  
于是跟踪了下后台返回的数据，发现其实里面还有其他转义字符“\\r\\n”  
![在这里插入图片描述][20210414173255644.png]  
所以在返回值之前将数据做处理

.replaceAll("\\r", "")
    .replaceAll("\\n", "")

这样就解决了

## Es6 语法处理js语法换行错误 ##

也可以直接用 \`\`引入解决js单引号和双引号不能换行的问题，但是又浏览器限制，不建议使用

editor.txt.html(`${ productDesc.scenicDesc}`)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW93b2NoYW9jaGFv_size_16_color_FFFFFF_t_70]: /images/20221022/d8517495213f4c56829e764e0c7babc8.png
[20210414173116135.png]: /images/20221022/30e10803c94e4e5b96eed2385a5e519e.png
[20210414173255644.png]: /images/20221022/84c841190db942868467844474449ed2.png