从word中复制内容包含图片到wangEditor编辑器中

最新推荐文章于 2024-08-19 12:42:38 发布
最新推荐文章于 2024-08-19 12:42:38 发布
阅读量104 收藏
点赞数
分类专栏： word图片复制粘贴上传 文章标签： json html5 javascript jquery vue.js
原文链接：https://www.cnblogs.com/zyzzz/p/15109199.html
版权
这篇博客介绍了如何在Vue项目中集成TinyMCE富文本编辑器，并利用PowerPaste插件实现从Word文档中复制粘贴图片并自动上传到服务器的功能。博主提供了下载链接和详细步骤，包括将编辑器和插件引入项目，配置参数，以及最终实现的效果，使得编辑器能正确处理Word中的图片并替换为服务器地址。
摘要由CSDN通过智能技术生成

tinymce是很优秀的一款富文本编辑器，可以去官网下载。https://www.tiny.cloud

这里分享的是它官网的一个收费插件powerpaste的旧版本源码，但也不影响功能使用。

http://blog.ncmem.com/wordpress/2019/08/07/umeditor%E7%B2%98%E8%B4%B4word%E5%9B%BE%E7%89%87/

以vue为例说明：

将tinymce下载后放到static目录下，不用npm安装。

powerpaste放到\static\tinymce\plugins目录下

在index.html中引入tinymce.min.js。

代码参数配置如图：

将plugins参数里的paste替换成powerpaste，完工。

最后效果，能够自动批量上传word中的所有图片

图片上传完后，编辑器里面的图片地址也全部都改成了服务器的图片地址了，

