tinymce6.0 image_upload_handler和file_picker_callback自定义上传图片报错的解决方案

已于 2024-06-07 16:40:31 修改
阅读量4.4k 收藏 4
点赞数 4
分类专栏： vue2/vue3 编辑器 前端框架深度研究-vben 文章标签： javascript vue.js 前端
于 2022-09-29 14:58:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27702739/article/details/127106632
版权

自己配置个富文本组件，用的tinymce，尽然出现这种报错，一脸茫然，最后查找到竟然是版本的问题，tinymce6.0不支持之前的语法了，要改写image_upload_handler方法:

images_upload_handler: (blobInfo, success, failure) => {
   
        console.log(success, 'success')
        console.log
了解本专栏 订阅专栏 解锁全文 超级会员免费看
风清云淡_A
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
订阅专栏
tinymce5.0 image_upload_handler自定义上传图片接口的方法
峰会路转的博客
10-11 1835
tinymce6.0的之前用到过，现在是jeecg的框架用的技术没那么新，是5.0的，算是重新研究了一遍tinymce的上传，两个版本的大同小异。
VUE使用富文本编辑器 Tinymce（踩坑记录）
qq_38265533的博客
05-09 2668
下面这一层工具栏是没法自动折叠的，需要再次点击省略号才可以折叠，在使用过程中体验不太好。因为是vue2所以选用v5版本选用v3的组件，其实说到底不同版本的Vue只不过一些细微的差异和版本不同，其大体都是差不多的。对比了其他富文本编辑器，tinymce是唯一一个从word复制过来的时候基本保持原有样式的富文本，这一点体验感非常好。tinymce文件夹，然后把node_modules下的tinymce下的skins文件夹复制粘贴到。2.将解压得到的文件夹，放到TinyMCE主目录下的plugins文件夹内。
tinyMCE版本5.2.1中使用file_picker_callback回调函数自定义文件上传（当然包含图片上传）
沧笙踏歌的博客
04-18 6255
环境说明 jQuery+tinyMCE版本5.2.1，我引用的是tinymce.min.js而不是jQuery版本 准备工作 把这个图标弄出来 在plugins加入link 在toolbar加入link 如果有 link_list: [ { title: '预置链接1', value: 'http://www.tinymce.com' }, { ti...
Vue3——Tinymce6富文本编辑器的使用方法
最新发布
Bonsoir777的博客
04-10 908
vue3中tinymce中的使用方法
Tinymce富文本编辑器在vue项目中的使用；引入第三方插件和上传视频、图片等
weixin_39311719的博客
04-13 3992
在项目中的public文件夹中新建tinymce文件夹（因为我的项目是脚手架创建的，所以公共文件夹是public）；1. 最后两行是另外下载的插件（数学公式、导入word）,上面的二和三步的tinymce文件夹里面新建plugins文件夹，下载的两个插件就丢这里面;方法是在文件后面的方法中定义的，目的是验证上传的视频是否符合，验证通过定义了一个全局的遮罩loading，再调用定义的。：因为tinymce是英文版本的，所以要下载汉化包中文js，放到上面的tinymce文件夹中。1. 编辑器初始化中的“
tinymce5的图片上传实现
qq_42099419的博客
03-13 1849
在vue created中初始化 tinymce.init({ selector: '#tinymce-editor', language_url: "/tinymce/zh_CN.js", language: "zh_CN", height: 400, toolbar: "formatselect fontselect | bold italic ...
vue中tinyMCE富文本框加入图片上传至服务器、行高等功能
weixin_45369499的博客
02-21 1014
图片上传至服务器、行高等功能
vue+axios+TinyMCE图片上传功能
qq_41976264的博客
12-25 1302
vue+axios+TinyMCE图片上传功能前端编辑器Tinymce图片上传后端配置（impor！！！！）后端代码 前端 最近在做一个前后端分离的实践，实践当中需要完成文本的编辑，以及图片的上传，在图片上传的地方踩了很多坑最后也没有实现。最后在浏览众多方法后自己试着写了一下，成功！（PS：本人在校大学生，小白一枚，只想留下自己踩的坑） 编辑器 前端编辑器使用的是Tinymce 因为英语很渣，看见...
tinymce_5.8.2.zip
07-30
TinyMCE可视化HTML编辑器是一个轻量级的基于浏览器的所见即所得编辑器，支持目前流行的各种浏览器，采用JavaScript/ECMAScript...最重要的是，TinyMCE是一个根据LGPL license发布的自由软件，你可以把它用于商业应用。
File-upload-and-The-text-editor.zip_The Editor
09-20
TinyMCE和CKEditor是两个常用的富文本编辑器库，它们提供了一套完整的工具栏，让用户可以轻松地添加图片、链接、格式化文本等。这些编辑器通常与后端服务结合，使用户可以在线创建和编辑内容，如博客文章、论坛帖子...
tinymce格式刷_formatpainter-格式刷插件和用法
05-06
TinyMCE是一款强大的开源富文本编辑器，广泛应用于网页内容编辑和内容管理系统中。它提供了丰富的功能和插件，使得用户可以轻松创建和编辑复杂的文本格式。本文将深入讲解TinyMCE中的“格式刷”（Format Painter）...
TinyMCE自定义上传图片
12-04
tinyMCE编辑器，包含自定义上传图片插件，下载后放在tinyMCE插件的plugins文件夹中，之后初始化中引入plugins，即可在toolbar中展示
tinymce-plugin_image-zoom
05-10
【tinymce-plugin_image-zoom】是一个专门为TinyMCE编辑器设计的插件，它扩展了TinyMCE的功能，使得用户在编辑过程中可以实现图片的缩放功能。TinyMCE是一款非常流行的富文本编辑器，广泛应用于网站内容管理系统、...
彻底解决tiny_mce_wiris公式插件加载慢的问题
05-25
解决方案： 本地部署wiris插件服务器，js,css,post请求等，使其不依赖wiris云端 步骤： 1. 复制tiny_mce_wiris插件到tinymce\plugins下 apache-tomcat-9.0.45-windows-x64\apache-tomcat-9.0.45\webapps\tinymce_...
tinymce 上传本地视频
小星落
05-26 7229
tinymce富文本编辑器的视频上传功能，发现默认只能填写视频链接，不能上传本地的视频 修改视频上传按钮 需要设置 file_picker_callback 在 tinymce.init 中添加 //自定义文件选择器的回调内容 此方法只有在点击上方图片按钮才会触发 file_picker_callback: function (callback, value, meta) { if (meta.filetype === 'file') { callback('
tinymce编辑器上传本地视频
Harrietjia的博客
05-06 1444
直接上代码： plugins和toolbar要加上 media，然后通过file_picker_callback和media_url_resolver进行处理 tinymce.init({ file_picker_callback: function(callback, value, meta) { //文件分类 var filetype = '.pdf, .jpg, .jpeg, .png, .gif,
TinyMCE图片和文件上传（阿里云）
qq453660983的博客
06-14 3299
TinyMCE图片和文件上传（阿里云）
2021-01-25
Thea12138的博客
01-25 228
tinymce富文本编辑器如何实现上传图片 在项目中，前端会经常使用tinymce富文本编辑器插件，编辑器有上传图片的功能，而对于上传的这个图片的处理，有两种方式： 编辑器中有一个images_upload_handler方法，上传图片会触发该事件，该事件有3个参数，分别是上传图片的文件内容、上传成功的success处理方法、上传失败的failure处理方法。 方式一：上传图片时将文件流给后端，后端返回附件地址 1 images_upload_handler: (blobInfo, succ
Tinymce 富文本编辑器 images_upload_handler 图片处理写法 Vue demo
05-27
以下是一个Vue demo，演示如何使用tinymce编辑器的`images_upload_handler`选项来上传图片并进行处理： ```vue <template> <div> <textarea ref="myTextarea"></textarea> </div> </template> <script> import tinymce from 'tinymce/tinymce' import 'tinymce/themes/silver/theme' import 'tinymce/plugins/image' export default { name: 'RichTextEditor', mounted() { const self = this tinymce.init({ selector: 'textarea', plugins: ['image'], images_upload_handler: function (blobInfo, success, failure) { self.uploadImage(blobInfo.blob(), success, failure) } }) }, methods: { uploadImage(file, success, failure) { // 在这里编写上传图片的代码 // 成功时调用success方法并传入图片的url // 失败时调用failure方法并传入错误信息 } } } </script> ``` 在这个示例中，我们使用了Vue和tinymce来创建一个富文本编辑器。在`mounted`方法中初始化了tinymce，并将`images_upload_handler`选项设置为一个函数，该函数会在上传图片时被调用。 在`images_upload_handler`函数中，我们调用了`uploadImage`方法，并将blob对象、成功回调函数和失败回调函数作为参数传递给它。在`uploadImage`方法中，我们可以编写自己的上传图片的代码，处理图片并返回图片的url。 请注意，`images_upload_handler`选项只适用于tinymce 5及以上版本。如果您使用的是较早的版本，您需要使用`file_picker_callback`选项来自定义文件选择器并上传图片。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值