wangeditor 粘贴word内容带样式解决方法

wangeditor自带粘贴文本样式过滤:

粘贴文本
注意,以下配置暂时对 IE 无效。IE 暂时使用系统自带的粘贴功能,没有样式过滤!

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

但不知为何,我的不生效,所以我使用了,自定义处理粘贴的文本内容:

自定义处理粘贴的文本内容
使用者可通过editor.customConfig.pasteTextHandle对粘贴的文本内容进行自定义的过滤、处理等操作,然后返回处理之后的文本内容。编辑器最终会粘贴用户处理之后并且返回的的内容。

示例代码

<div id="div1">
    <p>欢迎使用 wangEditor 富文本编辑器</p>
</div>
 
<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1')
    // 关闭粘贴样式的过滤
    editor.customConfig.pasteFilterStyle = false
    // 忽略粘贴内容中的图片
    editor.customConfig.pasteIgnoreImg = true
    // 自定义处理粘贴的文本内容
    editor.customConfig.pasteTextHandle = function (content) {
        // content 即粘贴过来的内容(html 或 纯文本),可进行自定义处理然后返回
        return content + '<p>在粘贴内容后面追加一行</p>'
    }
    editor.create()
</script>

我的代码

// 自定义处理粘贴的文本内容
    this.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(/&nbsp;/ig, '')
      console.log('****', content)
      console.log('****', str)
      return str
    }

参考文章:http://blog.ncmem.com/wordpress/2023/09/16/wangeditor-%e7%b2%98%e8%b4%b4word%e5%86%85%e5%ae%b9%e5%b8%a6%e6%a0%b7%e5%bc%8f%e8%a7%a3%e5%86%b3%e6%96%b9%e6%b3%95/
欢迎入群一起讨论

在这里插入图片描述

vue wangeditor 是一款基于 Vue.js 的富文本编辑器,它可以用于在网页中创建和编辑复杂的文本内容。在使用 vue wangeditor 的过程中,粘贴表格是一个常见的需求。 要实现在 vue wangeditor粘贴表格,首先需要在编辑器中设置支持粘贴表格的功能。可以通过配置编辑器的粘贴过滤器,将粘贴内容进行处理,使得表格可以正确地在编辑器中显示。同时也可以通过插件或自定义功能,增加粘贴表格的支持。 另外,在粘贴表格时,需要注意一些格式转换的问题。例如,粘贴来自 Excel 或 Word 等软件的表格时,可能会出现一些格式不正确的情况,需要在粘贴之后进行一些格式化的操作,使得表格的样式内容能够正确地在编辑器中显示。 除了基本的粘贴表格功能外,还可以通过相关的插件或自定义功能,实现更多高级的表格编辑功能,比如合并单元格、调整列宽、添加公式等操作。 在实现粘贴表格功能的同时,还要考虑编辑器的性能和用户体验。因为表格内容可能会比较复杂,需要确保粘贴和编辑的流畅性,同时也需要在用户操作时给予一定的提示和反馈,以提升用户的使用体验。 综上所述,要在 vue wangeditor 中实现粘贴表格的功能,需要通过合适的配置和处理方式,保证表格能够正确地在编辑器中显示,并且考虑到用户体验和操作的方便性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值