Mr_Zang666
关注
专栏目录
支持复制粘贴word图片的文本编辑器
06-13
1、先注册控件 注册命令：regsvr32.exe 文件夹路径\UpToFtp.ocx 卸载命令：regsvr32.exe /u 文件夹路径\UpToFtp.ocx 2、打开 测试\_examples\simpleDemo.html 修改ftp地址: 支持复制粘贴word图片的文本编辑器\测试\_src\plugins\wordimage.js
wangeditor上粘贴从word中copy的图片和文字
Mr_Zang666的博客
07-13 481
很多时候我们用一些管理系统的时候，发布新闻、公告等文字类信息时，希望能很快的将word里面的内容直接粘贴到富文本编辑器里面，然后发布出来。减少排版复杂的工作量。 下面是借用百度doc 来快速实现这个word 粘贴到 富文本编辑器里面 方法一： 工具/原料 百度doc 任意富文本编辑器，以UEDdito为例 方法/步骤 登录，http://word.baidu.com 点击右上角 导入文档，如图所示 导入后，系统会自动将word的内容加载进去。此时 点击右上角编辑，Ctrl+A复制所有内容
WANGEDITOR实现WORD粘贴图片自动上传
alisky119的博客
07-18 1032
该说不说，网上真正开源的好用的不多，这是目前为止在网上能够搜到的唯一的一个开源的产品，也可以说是整个行业内的唯一的开源的产品，开源的我见的多了，但是开源的这么彻底的目前为止确实还没见到过，开源咱们就不多说了，开源且提供技术支持的那还真是一个都没见到过。网上的资料大部分内容都是重复的，本身也没有提供太好的方案，都是一些开源的方案，到不是说开源的方案不行，主要就是用起来各种问题，没人解决，也没有人提供技术支持，集成这块可能花的时间成本比较高。这块做的还是差了一点，技术社区也做的不够好，没有老外做的好。
wangEditor 从word中复制内容带多张图片
Mr_Zang666的博客
10-15 267
tinymce是很优秀的一款富文本编辑器，可以去官网下载。https://www.tiny.cloud 这里分享的是它官网的一个收费插件powerpaste的旧版本源码，但也不影响功能使用。 umeditor+粘贴word图片 – 泽优软件博客 以vue为例说明： 将tinymce下载后放到static目录下，不用npm安装。 powerpaste放到\static\tinymce\plugins目录下 在index.html中引入tinymce.min.js。 代码参数配置如
wangEditor 复制word里面带图文的文章，图片可以直接显示
yjjatqihc的博客
10-27 245
图片的复制无非有两种方法，一种是图片直接上传到服务器，另外一种转换成二进制流的base64码 目前限chrome浏览器使用 首先以um-editor的二进制流保存为例： 打开umeditor.js，找到UM.plugins['autoupload']，然后找到autoUploadHandler方法，注释掉其中的代码。 加入下面的代码： //判断剪贴板的内容是否包含文本 //首先解释一下为什么要判断文本是不是为空 //在ctrl+c word中的文字或者图片之后会返回1种(image/png)或者.
wangEditor粘贴word里图文内容到编辑器中
weixin_52041354的博客
10-19 486
4、获取编辑器内容 UE.getEditor('editor').getContent() 5、编辑器是否有内容 UE.getEditor('editor').hasContents() 6、获取编辑器内容纯文本格式 UE.getEditor('editor').getContentTxt() 7、获取带格式的纯文本 UE.getEditor('editor').getPlainTxt() 8、启用编辑器 UE.getEditor('editor').setEnabled();image.html;
富文本编辑器支持从word复制粘贴保留格式和图片的插件源码
11-03
在这个场景下，我们关注的是TinyMCE的一个特定插件——PowerPaste，它使得用户能够从Microsoft Word中复制并粘贴内容到编辑器中，同时保留原有的格式和图片。 PowerPaste是TinyMCE的扩展插件，专门处理从Word文档中...
[Vue3] Wangeditor富文本实现将粘贴中包含的图片自动上传后台,并替换src
小陈的博客
03-06 4595
概念会如下再介绍, 先说说具体过程, 就是首先通过粘贴事件触发, 停止默认粘贴事件, 获取其text/html的内容使用字符串正则 match匹配 内容中符合 这样的内容, 获得匹配字符串数组对数组遍历, 传入url在图片onload加载好后触发回调函数, 会将图片转为base64base64 转 BlobBlob 转 file将file 传入请求上传后台函数。
让富文本编辑器支持复制doc中多张图片直接粘贴上传
aryasei的专栏
04-12 771
公司做的项目要用到文本上传功能。 Chrome+IE默认支持粘贴剪切板中的图片，但是我要粘贴的文章存在word里面，图片多达数十张，我总不能一张一张复制吧 我希望打开文档doc直接复制粘贴到富文本编辑器，直接发布 那么Ueditor很不错，对于文本的上传功能可以说强大，点个赞！ 但是对于多个图片的上传还有一点缺陷，因为Ueditor本身不支持，粘贴后直接就是空白，这里面一定有原因。...
富文本编辑器以及表格操作，可拉伸单元格宽度、增加行、增加列、合并单元格
04-21
2. **拉伸单元格宽度**：在编辑器中，用户可以拖动表格的边框来调整单元格的宽度，以适应不同的显示需求。这种灵活性有助于确保内容的可读性和美观性。 3. **增加行和列**：当用户需要在现有表格中添加更多数据时，...
vue3项目中使用富文本编辑器
最新发布
共同学习，共同成长
08-19 288
大家好，我是码喽的自我修养！今天给大家分享vue3项目中使用富文本编辑器 -- wangEditor，包括wangEditor的下载、安装、使用等等，由浅入深详细讲解！并提供具体代码帮助大家深入理解，彻底掌握！
wangEditor上传图片word
yjjatqihc的博客
11-12 117
如何做到 ueditor批量上传word图片？ 1、前端引用代码 <!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Co...
wangEditor实现word图片自动转存
yjjatqihc的博客
11-18 191
项目需求可发布文章 需求涉及到富文本编辑器 经过查阅我选择了较为简便 不需要后端支持可独立完成的tinymce框架 官方文档也是相当完整 虽然都是全英文 但是有强大的 谷歌~ 没问题的 编辑器，tinymce 不需要后端配合 只需要把最终编辑完的富文本传给后端就好 很简单 下载tinymce npm install tinymce 安装tinymce-vue npm install @tinymce/tinymce-vue 下载完成后在node_modules 中找到 tinymce/skins目录
wangEditor实现WORD粘贴图片自动上传
Mr_Zang666的博客
10-08 287
Chrome+IE默认支持粘贴剪切板中的图片，但是我要发布的文章存在word里面，图片多达数十张，我总不能一张一张复制吧？ Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能。但是无法处理多张图片。而且转换成BASE64后是作为内容一起提交给服务器，不能够将图片单独保存在另外一台服务器中。如果需要单独保存则需要自已进行处理。比较麻烦。我希望打开Word或者WPS文档后，复制内容然后直接粘贴到富文本编辑器中，编辑器自动将图片批量上传到服务器中，无论文档中有多少张图片，编辑器都全部自动上传，不
WORD里头的图片如何直接复制到wangEditor编辑器
weixin_45525177的博客
07-21 312
1.4.2之后官方并没有做功能的改动，1.4.2在word复制这块没有bug，其他版本会出现手动无法转存的情况 本文使用的后台是Java。前端为Jsp（前端都一样，后台如果语言不通得自己做 Base64编码解码） 因为公司业务需要支持IE8 ，网上其实有很多富文本框，效果都很好。 例如www.wangEditor.com 但试了一圈都不支持IE8 。 所以回到Ueditor，由于官方没有维护，新的neuditor 也不知道什么时候能支持word自动转存，只能自己想办法。 如果没有必要，不建议使用.
WANGEDITOR粘贴WORD图片且图片文件自动上传功能
alisky119的博客
04-01 376
需要为wangEditor编辑器增加粘贴Word图片的功能，粘贴后图片能够自动上传到服务器中，服务器地址能够自定义。前端用了VUE2,VUE3，后端用了PHP,JSP,ASP,ASP.NET,SpringBoot。用户使用操作起来更方便一些，一般发新闻，或者发文章用的比较多，可以说是高频使用，为wangEditor编辑器添加按钮。测试前请配置图片上传接口并测试成功。初始化WordPaster组件。
word没法复制图片到html富文本编辑器
02-06
Word 不能直接将图片复制到 HTML 富文本编辑器中。你需要将图片先保存到电脑中，然后使用 HTML 富文本编辑器中的图片插入功能，将图片插入到 HTML 文档中。你也可以使用截图工具将图片保存到电脑中，然后使用 HTML 富文本编辑器中的图片插入功能将图片插入到 HTML 文档中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值