wangEditor粘贴word样式解决方案

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

关闭粘贴样式的过滤

    当从其他网页复制文本内容粘贴到编辑器中，编辑器会默认过滤掉复制文本中自带的样式，目的是让粘贴后的文本变得更加简洁和轻量。用户可通过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 = contentstr = 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(/&nbsp;/ig, '')str = str.replace(/<([a-z]+?)(?:\s+?[^>]*?)?>\s*?<\/\1>/, '')str = str.trim();str = str.replace(/\n\s*/g, '<br/>')str = str.replace(/<p><br><br><\/p><p><br><\/p>/, '')console.log('****', str)return str}

修改完成之后存在数据库回显发现还是有语法错误，主要是重新编辑用的el赋值，原值其实是有换行的，这样就造成了语法错误。

于是跟踪了下后台返回的数据，发现其实里面还有其他转义字符“\r\n”

所以在返回值之前将数据做处理

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

这样就解决了

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

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

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

wangEditor粘贴word样式解决方案相关推荐

wangeditor 粘贴word内容带样式解决方法
wangeditor自带粘贴文本样式过滤: 粘贴文本注意,以下配置暂时对 IE 无效.IE 暂时使用系统自带的粘贴功能,没有样式过滤! 关闭粘贴样式的过滤当从其他网页复制文本内容粘贴到编辑器中,编 ...
wangEditor粘贴word图片问题解决
1.4.2之后官方并没有做功能的改动,1.4.2在word复制这块没有bug,其他版本会出现手动无法转存的情况本文使用的后台是Java.前端为Jsp(前端都一样,后台如果语言不通得自己做 Base6 ...
wangEditor粘贴word里图文内容到编辑器中
百度ueditor新增的将word内容导入到富文本编辑框的功能怎么没有啊,... ueditor实现word文档的导入和下载功能的方法:1.UEditor没有提供word的导入功能,只能说是粘贴复制. ...
解决wangEditor从word复制粘贴图片，带有页眉页脚的问题
话不多说,直接贴代码. rtf数据能提取到页眉页脚图片的原因: 提取 Word 文档中包含的所有图像数据,包括页眉和页脚中的图像数据.这是因为 RTF(Rich Text Format)是一种标记语言 ...
ckeditor粘贴word文档图片的实例解析
在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...
ueditor粘贴word图片无法显示的问题
1.4.2之后官方并没有做功能的改动,1.4.2在word复制这块没有bug,其他版本会出现手动无法转存的情况本文使用的后台是Java.前端为Jsp(前端都一样,后台如果语言不通得自己做 Base6 ...
umeditor+粘贴word图片
图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用,但是项目要求需要支持所有的浏览器,包括Windows和macOS系统.没有办 ...
ckeditor粘贴word文档图片的源码
项目需求可发布文章需求涉及到富文本编辑器经过查阅我选择了较为简便不需要后端支持可独立完成的tinymce框架官方文档也是相当完整虽然都是全英文但是有强大的谷歌~ 没问题的编辑器,tin ...
Java 实现HTML富文本导出至word完美解决方案
Java 实现HTML富文本导出至word完美解决方案 **需求: 最近用java开发一个申报管理系统,里面有一个根据申请书的模板填写项目申报信息的功能,并将项目申请书word导出功能.** 1: 动 ...

wangEditor粘贴word样式解决方案

关闭粘贴样式的过滤

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

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

wangEditor粘贴word样式解决方案相关推荐

最新文章

热门文章