使用TINYMCE编辑器从WORD保持原格式复制粘贴的办法

最新推荐文章于 2024-06-03 15:00:17 发布
最新推荐文章于 2024-06-03 15:00:17 发布
阅读量551 收藏 5
点赞数 3
文章标签： 编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alisky119/article/details/138178701
版权

使用TINYMCE编辑器从WORD保持原格式复制粘贴的办法，VUE项目中的TINYMCE富文本编辑器如何从WORD中粘贴图片上传到七牛云，富文本插件TINYMCE使用CTRL+V粘贴图片上传到远程服务器，关于tinymce粘贴图片，粘贴word，一键导入word，粘贴word内容，网上能找到的方案不是特别多，都是通过HTML5提供的API来实现的。

粘贴word内容，粘贴word图片，粘贴word图文，

之前在网上也找过相关的资料，论坛里面也有网友交流过，也加过一些QQ群和微信群，但是结果都不太令人满意。网上的文章基本上提了一些开源方案，项目组在评估过程中发现这些开源方案现在基本上都没有人维护了，而且也联系不到开发人员，项目组这边不太敢用。

大部分文章和回复都不太靠谱，基本上都是没有实际的项目应用经验。

复制word内容然后粘贴到tinymce富文本编辑器中，word里面的图片自动上传到服务器中，返回图片和文字HTML，保留word文字的样式，字体大小，字体颜色。

可以用快捷键（Ctrl+V）操作，

用户发布新闻的时候是从word里面复制图片和文字，然后将word图文内容粘贴到web富文本编辑器中，希望能够将word的图片自动上传到服务器中，服务器地址能够自定义，

后端的话需要支持任意开发语言，比如ASP,ASP.NET,JSP,PHP,PYTHON等。只要是基于标准HTTP协议的都要支持。如果能够不装控件最好，

下载示例：

https://gitee.com/xproer/wordpaster-php-tinymce5x

将插件目录复制到项目中

引入插件JS

初始化插件

添加快捷键（Ctrl + V）

添加插件

添加到工具栏

效果

若是要求不装插件请使用zyOffice

http://www.ncmem.com/doc/view.aspx?id=8be16bc1ba8b4af9b38f33ba26d641f3

订阅版报价单：WordPaster2-订阅版-2023.pdf
政企版报价单：WordPaster2-政企版-2024.pdf

年费版报价单：WordPaster2-年费版-2023.pdf

OEM版报价单：WordPaster2-OEM版-2024.pdf

产品源代码：wordpaster-code.zip
授权码生成器：wordpaster-lic-app.zip

