Vue项目中使用Tinymce，解决图片上传/粘贴

最新推荐文章于 2024-08-27 19:41:26 发布
最新推荐文章于 2024-08-27 19:41:26 发布
阅读量317 收藏 4
点赞数 8
文章标签： 前端 javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45525177/article/details/137515383
版权

Vue项目中使用Tinymce解决图片上传/粘贴，Vue项目中使用Tinymce实现图片上传/粘贴，Vue项目中使用Tinymce处理图片上传/粘贴，Vue项目中使用Tinymce解决word图片上传/粘贴，Vue项目中使用Tinymce解决word图文上传/粘贴，Vue项目中使用Tinymce解决word文档上传/粘贴，Vue项目中使用Tinymce实现word文档上传/粘贴，Vue项目中使用Tinymce实现word图片上传/粘贴，Vue项目中使用Tinymce实现word文档一键上传/粘贴，Vue项目中使用Tinymce实现word图文一键粘贴，

关于tinymce粘贴图片，粘贴word，一键导入word，粘贴word内容，网上能找到的方案不是特别多，都是通过HTML5提供的API来实现的。
粘贴word内容，粘贴word图片，粘贴word图文，用户发布新闻的时候是从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.在页面中引入组件
在这里插入图片描述

整合效果：
在这里插入图片描述

