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

最新推荐文章于 2024-04-25 17:52:09 发布
最新推荐文章于 2024-04-25 17:52:09 发布
阅读量366 收藏 5
点赞数 10
文章标签： tinymce粘贴word
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52041354/article/details/137149703
版权

需求：富文本编辑器,web编辑器使用TinyMCE，版本不固定，下列版本最好都能够支持tinymce3,tinymce4,tinymce5,tinymce6，支持通过快捷键Ctrl+V粘贴图片，从Word中复制图片和文本能够一键粘贴，图片自动上传到指定的服务器中，这个接口能够自定义配置，浏览器要求全部都能够支持，包含IE在内也需要支持，

下载示例

​编辑https://gitee.com/xproer/wordpaster-vue-tinymce5

1.复制插件文件

安装jquery

npm install jquery

2.在组件中引入

添加工具栏
 


在线代码：src/components/tinymce.vue · 泽优软件/wordpaster-vue-tinymce5 - Gitee.com

添加插件

在线代码：src/components/tinymce.vue · 泽优软件/wordpaster-vue-tinymce5 - Gitee.com

初始化wordpaster组件

3.在页面中引入组件

整合效果：

weixin_52041354
关注
  • 10
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
富文本编辑器实现从word中复制图片
weixin_45525177的博客
02-17 846
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引入。
TinyMCE 实现ctrl+v粘贴图片并上传、word粘贴带图片
Mr_Zang666的博客
04-24 741
"Servers" :[{"url":"www.ncmem.com"},{"url":"www.xproerui.com"}]//内部服务器地址(不下载此地址中的图片)JPG/PNG/GIF/BMP，推荐使用JPG格式，防止出现大图片。, "PasteImageType" : "" //粘贴文件，剪帖板的图片格式，为空表示本地图片格式。, "PasteImgSrc" : "" //shape:优先使用源公式图片，img:使用word自动生成的图片。
TinyMCE 图片粘贴上传，实现图文粘贴，图片自动上传
weixin_45525177的博客
04-03 483
我们希望能够在粘贴过程中，将Word中的图片自动上传到服务器中。对于后端开发语言的支持，我们希望能够满足各种开发语言的需求，包括但不限于ASP、ASP.NET、JSP、PHP和Python等。关于在TinyMCE中粘贴图片、粘贴Word文档、一键导入Word文档以及粘贴Word内容，目前在网上能找到的解决方案并不是特别多。总的来说，我们需要一个能够实现在TinyMCE中粘贴Word图文内容，并能够自动上传图片到服务器的解决方案。此外，如果能够实现不安装任何控件的情况下完成上述功能，那将是最佳选择。
H5 编辑器 Tinymce之解决图片上传/粘贴
wddwwwq1的博客
07-24 2906
H5 编辑器 Tinymce之解决图片上传/粘贴
富文本编辑器tinymce支持从word复制粘贴保留格式和图片的插件powerpaste源码
01-29
tinymce是很强大的富文本编辑器，可以去官网下载，这里分享的是它官网的一个收费插件powerpaste的旧版本源码，但也不影响功能使用，此插件目前官网收费每月12美刀，我们就不花这钱了。以vue为例说明：将tinymce下载...
TinyMCE + 插件powerpaste实现word直接粘贴富文本,同时上传图片.zip
07-05
powperpaste现在是收费插件,官网最低售价12美元/每月,可从word直接粘贴富文本,同时上传图片
tinymce 自定义多图片批量上传插件 附使用示范Test
06-22
tinymce 官方只有单图片上传功能，本人试重网上查找多图片批量上传的例子，无奈找不到合适的，唯有自力更新，帮助更多的网友。
tinymce 富文本编辑器导出插件
11-01
tinymce 富文本编辑器导出插件， 支持导出word 导出pdf,可通过配置修改下载文件名称
vue-tinymce 富文本编辑器自定义图片上传
11-24
vue-tinymce 封装了el-upload 控件，支持富文本编辑器自定义图片上传整合。 复制到vue的src/components文件夹下 详情博文介绍见：https://xingyun.blog.csdn.net/article/details/102492921
VUE项目中使用TINYMCE，解决图片上传/粘贴
最新发布
weixin_52041354的博客
04-25 606
用户发布新闻的时候是从word里面复制图片和文字，基本上内容都是提前在word中编辑好的，然后将word图文内容粘贴到web富文本编辑器中，希望能够将word的图片自动上传到服务器中，保留word中编辑好的内容的样式，比如间距，字体，字号，颜色，表格，边框等。产品不是我们公司自己开发的，如果遇到问题的话公司这边要花很多成本来解决，客户如果在使用过程中遇到问题的话也不好解决，如果客户提出了定制开发和自定义的业务需求怎么办，不能够提供技术支持，也没有维护服务，用的不放心。如果能够不装控件最好，
tinymce富文本简单配置及word内容粘贴图片上传
zhangxinrongr的博客
03-19 733
至于这里为什么用5，不用6，因为6在火狐76版本中兼容性存在一定问题，富文本初始化有问题，所以这里采用5。注：tinymce 6 与tinymce 5 在配置属性名发生过改变，详细参考官网。将下载好的语言包，放置在vue的public文件夹中，然后在代码中引入进来。附上官网地址：https://www.tiny.cloud/docs/2、当下载好插件后，需要到node_modules中找到tinymce。3、需要汉化的还需下载一个语言包，将插件翻译成中文，下载地址如下。图片上传并替换Url。
tinymce富文本编辑器的视频插件如何上传本地视频
u010007013的博客
10-26 9266
tinymce文本编辑器的视频插件如何上传本地视频
VUE使用富文本编辑器 Tinymce（踩坑记录）
qq_38265533的博客
05-09 2638
下面这一层工具栏是没法自动折叠的，需要再次点击省略号才可以折叠，在使用过程中体验不太好。因为是vue2所以选用v5版本选用v3的组件，其实说到底不同版本的Vue只不过一些细微的差异和版本不同，其大体都是差不多的。对比了其他富文本编辑器，tinymce是唯一一个从word复制过来的时候基本保持原有样式的富文本，这一点体验感非常好。tinymce文件夹，然后把node_modules下的tinymce下的skins文件夹复制粘贴到。2.将解压得到的文件夹，放到TinyMCE主目录下的plugins文件夹内。
关于TINYMCE粘贴图片自动上传
weixin_52041354的博客
04-02 206
粘贴word内容，粘贴word图片，粘贴word图文，用户发布新闻的时候是从word里面复制图片和文字，然后将word图文内容粘贴到web富文本编辑器中，希望能够将word的图片自动上传到服务器中，服务器地址能够自定义，后端的话需要支持任意开发语言，比如ASP,ASP.NET,JSP,PHP,PYTHON等。关于tinymce粘贴图片，粘贴word，一键导入word，粘贴word内容，网上能找到的方案不是特别多，都是通过HTML5提供的API来实现的。若是要求不装插件请使用zyOffice。
普歌:vue中使用elementUI+TinyMCE富文本编辑器实现一些常用编辑器功能、自定义图片上传、视频、生成文件链接
熟悉JS拼写的FE
09-20 1255
普歌-码上鸿鹄团队:vue+elementUI+axios+TinyMCE富文本编辑器实现一些常用编辑器功能、自定义图片上传、视频、生成文件链接 前言:在进行描述性项目时，项目后台是避免不了使用富文本编辑器，市面上的富文本很多，大概有这些 wangEditor——基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费 TinyMCE——TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。 百度UEditor——UEditor是由百度web前端研发部开发所见即
tinymce粘贴图片到富文本
Yipitre的博客
09-27 232
tinymce
vue2 tinymce 截图复制粘贴，图片上传验证
兔老大的胡萝卜
09-13 407
富文本编辑器
vue 富文本插件 tinymce 没有icons
05-20
如果你在使用 tinymce 富文本编辑器时发现没有 icons，可能是因为缺少必要的 CSS 和字体文件。你可以尝试以下两种方法中的任意一种来解决这个问题： 1. 通过 CDN 引入 tinymce 的 CSS 和字体文件 在你的 HTML 文件...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值