文本插件TINYMCE使用CTRL+V粘贴图片上传到远程服务器

最近项目中有一个需求，需要在编辑器增加Word内容一键粘贴的功能，粘贴后能够自动将Word中的图片上传到服务器中，并且保留Word文档中的文本样式，比如颜色，字体，字体大小，表格等。粘贴操作要求支持快捷键操作（Ctrl + V），Web编辑器使用的TinyMCE5

用户每天需要发布新闻，新闻都是由编辑写好，保存在Word文档中，之前发的时候图片处理比较麻烦，都是一张张上传，效率比较低，现在希望能够批量自动上传，提高工作效率。

希望在现有的后台管理系统中直接集成到现有的编辑器（tinymce）中，做成一个按钮，用户点击按钮后就能粘贴，图片自动上传。操作尽量简单，用户体验尽量的好用。

?

网上搜了一下，基本上大部分文章讲的都是用VUE+HTML5来实现的。我们实际测试后发现这种方案局限性比较大，而且兼容性也不够好，在有些电脑上不行，有些客户电脑又行，暂时找不到原因，开源方案也没人联系，没有任何技术支持，所以放弃。图片是转成了BASE64上传，与原始图片相比尺寸更大些，应该是自动转换时出了问题，清晰度也有下降。

?

找了几个星期最终只找到了一个最符合需求的插件：泽优Word一键粘贴控件（WordPaster），实际测试后发现效果还不错基本能够满足需求。提供了完整的示例代码，整合教程和视频教程，集成起来也非常的方便，用户体验做的也很好。

?

项目组建议最好能够以插件方式进行使用，这样集成升级后期维护更方便，前端没有使用VUE框架，而是HTML+JS。用户希望直接集成到编辑器（UEditor）中，在工具栏中提供一个按钮，点击按钮后就能粘贴，图片自动上传。这样的用户体验是最好的

?

另外一点就是希望稳定可靠，因为用的人比较多，几乎每天都会使用，使用频繁也很高，出了问题就比较影响工作效率。客户那边要求提供手机和微信需要技术支持。

?

上面的几点能够满足的话基本就没有什么问题，领导希望最好提供OEM或者买断的采购方式，因为我们是软件公司，也是专门做政府单位项目，客户比较多，领导希望能够买断集成在我们自己的产品中，这样就能够为所有用户提供这个功能，用户体验也能够统一。主要是领导不想每次都要单独采购，太麻烦了。

?

示例下载：

码：https://gitee.com/xproer/up6-vue-cli

1.引入up6组件

2.配置接口地址

接口地址分别对应：文件初始化，文件数据上传，文件进度，文件上传完毕，文件删除，文件夹初始化，文件夹删除，文件列表

参考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de

3.定义事件

HTML5实现分片上传GB级大文件组件，用HTML实现分片上传GB级大文件组件，用javascript实现分片上传GB级大文件组件，用js实现分片上传GB级大文件组件，用vue2实现分片上传GB级大文件组件，用vue3实现分片上传GB级大文件组件，用HTML5实现分片上传1GB级大文件组件，用HTML5实现分片上传5GB级大文件组件，用HTML5实现分片上传10GB级大文件组件，用HTML5实现分片上传50GB级大文件组件，用HTML5实现分片上传100GB级大文件组件，用HTML5实现分块上传GB级大文件组件，用HTML5实现分段上传GB级大文件组件，用HTML5实现分割上传GB级大文件组件，用HTML5实现切割上传GB级大文件组件，用HTML5实现分片上传GB级大文件控件，用HTML5实现分片上传GB级大文件技术，用HTML5实现分片上传GB级大文件方案，用HTML5实现分片上传GB级大文件教程，

1.下载示例

https://gitee.com/xproer/up6-vue-cli

将up6组件复制到项目中

示例中已经包含此目录

1.引入up6组件

2.配置接口地址

接口地址分别对应：文件初始化，文件数据上传，文件进度，文件上传完毕，文件删除，文件夹初始化，文件夹删除，文件列表

参考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de

3.处理事件

启动测试

启动成功

效果

数据库