vue使用tinymce 图文粘贴图片大小自动上传到本地服务

最新推荐文章于 2024-08-16 10:15:09 发布

fosakenEE

最新推荐文章于 2024-08-16 10:15:09 发布

阅读量2.1k

点赞数 3

文章标签： vue vue.js javascript 前端前端框架

本文链接：https://blog.csdn.net/fosakenEE/article/details/121663157

版权

tinymce基本的图片上传和文本已经很多人写过了，这里放一个中文文档

TinyMCE中文文档中文手册http://tinymce.ax-z.cn/ 项目中遇到需求能够让粘贴进来的图片上传到我们自己的服务器上，而不是单纯的引用一个连接，还有一个问题是同时粘贴进来的图文生成的图片标签是没有宽度和高度的，以下是解决方案。

单纯需要单图片复制自动上传的话只需要加一个配置

配置在tynemce.init({})里

paste_data_images: true,//单独粘贴的图片会执行上传图片的操作

同时记得在plugin中加上paste

以下有两种粘贴内容的来源，一种是从word中复制图文一种是从网页中复制图文

同时我们需要另外一个插件叫powerpaste

PowerPaste plug

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

fosakenEE

关注关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue3中使用tinyMCE

07-01

在Vue3中使用TinyMCE，我们可以利用其强大的功能并结合Vue的新特性，如Composition API和setup语法糖，来实现更加灵活和高效的组件化开发。首先，我们来看一下如何在Vue3项目中安装和配置TinyMCE。在解压后的文件...

TINYMCE粘贴WORD图片且图片文件自动上传功能

最新发布

alisky119的博客

08-30

1138

编辑器：TinyMCE需求：支持word内容复制粘贴前端框架：vue,vue2-cli,vue3-cli后端：java,springboot,asp.net,php,asp该说不说，这块需求还是挻多的，总体来说主要还是这个功能的应用范围挻广的，基本上大部分网站上面都可以用得到，最近加我的网友很多，有学生，有自由职业者，有全职的，也有个人的，无一例外，他们都对这个功能表现出了极大的兴趣。最近这块挻火的，今天早上又有网友加我微信，也是想了解一下这块的技术和方案。

3 条评论您还未登录，请先登录后发表或查看评论

富文本：vue +tinymce tinymce-vue+powerpaste可复制word

Tkings233的博客

02-16

5398

vue实现tinymce富文本编辑器，可复制word保留格式

TINYMCE直接粘贴图片实现

alisky119的博客

08-16

683

最近这块挻火的，今天早上又有网友加我微信，也是想了解一下这块的技术和方案。也不知道这位老哥是从哪里找到我的微信号，虽然已经在网上公开了，但是很多小老弟还是找不到，咱们有一说一，这位老哥还是有点东西的。昨天晚上论坛里面有一位网友给我发私信请教问题，如何解决word内容复制粘贴的问题，这位网友也是刚开始学习接触这块，很多基础知识并不了解，比如如何上传图片，如何保存图片，如何返回文件路径，这些技术他都不了解。先花了大概半个小时左右的时间给他讲解了一下基础知识，然后又花了一个小时的时间帮他搭建了一个开发和测试环境

tinymce4/5实现将word中内容（文字图片等）直接粘贴至编辑器中——利用插件tinymce-powerpaste-plugin

暂时先用这个名字

07-27

2817

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。TinyMCE的优势：开源可商用，基于LGPL2.1插件丰富，自带插件基本涵盖日常所需功能（示例看下面的Demo-2）接口丰富，可扩展性强。客户对老系统提出一个要求：能直接把word中的图片粘贴进编辑器中，否则一张张上传太麻烦了。网上找到这个插件`tinymce-powerpaste-plugin`

TinyMCE富文本编辑器，实现粘贴进来的Base64图片自动上传、图片压缩上传

m0_60312580的博客

07-17

2189

TinyMCE富文本编辑器，实现粘贴进来的Base64图片自动上传、图片压缩上传

ckeditor富文本编辑器的使用和图片上传，复制粘贴图片上传

cwhatiscs的专栏

04-19

2207

公司做的项目需要用到粘贴Word功能。就是将word内容一键粘贴到网页编辑器（在线富文本编辑器）中。Chrome+IE默认支持粘贴剪切板中的图片，但是我要粘贴的文章存在word里面，图片多达数十张，我总不能一张一张复制吧？我希望打开文档doc直接复制粘贴到富文本编辑器，直接发布网上找了很久，大部分都有一些不成熟的问题，皇天不负有心人终于让我找到了一个成熟的项目。 1、前台页面引用代码...

【注释修正版】tinymce paste，paste_preprocess中粘贴图片之前，完整图片上传方法以及使用文件服务返回的URL使用方法（使用正则获取img标签），js获取img标签。

晨曦博客

09-25

2555

