首页 > 其他分享 >解决Vue中使用wangEditor富文本编辑器复制粘贴word文档携带内容样式文本问题

解决Vue中使用wangEditor富文本编辑器复制粘贴word文档携带内容样式文本问题

时间:2023-11-10 11:59:22浏览次数:40  
标签:文本编辑 Vue word e5% e6% 文档 文本 粘贴

前言:本文记录作者在vue项目中使用到wangEditor富文本编辑器复制粘贴功能所遇到的bug,故此把自己所遇到的坑及问题详细的记录下来。如果觉得作者写的不错,希望得到您的点赞/收藏/支持,如果有不同意见,欢迎下方评论区留言。

一、自定义处理粘贴的文本内容
1、配置 自定义处理粘贴的文本内容~~~如下图

const E = window.wangEditor
const editor = new E('#div1')

// 配置粘贴文本的内容处理
editor.config.pasteTextHandle = function (pasteStr) {
// 对粘贴的文本进行处理,然后返回处理后的结果
return pasteStr + '巴拉巴拉'
}

editor.create()

2、到这里以为就OK了?NO!NO!NO!其实不然,到这里去复制word文档再粘贴进富文本,word文档格式样式是有了,但是也会把word文档样式文本也复制进去~~~如下图

 

是不是很恶心!别急,下面就是解决该问题的方法。请往下看!

二、处理粘贴word文档内容携带样式文本
1、直接上菜!

//配置 自定义处理粘贴的文本内容
config.pasteTextHandle = function (pasteStr) {
var newStr = pasteStr.replace(/@font-face{[^>]*div.Section0{page:Section0;}/g, "");
return newStr
};

2.效果图

 


至此,wangEditor复制粘贴word文档的功能就写好了!

 

参考文章:http://blog.ncmem.com/wordpress/2023/11/10/%e8%a7%a3%e5%86%b3vue%e4%b8%ad%e4%bd%bf%e7%94%a8wangeditor%e5%af%8c%e6%96%87%e6%9c%ac%e7%bc%96%e8%be%91%e5%99%a8%e5%a4%8d%e5%88%b6%e7%b2%98%e8%b4%b4word%e6%96%87%e6%a1%a3%e6%90%ba%e5%b8%a6%e5%86%85/

欢迎入群一起讨论

 

 

标签:文本编辑,Vue,word,e5%,e6%,文档,文本,粘贴
From: https://www.cnblogs.com/songsu/p/17823759.html

相关文章

  • vue3 KeepAlive
    在Vue.js3中,<keep-alive>是一个抽象组件,用于保留其子组件状态,防止在切换组件时销毁它们。这对于在页面间切换时保留组件的状态或避免重复渲染特定组件非常有用。<keep-alive>主要用于缓存组件,以提高性能和用户体验。以下是一个简单的例子,演示了如何在Vue.js3中使用<keep-ali......
  • vue3 Teleport
    在Vue.js3中,Teleport是一种特殊的组件,用于在DOM树中的任何地方渲染其内容,而不受父组件的约束。这对于需要将组件的内容移动到DOM树的其他部分时非常有用,例如在模态框或弹出窗口中使用。Teleport提供了两个名为teleport和teleport-to的指令,用于定义内容的来源和目标位......
  • vuejs3.0 从入门到精通——动态组件
    动态组件一、App.vue<template><ul><!--使用ul标签替代了错误的url标签,用于展示列表--><liv-for='(item,index)intabList':key='index'@click="()=>{currentComponent.com=tabList[index].com}"><!--......
  • vue项目中安装scss
    1、安装node-sass、sass-loader简化内容,具体版本等注意事项在下面。(node官网:GitHub-sass/node-sass::rainbow:Node.jsbindingstolibsass)//默认安装最新版本npminstallnode-sass--sava-devnpminstallsass-loader--save-dev//指定安装版本npminstallnode-sass@x.......
  • Hashcode与MarkWord
    ......
  • pageoffice6在线编辑word 文件禁止鼠标右键
    有时让用户使用PageOffice只读模式(OpenModeType.docReadOnly)打开Word文件后,为了更好的只读效果,还希望禁用Word中的右键菜单,实现此效果只需创建com.zhuozhengsoft.pageoffice.wordwriter中的WordDocument对象,并设置DisableWindowRightClick属性为true即可。除此之外,还可以通过设置......
  • 界面控件DevExtreme图表和仪表(v23.1) - 新功能(Angular,React,Vue,jQuery)
    本文将为大家总结下DevExtreme在v23.1版本中发布的一些与图表和仪表盘相关的功能。DevExtreme拥有高性能的HTML5/JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NETCore,jQuery,Knockout等)构建交互式的Web应用程序。获取DevExtremev23.1正式版下载Dev......
  • 复制word图文到富文本编辑器
    任务:用户需要将大量word中的图文粘贴到网站富文本编辑器。难点大部分富文本编辑器能做到还原word的文本格式,例如字体字号表格以及布局相关的要素还原。但普遍对图片的支持比较差,都需要手动点击图片上传按钮,然后在光标的当前位置,插入指定的图片。这样用户的体验就非常糟糕,为什......
  • net core实现htlm转word
    1、最开始用的Spire.Doc,但是Spire.Doc只能在windows上使用,部署到docker上无法使用,原因是Spire.Doc使用了库 System.Drawing.Common2、之后使用Aspose.Words,示例代码如下:publicstaticvoidRun(){Documentdoc=newDocument(@"D:\testht......
  • Vue防抖debounce
    在搜索框中随着输入内容而更新显示内容或者需要请求接口等逻辑时,如果每一个字符变化都去更新则会浪费一些没有必要的请求,想要的结果是某一个时间内不要去更新,就是常用的防抖测略Vue中防抖逻辑:在响应式的变量在包装一个响应式,新的响应式只有在一定时间到时才更新,具体如下export......