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

最新推荐文章于 2024-04-23 16:37:21 发布
最新推荐文章于 2024-04-23 16:37:21 发布
阅读量259 收藏
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45525177/article/details/137354955
版权

在Vue项目中，我们可以使用wangeditor编辑器来实现粘贴Word中的图片和文字HTML自动添加到编辑器中的功能。首先，需要在项目中安装wangeditor编辑器，然后配置好图片上传的接口，以便将图片自动上传到服务器。

当用户在Word中复制图片和文字后，粘贴到编辑器中时，图片会自动上传到服务器，同时图片和文字HTML会自动添加到编辑器中。

完整示例

https://gitee.com/xproer/wordpaster-vue-wang-editor

1.复制插件文件
在这里插入图片描述

安装jquery

npm install jquery

2.导入组件
在这里插入图片描述

初始化WordPaster组件
在这里插入图片描述

测试前请配置图片上传接口并测试成功

接口测试：http://www.ncmem.com/doc/view.aspx?id=61f361025c9247098f6a15c3dfc53db5

接口返回JSON格式参考：

http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1

为wangEditor编辑器添加按钮
在这里插入图片描述

整合效果：

在这里插入图片描述

M_Snow
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3-wangeditor:基于Wangeditor富文本编辑器，用于Vue3.x的组件
04-02
vue3-wangeditor :open_book:项目介绍 vue3-wangeditor是一种基于wangEditor二次封装的Vue3.x的Web富文本编辑器，轻量，简洁，易用，开源免费。 兼容常见的PC浏览器：Chrome，Firefox，Safar，Edge，QQ浏览器，IE11。 不支持移动端。 wangEditor当前是v4版本。 内置了代码高亮插件highlight.js ，使用的主题是Lioshi :light_bulb:注意 基于wangeditor默认配置，修改了我自己的替代配置 focus: false // 是否自动聚焦到编辑器，默认是 true ，我改成 false emotions: [ ] // 添加了大部分常见的 emoji 表情 languageTab: ' ' // 编辑器中按下 tab 键默认添加 4 个空格，我的习惯是 2 格 menuTooltipPosition: 'do
tinymce集成Word导入
weixin_52041354的博客
10-26 338
这里分享的是它官网的一个收费插件powerpaste的旧版本源码，但也不影响功能使用。powerpaste放到\static\tinymce\plugins目录下。将plugins参数里的paste替换成powerpaste，完工。图片上传完后，编辑器里面的图片地址也全部都改成了服务器的图片地址了，将tinymce下载后放到static目录下，不用npm安装。tinymce是很优秀的一款富文本编辑器，可以去官网下载。最后效果，能够自动批量上传word中的所有图片。
富文本编辑器WANGEDITOR支持从WORD复制粘贴保留格式和图片的插件
最新发布
weixin_52041354的博客
04-23 449
解决VUE中使用WANGEDITOR富文本编辑器复制粘贴WORD文档携带内容样式文本问题，WANGEDITOR 粘贴WORD内容带样式解决方法，WANGEDITOR 复制WORD里面带图文的文章，图片可以直接显示，WANGEDITOR 实现CTRL+V粘贴图片并上传、WORD粘贴带图片，wangEditor3粘贴word图片，word图片自动上传到服务器，图片和文字HTML自动添加到编辑器中。wangEditor3粘贴word图片和文字，word图片自动上传到服务器，图片和文字HTML自动添加到编辑器中。
富文本编辑器实现一键导入word
weixin_45525177的博客
02-13 1612
3.基础配置 powerpaste_allow_local_images: true, //powerpaste允许黏贴 powerpaste_word_import: "clean", // 是否保留word粘贴样式 clean | merge （具体可查看官方文档）powerpaste_word_import: "clean", //powerpaste黏贴的样式获取方式。skin_url: "/static/skins/ui/oxide", // tinymce UI引入。
wangEditor实现导入word并将内容显示到编辑器中
weixin_52041354的博客
10-19 1257
"wordPathFormat": "/public/uploads/word/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */$preg = '/(\s+src\s?原文链接：https://blog.csdn.net/qq_43428376/article/details/121137967。"wordAllowFiles": [".docx"] /* 仅支持docx格式的word */
富文本编辑器生成的含有图片的内容转换成word文档 java 后端下载
06-22
wangEditor 等富文本内容 （含图片： base64格式、http的网络图片等） 转换成word java后端下载
wangEditor富文本编辑器粘贴时，希望保留携带的样式
SILIKE的博客
09-15 928
wangEditor富文本编辑器，复制粘贴希望保留样式。
vue 富文本编辑器 wangeditor 自定义上传图片 以及 解决 复制粘贴 word 没有图片的情况
weixin_54203047的博客
10-07 4000
实现步骤： 注意获取粘贴的 html和获取 rtf 数据 ，用let，不能用const,下面会发生修改 -链接：https://juejin.cn/post/7144335819275255845。本人比较喜欢用这一款编辑器，官方文档：(上传图片我这里有点特殊，就不细说了。原理：可以去看看他的文章，不错 (我主要来说说怎么使用。
Vue项目中使用wangEditor富文本输入框（推荐）
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
01-28 9471
创建公用组件：在src/vue/components文件夹中创建wangEditor.vue。vue中安装wangEditor。
富文本编辑器tinymce支持从word复制粘贴保留格式和图片的插件powerpaste源码
01-29
tinymce是很强大的富文本编辑器，可以去官网下载，这里分享的是它官网的一个收费插件powerpaste的旧版本源码，但也不影响功能使用，此插件目前官网收费每月12美刀，我们就不花这钱了。以vue为例说明：将tinymce下载...
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
01-19
使用教程(注意细看总结部分，写了几点，希望有所帮助)： 1、安装插件：npm install vue-quill-editor 2、安装插件依赖：npm install quill 3、main.js文件中引入： import Vue from 'vue' import VueQuillEditor ...
【JavaScript源代码】Vue中使用wangeditor富文本编辑的问题.docx
12-30
Vue中使用wangeditor富文本编辑的问题 　wangEditor是基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费。 在我们实际项目上还是比较频繁应用到的，下面出个案例供大家参考学习…　...
解决VUE中使用WANGEDITOR富文本编辑器复制粘贴WORD文档携带内容样式文本问题
weixin_52041354的博客
03-29 524
需求：项目用的是VUE2，VUE3，编辑器用的是wangEditor3,wangEditor4，需要支持在wangEditor编辑器中粘贴word图文内容，粘贴后图片自动上传到指定服务器中，支持自定义服务器接口地址，粘贴后保留文字样式格式，比如文字字体，字体大小，字体颜色。支持快捷键操作（Ctrl+V）为wangEditor编辑器添加按钮。测试前请配置图片上传接口并测试成功。初始化WordPaster组件。
vue怎么实现点击复制html,Vue实现点击按钮复制文本内容的例子
weixin_29107289的博客
06-24 2375
Vue实现点击按钮复制文本内容的例子点击复制功能主要通过 clipboard.js 来实现在vue中使用clipboard.js 时候发现一个问题，就是如果不是input或者button 按钮的话，则复制不成功，使用步骤如下：1、引入clipboard.js，方法如下：第一种直接npm安装：npm install clipboard --save第二种：(下载地址：https://clipboar...
关于在vue项目使用wangEditor4.0富文本插件字体配置后失效问题
qq_39072735的博客
09-17 922
因为在wangEditor富文本里选择字体后，都会插入一个face的属性，并带上你所选的字体名称（细心的伙伴在F12选中对应的元素也会发现这点），所以利用这个css选择器的方法就可以把没生效的字体给呈现出来。当然，也有其他的一些伙伴会出现字体加粗、斜体等等没生效的问题，这种一般都是权重有关，单独在css里设置就好；之前百度过很多方法都没办法解决，最后想出了个方法，就是利用css选择器的方法把问题解决；
Vue中实现复制文字(剪切板)功能实现
HEWNCP的博客
04-23 1009
1.首先安装vue-clipboard2 npm install --save vue-clipboard2 2.在main.js中引入 import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard) 在html中： <template> <div> <div class="about"...
vue点击复制文本功能及原理
weixin_46022934的博客
06-05 4795
一、技术使用背景 二、Vue2(点击复制粘贴功能的实现) 1.安装库并引入 2.定义methods和template结构(两种实现的方法) 3.测试结果 第二种使用的方法 三、Vue3(点击复制粘贴功能的实现,只在TypeScript中生效) 1.安装库并导入 2.解构api、定义methods 3.测试结果如下: 四、复制技术的实现原理 1.第一种原理方法（已废弃⚠️，但是可以继续使用） 如下图 代码如下 2.第二种方法（上面废弃方法的替代规则） 链接如下：点击⬇️下方🔗
vue3如何安装并使用wangEditor富文本编辑器
06-03
首先，你需要在你的 Vue 3 项目中安装 wangEditor，可以通过以下命令进行安装： ``` npm install wangeditor --save ``` 安装完成后，在你的 Vue 3 项目中引入 wangEditor 并进行配置，可以参考以下代码： ```html <template> <div> <div id="editor"></div> </div> </template> <script> import WangEditor from 'wangeditor' export default { mounted() { const editor = new WangEditor('#editor') editor.config.uploadImgServer = '上传图片的接口地址' editor.config.uploadImgMaxLength = 5 // 限制一次最多上传 5 张图片 editor.create() } } </script> ``` 在以上代码中，我们在 mounted 钩子函数中创建了一个 wangEditor 实例，并将其绑定到一个 id 为 "editor" 的 div 元素上。同时，我们还对 wangEditor 进行了一些配置，如设置上传图片的接口地址，以及限制一次最多上传 5 张图片。 最后，我们需要在组件的 style 中引入 wangEditor 的样式： ```css @import 'wangeditor/release/wangEditor.min.css'; ``` 完成以上步骤后，你就可以在 Vue 3 项目中使用 wangEditor 富文本编辑器了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值