编程开源技术交流,分享技术与知识

网站首页 > 开源技术 正文

VUE项目中的TINYMCE富文本编辑器如何从WORD中粘贴图片上传到七

wxchong 2024-06-10 16:56:11 开源技术 43 ℃ 0 评论

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

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

之前在网上也找过相关的资料,论坛里面也有网友交流过,也加过一些交流群,但是几乎都不能够提供成熟完整的商业解决方案。

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

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

可以用快捷键(Ctrl+V)操作,

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

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

https://gitee.com/xproer/wordpaster-vue-tinymce5

1.复制插件文件

安装jquery

npm install jquery

2.在组件中引入

添加工具栏


在线代码:https://gitee.com/xproer/wordpaster-vue-tinymce5/blob/master/src/components/tinymce.vue#L44

添加插件

在线代码:https://gitee.com/xproer/wordpaster-vue-tinymce5/blob/master/src/components/tinymce.vue

初始化wordpaster组件

3.在页面中引入组件

整合效果:

订阅版报价单:https://drive.weixin.qq.com/s?k=ACoAYgezAAw70JsA8m
政企版报价单:https://drive.weixin.qq.com/s?k=ACoAYgezAAwuqJtN30#/

年费版报价单:https://drive.weixin.qq.com/s?k=ACoAYgezAAwFouDIB4#/

OEM版报价单:https://drive.weixin.qq.com/s?k=ACoAYgezAAwV00mQSY

产品源代码:https://drive.weixin.qq.com/s?k=ACoAYgezAAwz13B5Tr



Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表