tinymce直接粘贴图片实现

已于 2022-09-16 11:52:48 修改
阅读量2.3k 收藏 1
点赞数
分类专栏： word图片复制粘贴上传 文章标签： json html5 javascript jquery vue.js
于 2021-07-15 11:10:10 首次发布
原文链接：https://www.cnblogs.com/zyzzz/p/15014586.html
版权
本文介绍了如何在Vue项目中集成TinyMCE富文本编辑器，并利用PowerPaste插件实现从Word粘贴内容时自动批量上传图片的功能。通过将tinymce和powerpaste文件放入相应目录，配置编辑器参数并将paste替换为powerpaste，即可实现图片上传后地址转换为服务器地址的效果。
摘要由CSDN通过智能技术生成

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

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

umeditor+粘贴word图片

以vue为例说明：

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

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

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

代码参数配置如图：

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

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

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

Mr_Zang666
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue使用tinymce 图文粘贴 图片大小 自动上传到本地服务
fosakenEE的博客
12-04 2086
tinymce基本的图片上传和文本已经很多人写过了，这里放一个中文文档 TinyMCE中文文档中文手册http://tinymce.ax-z.cn/ 项目中遇到需求能够让粘贴进来的图片上传到我们自己的服务器上，而不是单纯的引用一个连接，还有一个问题是同时粘贴进来的图文生成的图片标签是没有宽度和高度的，以下是解决方案。 单纯需要单图片复制自动上传的话只需要加一个配置 配置在tynemce.init({})里 paste_data_images: true...
tinymce图片上传
m0_37599931的博客
03-02 3692
首先在官网查看载入tinymace的方法，官网有详细的记载。header的代码借鉴了https://www.douban.com/note/520260653/的代码。修改了一下，tinymce.init({ selector: '#mytextarea', height: 500, menubar: false, ...
富文本编辑器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']})
VUE项目中使用TINYMCE富文本编辑器实现图片上传/粘贴格式
最新发布
weixin_52041354的博客
08-06 1218
嗯，这是一个好问题，主要还是很多网友反馈了这个问题，有很多网友还是大学生，平时对这块的技术也比较感兴趣，希望通过源代码能够学习这块的技术，对自己也是一个提高，还有一些是自由职业者，平时在网上接一些网站做，然后有些用户也有这个需求，大多数企业网站管理员都不太懂技术，或者也有上班的员工。目前发现很多企业都开始用tinymce，跟论坛和QQ群里面的网友沟通了一下，基本上都觉得tinymce还比较好用，而且一直在更新和维护，除了不是国产的以外，其它的都还不错，功能上也基本上都有，能够满足企业需求，使用也比较简单。
TinyMCE + 插件powerpaste实现word直接粘贴富文本,同时上传图片.zip
07-05
powperpaste现在是收费插件,官网最低售价12美元/每月,可从word直接粘贴富文本,同时上传图片
关于TINYMCE粘贴图片自动上传
weixin_52041354的博客
04-02 327
粘贴word内容，粘贴word图片，粘贴word图文，用户发布新闻的时候是从word里面复制图片和文字，然后将word图文内容粘贴到web富文本编辑器中，希望能够将word的图片自动上传到服务器中，服务器地址能够自定义，后端的话需要支持任意开发语言，比如ASP,ASP.NET,JSP,PHP,PYTHON等。关于tinymce粘贴图片，粘贴word，一键导入word，粘贴word内容，网上能找到的方案不是特别多，都是通过HTML5提供的API来实现的。若是要求不装插件请使用zyOffice。
KINDEDITOR实现WORD粘贴公式自动上传
weixin_52041354的博客
07-31 1031
嗯，这是一个好问题，主要还是很多网友反馈了这个问题，有很多网友还是大学生，平时对这块的技术也比较感兴趣，希望通过源代码能够学习这块的技术，对自己也是一个提高，还有一些是自由职业者，平时在网上接一些网站做，然后有些用户也有这个需求，大多数企业网站管理员都不太懂技术，或者也有上班的员工。返回图片地址HTML，编辑器：FCKEditor，CKEditor，KindEditor，UEditor，TinyMCE，wangEditor，xhEditor，eWebEditor，JMEditor，CuteEditor，
tinyMCE上传图片
热门推荐
Smoisy的博客
07-29 1万+
最近做项目涉及到上传文件，于是便想用tinyMCE的文本编辑器，官网地址如下 tinyMCE官网地址 我比较了几个编辑器，最终选用这个，因为功能比较强大，能够实现代码编写，图片上传，插入连接等功能。今天就来说说图片上传。（本地图片上传） 一： 大致介绍 我们的需求是允许用户在文章编写过程中插入图片并将图片保存到服务器下的一个文件夹（WEBROOT/upImage）。 最终效果是这样的，如...
TinyMCE粘贴word图片且图片文件自动上传功能
Mr_Zang666的博客
03-15 2239
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引入。
vue 图片复制黏贴上传_关于Vue集成富文本编辑器Tinymce，图片粘贴上传问题
weixin_33298352的博客
02-22 1661
问题描述我个人尝试用Vue写的后台管理，用的花裤衩开源的后台模版 https://github.com/panjiachen/vue-element-admin,其中我按照这个模版集正常集成了Tinymce编辑器查看issue没有看到,没有看到粘贴上传图片，于是我个人自己添加了粘贴上传图片功能。问题 当我使用微信截图,面积200x100左右的时候，就很正常粘贴一张图片, 但是但我截图面积过大时， ...
支持word、excel带格式粘贴tinymce powerpaste插件-4.0.1-3X兼容tinymce5.2.0版
12-04
解压后放到plugins目录即可使用，兼容tinymce5.2.0版，亲测可用 富文本编辑器tinmcy 插件，tinymce富文本编辑器集成demo，添加powerpaste插件，支持word、...demo.html，tinymce实现从word直接粘贴并自动上传图片。
TinyMCE 图片粘贴上传，实现图文粘贴，图片自动上传
weixin_45525177的博客
04-03 651
我们希望能够在粘贴过程中，将Word中的图片自动上传到服务器中。对于后端开发语言的支持，我们希望能够满足各种开发语言的需求，包括但不限于ASP、ASP.NET、JSP、PHP和Python等。关于在TinyMCE中粘贴图片、粘贴Word文档、一键导入Word文档以及粘贴Word内容，目前在网上能找到的解决方案并不是特别多。总的来说，我们需要一个能够实现在TinyMCE中粘贴Word图文内容，并能够自动上传图片到服务器的解决方案。此外，如果能够实现不安装任何控件的情况下完成上述功能，那将是最佳选择。
tinymce实现粘贴图片自动上传（自动上传粘贴的Base64）
imyc7的专栏
11-20 7019
tinymce实现粘贴图片自动上传 默认粘贴图片后（如屏幕截图，然后ctlr+v），会转换成base64编码，导致文章内容很大。通过添加如下回调，粘贴后自动上传. 注意：本配置在tinymce5.2.0图片已经上传服务器，但是不会及时回显，需要在编辑器中再输入一个字符，src的url才会变动。在tinymce5.6.0下会实时变动。 tinymce.init({ selector: 'div#editable', // 解决粘贴图片后，不自动上传，而是使用base64编码。 urlconvert
VUE项目中使用TINYMCE，解决图片上传/粘贴
weixin_52041354的博客
04-25 751
用户发布新闻的时候是从word里面复制图片和文字，基本上内容都是提前在word中编辑好的，然后将word图文内容粘贴到web富文本编辑器中，希望能够将word的图片自动上传到服务器中，保留word中编辑好的内容的样式，比如间距，字体，字号，颜色，表格，边框等。产品不是我们公司自己开发的，如果遇到问题的话公司这边要花很多成本来解决，客户如果在使用过程中遇到问题的话也不好解决，如果客户提出了定制开发和自定义的业务需求怎么办，不能够提供技术支持，也没有维护服务，用的不放心。如果能够不装控件最好，
富文本插件TINYMCE使用CTRL+V粘贴图片上传到远程服务器
weixin_52041354的博客
03-29 511
需求：富文本编辑器,web编辑器使用TinyMCE，版本不固定，下列版本最好都能够支持tinymce3,tinymce4,tinymce5,tinymce6，支持通过快捷键Ctrl+V粘贴图片，从Word中复制图片和文本能够一键粘贴，图片自动上传到指定的服务器中，这个接口能够自定义配置，浏览器要求全部都能够支持，包含IE在内也需要支持，初始化wordpaster组件。3.在页面中引入组件。
关于tinymce粘贴图片自动上传
Mr_Zang666的博客
07-21 253
这种方法是servlet，编写好在web.xml里配置servlet-class和servlet-mapping即可使用 后台（服务端）java服务代码：（上传至ROOT/lqxcPics文件夹下） <%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%><%@ pagecontentType="text/html;charset=utf-8"%><%@ pageim...
vue2 tinymce富文本编辑器
08-27
Vue2 Tinymce富文本编辑器是一种用于在Vue2项目中实现富文本编辑功能的插件。您可以按照以下步骤进行安装和使用： 1. 首先，您需要安装依赖。可以通过在终端中运行以下命令来安装依赖： ``` npm install tinymce ``` 2. 接下来，您需要将tinymce的skins文件夹复制到您的项目中。您可以在node_modules/tinymce目录下找到skins文件夹，并将其复制到您的src/assets/tinymce目录下。 3. 然后，您可以创建一个Tinymce.vue组件来封装Tinymce编辑器。可以根据您的需求进行自定义配置，＊＊＊并将其放置在您的项目中。 5. 在Vue组件中使用Tinymce编辑器时，您可以直接导入Tinymce组件并在template中使用它。您可以根据需要通过props传递参数给Tinymce组件。 6. 最后，在整体的目录结构中，您需要确保Tinymce相关的文件和依赖正确地放置在对应的位置。 在使用Vue2 Tinymce富文本编辑器的过程中，您可能会遇到一些问题，比如路径找不到导致无法引入“tinymce/icons/default”的问题。这时，您可以尝试升级tinymce的版本来解决这个问题。 希望以上信息对您有所帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [【vue】 vue2 中使用 Tinymce 富文本编辑器](https://blog.csdn.net/qq_46123200/article/details/130099360)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值