M_Snow
关注
Vue项目中使用Tinymce
程序员成长指北
05-10 4941
前言最近因为公司项目的后台管理端需要实现编辑器功能, 一方面满足编辑各类文章内容需求,另一方面要自己编辑一些课程相关的介绍，于是就花了一些时间对比体验现有的一些开源的编辑...
关于TINYMCE粘贴图片自动上传
weixin_52041354的博客
04-02 334
粘贴word内容，粘贴word图片，粘贴word图文，用户发布新闻的时候是从word里面复制图片和文字，然后将word图文内容粘贴到web富文本编辑器中，希望能够将word的图片自动上传到服务器中，服务器地址能够自定义，后端的话需要支持任意开发语言，比如ASP,ASP.NET,JSP,PHP,PYTHON等。关于tinymce粘贴图片，粘贴word，一键导入word，粘贴word内容，网上能找到的方案不是特别多，都是通过HTML5提供的API来实现的。若是要求不装插件请使用zyOffice。
TINYMCE上粘贴从WORD中COPY的图片和文字
alisky119的博客
08-15 970
昨天晚上论坛里面有一位网友给我发私信请教问题，如何解决word内容复制粘贴的问题，这位网友也是刚开始学习接触这块，很多基础知识并不了解，比如如何上传图片，如何保存图片，如何返回文件路径，这些技术他都不了解。先花了大概半个小时左右的时间给他讲解了一下基础知识，然后又花了一个小时的时间帮他搭建了一个开发和测试环境，在网上找开发软件就花了很长时间，因为百度上面搜到很多软件都是不能用的，一是有广告，二是有病毒，软件装好后，最后又花了一个小时左右的时间帮他写了一个测试代码，然后调试成功。
vue-tinymce 富文本编辑器自定义图片上传
11-24
vue-tinymce 封装了el-upload 控件，支持富文本编辑器自定义图片上传整合。 复制到vue的src/components文件夹下 详情博文介绍见：https://xingyun.blog.csdn.net/article/details/102492921
TINYMCE 实现CTRL+V粘贴图片并上传、WORD粘贴带图片
weixin_52041354的博客
08-05 1173
嗯，这是一个好问题，主要还是很多网友反馈了这个问题，有很多网友还是大学生，平时对这块的技术也比较感兴趣，希望通过源代码能够学习这块的技术，对自己也是一个提高，还有一些是自由职业者，平时在网上接一些网站做，然后有些用户也有这个需求，大多数企业网站管理员都不太懂技术，或者也有上班的员工。目前发现很多企业都开始用tinymce，跟论坛和QQ群里面的网友沟通了一下，基本上都觉得tinymce还比较好用，而且一直在更新和维护，除了不是国产的以外，其它的都还不错，功能上也基本上都有，能够满足企业需求，使用也比较简单。
vue项目tinymce上传图片和粘贴图片
hjin_的博客
01-23 678
vue项目，tinymce 上传图片的实现 和粘贴图片遇到的问题及解决方案
Vue项目中集成TinyMCE富文本编辑器(图片批量上传等)
Ghmin的博客
10-20 4463
TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。因为项目原因，本文章是在Vue2中封装TinyMce富文本组件。
在vue项目中使用tinymce并实现自定义的图片上传
qq_45772772的博客
07-02 2572
在vue项目中使用tinymce并实现自定义的图片上传
tinymce 自定义多图片批量上传插件 附使用示范Test
06-22
在官方的默认设置中，TinyMCE仅支持单个图片的上传功能。然而，对于需要处理大量图片的场景，如博客发布、文章编辑等，单个图片上传往往效率较低。为了满足这种需求，开发者们通常会通过自定义插件来扩展TinyMCE的...
富文本编辑器tinymce支持从word复制粘贴保留格式和图片的插件powerpaste源码
01-29
以vue为例说明：将tinymce下载后放到static目录下，powerpaste放到\static\tinymce\plugins目录下，在index.html中引入tinymce.min.js。代码参数配置：tinymce.init({powerpaste_word_import: 'propmt',powerpaste_...
vue2 使用tinymce编辑器实现上传图片及粘贴word文本保留格式并粘贴图片自动上传
周家大小姐
06-09 5898
下载对应的版本 然后在node_modules中找到tinymce把整个文件复制下来粘到public中在组件页面使用根据自己需求进行注释或添加功能 页面使用
vue使用tinymce 图文粘贴 图片大小 自动上传到本地服务
fosakenEE的博客
12-04 2109
tinymce基本的图片上传和文本已经很多人写过了，这里放一个中文文档 TinyMCE中文文档中文手册http://tinymce.ax-z.cn/ 项目中遇到需求能够让粘贴进来的图片上传到我们自己的服务器上，而不是单纯的引用一个连接，还有一个问题是同时粘贴进来的图文生成的图片标签是没有宽度和高度的，以下是解决方案。 单纯需要单图片复制自动上传的话只需要加一个配置 配置在tynemce.init({})里 paste_data_images: true...
tinymce-vue 复制粘粘图片自动上传
最新发布
weixin_46847041的博客
08-27 342
今天遇到了一个需求需要仿wx 公众号的富文本 其中一个功能就是需要粘粘上传。处理方法：添加paste 配置。到这里就可以粘粘图片上传啦！话不多说 直接上代码。第二步：配置上传方法。
vue3中tinymce5.1.1基础配置、使用api-key、上传图片、自定义按钮
weixin_45803990的博客
04-09 1785
vue3中tinymce5.1.1基础配置、使用api-key、上传图片、自定义按钮
tinymce上传图片或者其他文件等等
weixin_45356397的博客
02-29 1243
tinymce默认使用英文,如果需要中文化,需要去官网下载指定的zh_CN.js文件然后放到langs文件夹下面。为了方便我这边直接创建了一个vue文件,可以理解为vue组件,直接把源码放进去。需要注意的是tinymce不同版本的上传图片可能略微有些不同,请注意分辨。缺点: 需要申请特定apikey,类似于百度,高德地图;tips: tinymce在vue中常用的有两种方式。缺点: 需要自己手动的封装组件,灵活性高。优点: 不需要申请特定的apikey。预览,两种图片上传的方式有一些不同。
vue2使用 tinymce富文本编辑器-图片上传、粘贴图片上传致服务器
ccyolo的博客
07-10 2922
vue2 - tinymce 富文本编辑使用，图片上传、粘贴图片上传致服务器
Tinymce 实现图片和视频上传
qq_43467284的博客
05-31 3888
使用Tinymce 实现图片和视频上传功能
tinymce vue拓展多图上传 实现拖拽切换位置，图片排序
GuanZhong12345的博客
07-15 290
​实现功能：基于tinymceTinyMCE中文文档中文手册 拖拽图片排序，去掉全部上传按钮，点击保存上传图片并关闭弹窗，优化了一些交互提示 ​
vue 集成tinymce2实现图片，视频以及文件的上传
weixin_44021888的博客
07-19 2612
vue 集成tinymce2实现图片，视频以及文件的上传，并且解决在多个路由页面切换时不渲染内容且不能编辑
vue3项目中使用tinyMce
07-27
在Vue 3项目中使用TinyMCE，你可以按照以下步骤进行操作： 1. 安装TinyMCE：在终端中运行以下命令来安装TinyMCE的npm包： ``` npm install tinymce ``` 2. 创建一个TinyMCE组件：在Vue项目中创建一个新的组件，比如`TinyMCE.vue`。 3. 在TinyMCE.vue组件中引入和初始化TinyMCE编辑器： ```vue <template> <div> <textarea ref="editor"></textarea> </div> </template> <script> import { ref, onMounted } from 'vue'; import 'tinymce/tinymce'; import 'tinymce/icons/default'; import 'tinymce/themes/silver'; import 'tinymce/plugins/link'; import 'tinymce/plugins/paste'; export default { name: 'TinyMCE', setup() { const editorRef = ref(null); onMounted(() => { tinymce.init({ target: editorRef.value, plugins: ['link', 'paste'], toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code', height: 500, // 其他配置... }); }); return { editorRef, }; }, }; </script> ``` 在上面的代码中，我们引入了TinyMCE的必要资源，并在`onMounted`钩子函数中初始化了编辑器。 4. 在需要使用TinyMCE的页面中引入该组件： ```vue <template> <div> <h1>使用TinyMCE的页面</h1> <TinyMCE /> </div> </template> <script> import TinyMCE from '@/components/TinyMCE.vue'; export default { name: 'Page', components: { TinyMCE, }, }; </script> ``` 在上述代码中，我们将TinyMCE组件引入到需要使用的页面中。 这样，你就可以在Vue 3项目中使用TinyMCE编辑器了。你可以根据需要调整TinyMCE的配置和样式。注意，代码示例中的路径和文件名可能需要根据你的项目结构进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值