全武凌(荆门泽优)
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
富文本编辑器tinymce支持从word复制粘贴保留格式和图片的插件powerpaste源码
01-29
tinymce是很强大的富文本编辑器，可以去官网下载，这里分享的是它官网的一个收费插件powerpaste的旧版本源码，但也不影响功能使用，此插件目前官网收费每月12美刀，我们就不花这钱了。以vue为例说明：将tinymce下载后放到static目录下，powerpaste放到\static\tinymce\plugins目录下，在index.html中引入tinymce.min.js。代码参数配置：tinymce.init({powerpaste_word_import: 'propmt',powerpaste_allow_local_images: true,paste_data_images: true,powerpaste_html_import: 'propmt',plugins:['找到paste替换成powerpaste']})
TinyMCE富文本编辑器导入word文件内容，使word文件上的的图文内容能正常显示图片
weixin_52041354的博客
09-17 544
参考文章：http://blog.ncmem.com/wordpress/2023/09/17/tinymce%e5%af%8c%e6%96%87%e6%9c%ac%e7%bc%96%e8%be%91%e5%99%a8%e5%af%bc%e5%85%a5word%e6%96%87%e4%bb%b6%e5%86%85%e5%ae%b9%ef%bc%8c%e4%bd%bfword%e6%96%87%e4%bb%b6%e4%b8%8a%e7%9a%84%e7%9a%84%e5%9b%be/
vue3 tinymce4实现复制word文档内容保留原格式
qq_35487928的博客
12-20 1879
封装组件 <template> <div class="tinymce-editor"> <textarea :id="id" v-model="Value"></textarea> </div> </template> <script> import '../../../public/...
富文本编辑器tinymce支持从word复制粘贴保留格式和图片的插件
最新发布
weixin_45525177的博客
06-03 418
富文本编辑器tinymce支持从word复制粘贴保留格式和图片的插件，富文本编辑器tinymce粘贴word，富文本编辑器tinymce粘贴word图文，富文本编辑器tinymce粘贴word图片，富文本编辑器tinymce粘贴word文档，富文本编辑器tinymce粘贴word内容，富文本编辑器tinymce一键粘贴word，富文本编辑器tinymce一键粘贴word文档，富文本编辑器tinymce一键粘贴word内容，富文本编辑器tinymce一键粘贴word图文，添加快捷键（Ctrl + V）
富文本：vue +tinymce tinymce-vue+powerpaste可复制word
Tkings233的博客
02-16 5196
vue实现tinymce富文本编辑器，可复制word保留格式
TinyMCE从word复制粘贴公式
Mr_Zang666的博客
06-16 391
"Servers" :[{"url":"www.ncmem.com"},{"url":"www.xproerui.com"}]//内部服务器地址(不下载此地址中的图片)JPG/PNG/GIF/BMP，推荐使用JPG格式，防止出现大图片。, "PasteImageType" : "" //粘贴文件，剪帖板的图片格式，为空表示本地图片格式。, "PasteImgSrc" : "" //shape:优先使用源公式图片，img:使用word自动生成的图片。
vue项目tinymce上传图片和粘贴图片
hjin_的博客
01-23 590
vue项目，tinymce 上传图片的实现 和粘贴图片遇到的问题及解决方案
Html富文本tinymce_powerpaste-master，word复制粘贴保留格式，含Tinymce5.2包和示例代码
04-21
因客户要求word复制粘贴到富文本编辑器保留格式，不然发文章内容太多调整费时间，找了很久，Html富文本编辑器tinymce_powerpaste-master，word复制粘贴保留格式，免费版含示例代码，简单上手，亲测效果一级棒，困扰...
富文本编辑器支持从word复制粘贴保留格式和图片的插件源码
11-03
总结一下，这个“富文本编辑器支持从word复制粘贴保留格式和图片的插件源码”提供了TinyMCE的PowerPaste插件，使得用户在网页上编辑内容时可以方便地从Word文档中复制粘贴，保留原有的格式和图片。通过使用和自定义...
tinymce富文本编辑器集成demo，添加powerpaste插件，支持word、excel带格式粘贴
09-25
在这个文件中，用户可以在编辑器区域内尝试从Word或Excel复制带格式的内容，然后直接粘贴，观察内容的格式是否被正确保留。 5. **应用场景** 这种集成对于那些需要从Office文档中频繁复制内容并保持格式一致性的...
tinymce如何能实现直接粘贴把图片上传到服务器中?
Mr_Zang666的博客
07-19 428
图片的复制无非有两种方法，一种是图片直接上传到服务器，另外一种转换成二进制流的base64码 目前限chrome浏览器使用 首先以um-editor的二进制流保存为例： 打开umeditor.js，找到UM.plugins['autoupload']，然后找到autoUploadHandler方法，注释掉其中的代码。 加入下面的代码： //判断剪贴板的内容是否包含文本 //首先解释一下为什么要判断文本是不是为空 //在ctrl+c word中的文字或者图片之后会返回1种(image/png)或者4种t
捣鼓TinyMCE粘贴图片并上传+Flask后台
dianxia7288的博客
12-21 554
好久没有编程了，最近需要完成一个小功能，为了方便，需要粘贴图片后上传到后台。前台编辑器用tinymce（N年前用过，我也就知道这个编辑器而已。这次使用下来感觉文档更丰富了），后台我用的Flask。昨天从下午4点开始一直捣鼓到半夜2点，终于完成了，这里大致记录一下遇到的问题和解决的办法。 1. 使用的tinymce版本是4.7.4，稍微熟悉了一下，advlist 插件不能用。 粘贴图片...
vue使用tinymce 图文粘贴 图片大小 自动上传到本地服务
fosakenEE的博客
12-04 1981
tinymce基本的图片上传和文本已经很多人写过了，这里放一个中文文档 TinyMCE中文文档中文手册http://tinymce.ax-z.cn/ 项目中遇到需求能够让粘贴进来的图片上传到我们自己的服务器上，而不是单纯的引用一个连接，还有一个问题是同时粘贴进来的图文生成的图片标签是没有宽度和高度的，以下是解决方案。 单纯需要单图片复制自动上传的话只需要加一个配置 配置在tynemce.init({})里 paste_data_images: true...
支持复制粘贴word公式的TinyMCE编辑器
Mr_Zang666的博客
05-19 235
if (navigator.userAgent.match(/Trident/i) && navigator.userAgent.match(/MSIE 8.0/i)) { //判断浏览器内核是否为Trident内核IE8.0。// 当数据包大小不是数据单元的整数倍时，读取最后剩余的小于数据单元的所有数据。// 忽略简单form字段而不是上传域的文件域(等)然后访问http://localhost:8088/ueditor/ 就可以测试了。
tinymce4/5实现将word中内容（文字图片等）直接粘贴至编辑器中——利用插件tinymce-powerpaste-plugin
暂时先用这个名字
07-27 2603
TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。TinyMCE的优势：开源可商用，基于LGPL2.1插件丰富，自带插件基本涵盖日常所需功能（示例看下面的Demo-2）接口丰富，可扩展性强。客户对老系统提出一个要求：能直接把word中的图片粘贴进编辑器中，否则一张张上传太麻烦了。网上找到这个插件`tinymce-powerpaste-plugin`
使用tinymce编辑器从word保持原格式复制粘贴的办法
weixin_52041354的博客
06-09 983
图片的复制无非有两种方法，一种是图片直接上传到服务器，另外一种转换成二进制流的base64码 目前限chrome浏览器使用 首先以um-editor的二进制流保存为例： 打开umeditor.js，找到UM.plugins['autoupload']，然后找到autoUploadHandler方法，注释掉其中的代码。 加入下面的代码： //判断剪贴板的内容是否包含文本 //首先解释一下为什么要判断文本是不是为空 //在ctrl+c word中的文字或者图片之后会返回1种(image/png)或者4种t
支持复制粘贴word图片的TinyMCE编辑器
Mr_Zang666的博客
05-15 666
"wordPathFormat": "/public/uploads/word/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */在ueditor\ueditor.all.js文件中UE.plugin.register('simpleupload', function (){})下方新增如下方法。"wordAllowFiles": [".docx"] /* 仅支持docx格式的word */
TinyMCE可以如何直接复制word的图文内容到编辑器中?
Mr_Zang666的博客
08-09 210
/在ctrl+c word中的文字或者图片之后会返回1种(image/png)或者4种type(text/plain,text/html,text/rtf,image/png)类型的对象。//如下代码：e.originalEvent.clipboardData.items获得剪贴板的内容。//如果有文字的话不做任何的处理，如果只粘贴图片的话文本一定是空的，包括复制的桌面图片或者截图的图片。//当粘贴了文本之后text是不为空的，同时也会返回当前文本的图片类型。//为了兼容4种格式的情况，做了如下的判断。
Vue项目中使用Tinymce，解决图片上传/粘贴
weixin_45525177的博客
10-17 3076
本来是打算使用正则来找到图片, 获得服务器返回的内容,再使用正则匹配替换, 后来发现TinyMCE提供了urlconverter_callback用于处理url替换, 它有四个参数:url,node,an_save,name,主要使用到的是要替换的url地址, 这个方法返回的是替换后的url地址;”, 那继续加复制粘贴功能呗！
富文本编辑器tinymce从word复制粘贴保留格式和图片
06-10
Tinymce提供了一些配置选项，可以实现从Word中复制粘贴内容并保留格式和图片的功能。具体实现步骤如下： 1. 加载tinymce的源文件和plugins目录下的插件文件。例如： ```html <script src="/path/to/tinymce.min.js"></script> <script src="/path/to/plugins/paste/plugin.min.js"></script> <script src="/path/to/plugins/paste/plugin.min.js"></script> ``` 2. 设置tinymce的选项，包括使用的主题、插件和工具栏等。例如： ```javascript tinymce.init({ selector: 'textarea', plugins: 'paste image', toolbar: 'undo redo | bold italic | image', paste_data_images: true, images_upload_url: '/path/to/upload', images_upload_handler: function (blobInfo, success, failure) { // 处理图片上传 } }); ``` 其中，paste_data_images选项用于启用从Word中粘贴图片的功能，images_upload_url和images_upload_handler用于处理上传的图片。 3. 在服务器端处理上传的图片，并返回图片的URL地址。例如，使用PHP实现图片上传功能： ```php <?php if ($_FILES['file']['error'] === UPLOAD_ERR_OK) { $file_tmp = $_FILES['file']['tmp_name']; $file_name = $_FILES['file']['name']; $file_ext = pathinfo($file_name, PATHINFO_EXTENSION); $file_path = '/path/to/images/' . uniqid() . '.' . $file_ext; move_uploaded_file($file_tmp, $file_path); echo json_encode(['location' => $file_path]); } else { echo json_encode(['error' => '上传失败']); } ``` 以上就是使用Tinymce实现从Word中复制粘贴内容并保留格式和图片的方法。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值