Tinymce富文本想学，图片上传可参考代码怎么写的。一、实例：注释：只写了blob流图片数据格式上传，专门用在word文档里复制粘贴用的(只能一张一张复制粘贴上传)，好像tinymce，paste不支持全选图片，多张上传（我懒，想少掉点头发） paste_preprocess(plugin, args) { const z = '<img[^<>]*? src="([^<>]*?)"'; const IMG = args

vue 使用kindeditor粘贴复制图片上传给自己服务器，单独图片上传

10-12

vue 使用kindeditor粘贴复制图片上传给自己服务器，单独图片上传,避免用户到处寻找，解决了用户粘贴复制截图时候，图片变成base64,上传给后台的时候长度过于长，所以在粘贴的时候就上传给服务器，最后以形式显示在富...

vue-tinymce 富文本编辑器自定义图片上传

11-24

vue-tinymce 封装了el-upload 控件，支持富文本编辑器自定义图片上传整合。复制到vue的src/components文件夹下详情博文介绍见：https://xingyun.blog.csdn.net/article/details/102492921

tinymce 自定义多图片批量上传插件附使用示范Test

06-22

5. **图片上传后处理**：在图片上传到服务器并返回URL后，我们需要将这些URL插入到TinyMCE编辑器中。可以使用`editor.insertContent`方法来实现： ```javascript function insertImages(imgUrls) { for (var i = ...

富文本编辑器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']})

在vue3项目中使用tinymce编辑器

01-22

5. **在模板中创建编辑器**：在你的Vue组件模板中，创建一个对应的textarea元素，TinyMCE会自动将其替换为富文本编辑器： ```html <textarea id="myEditor"></textarea> ``` 6. **数据绑定**：如果需要将TinyMCE...

vue项目中使用tinymce富文本编辑器实现图片上传/粘贴格式

weixin_45525177的博客

12-27

568

本来是打算使用正则来找到图片, 获得服务器返回的内容,再使用正则匹配替换, 后来发现TinyMCE提供了urlconverter_callback用于处理url替换, 它有四个参数:url,node,an_save,name,主要使用到的是要替换的url地址, 这个方法返回的是替换后的url地址;”, 那继续加复制粘贴功能呗！

TinyMCE Demo powerPaste

不知名的研发小码农

08-25

4199

tinymce.rarpowerpaste.zip

tinymce直接粘贴图片实现

Mr_Zang666的博客

07-15

2346

1.4.2之后官方并没有做功能的改动，1.4.2在word复制这块没有bug，其他版本会出现手动无法转存的情况本文使用的后台是Java。前端为Jsp（前端都一样，后台如果语言不通得自己做 Base64编码解码）因为公司业务需要支持IE8 ，网上其实有很多富文本框，效果都很好。例如www.wangEditor.com 但试了一圈都不支持IE8 。所以回到Ueditor，由于官方没有维护，新的neuditor 也不知道什么时候能支持word自动转存，只能自己想办法。如果没有必要，不建议使用.

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

weixin_52041354的博客

03-29

513

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

H5 编辑器 Tinymce之解决图片上传/粘贴

wddwwwq1的博客

07-24

3036

H5 编辑器 Tinymce之解决图片上传/粘贴

关于TINYMCE粘贴图片自动上传

weixin_52041354的博客

04-02

330

粘贴word内容，粘贴word图片，粘贴word图文，用户发布新闻的时候是从word里面复制图片和文字，然后将word图文内容粘贴到web富文本编辑器中，希望能够将word的图片自动上传到服务器中，服务器地址能够自定义，后端的话需要支持任意开发语言，比如ASP,ASP.NET,JSP,PHP,PYTHON等。关于tinymce粘贴图片，粘贴word，一键导入word，粘贴word内容，网上能找到的方案不是特别多，都是通过HTML5提供的API来实现的。若是要求不装插件请使用zyOffice。

vue3使用tinymce上传图片

07-23

Vue3中使用TinyMCE插件上传图片通常需要以下几个步骤： 1. 首先，在项目中安装TinyMCE和相关的文件上传插件。可以使用npm或yarn来安装： ```bash npm install @tinymce/tinymce-vue @tinymce/tinymce-skins tiny-mce-file-uploader ``` 2. 在`main.js`或入口文件中引入并配置TinyMCE： ```javascript import Vue from 'vue'; import { createInitalizationOptions } from '@tinymce/tinymce-vue'; Vue.use(createInitalizationOptions({ selector: 'textarea', // 或者你想应用到的元素ID plugins: ['filemanager'], fileManagerLocation: '/path/to/file-manager', // 你的文件管理器URL toolbar: 'insertfile imagetools', })); ``` 这里启用了filemanager插件，并指定了上传文件的URL。 3. 在HTML模板中添加TinyMCE编辑器： ```html <textarea v-tinymce></textarea> ``` 4. 当用户选择图片时，TinyMCE会触发`image-upload-complete`事件，可以通过监听这个事件处理上传后的图片： ```javascript export default { mounted() { this.$refs.tinyMCEEditor.on('image-upload-complete', (event) => { const blob = event.detail.blob; // 图片blob // 进行后续处理，例如保存到服务器或者显示在页面上 }); }, } ```

vue使用tinymce 图文粘贴 图片大小 自动上传到本地服务

vue使用tinymce 图文粘贴图片大小自动上传到本地服务