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

已于 2024-06-07 16:40:31 修改
阅读量4.9k 收藏 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
版权
在使用TinyMCE6.0时遇到了image_upload_handler和file_picker_callback自定义上传图片的错误。问题根源在于新版本不支持旧语法，需要更新上传方法。通过调整代码，实现了图片成功上传。核心源码中包含了关键的解决步骤，同时提供了官方文档链接和问题讨论链接以供参考。
摘要由CSDN通过智能技术生成

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

images_upload_handler: (blobInfo, success, failure) => {
   
        console.log(success,
了解本专栏 订阅专栏 解锁全文 超级会员免费看
tinymce图片上传功能
weixin_47953779的博客
10-12 1130
之前做一个项目用到富文本编辑器，一个大佬推荐的tinymce(3.2.3版本)，使用后发现里面的图片上传功能要添加 （images_upload_handler）函数才能正常使用，不添加的话，点击上传，自带的只有输入图片路径的选择 images_upload_handler: (blobInfo, success, failure) => { var xhr, formData; xhr = new XMLHttpRequest(); xh
tinymce上传图片php,TinyMCE 图片和文件上传
weixin_39785422的博客
03-12 649
file_browser_callback这个选项允许你添加自己的文件或者图片浏览器到TinyMCE中，如果给这个选项设置了一个值，那么编辑器的菜单选项中会多出来一个insert/edit link或者insert/edit image这样的按钮。当然如果你不设置它也就不会显示了。每次点击这个按钮的时候file_browser_callback函数都会被调用一次。这个回调函数的格式是：fileBr...
【tinymce6.0】 images_upload_handler未正常自动上传图片问题
hellodrow的博客
03-29 1577
因为配置直接复制过去的，上传配置这样然后发现图片并没有显示正常的src,src还是‘blob:http:’格式。但是上传接口正常请求返回也正常。于是我把问题定位在images_upload_handler函数的回调上。发现res.url是可以正常打印的，怀疑success()的回调出问题。然后查了下tinymce6.0的官方文档。
使用TinyMCE富文本编辑器
最新发布
m0_66706006的博客
11-18 509
2. 在public下面新建tinymce文件夹，将node_modules中的tinymce中的skins复制到里面。3. 在public下面的tinymce文件夹下，新建一个langs文件夹，将下载的汉化包放里面。4.1 在utils文件夹下新建两个文件，isNumber.ts，uuid.ts。4.2 在components文件夹下，新建tinyMceVue组件。5. 在需要的位置使用TinymceVue组件。4. 在vue里面创建tinymce组件。1. 使用yarn安装Tinymce。
tinymce使用images_upload_handler将图片处理成base64或者url
yuguang的博客
08-18 9877
1.处理成base64 initTinymce() { const _this = this; window.tinymce.init({ // language: this.language, language: "zh_CN", selector: `#${this.tinymceId}`, height: this.height, body_class: "panel-body ",
tinymce6 上传图片报错Cannot read properties of undefined (reading ‘then‘)
TheDragonKing的博客
05-31 5236
题主想上传图片时前端读取文件，转为base64格式，放在img的src中，不需要通过后端。之后提交表单的时候再结合html内容全部提交过去 经过一番探索，tinymce6之前的上传方法都不行了，要加上promise。。。。不用了success了。。。 images_upload_handler: (blobInfo, progress) => new Promise((resolve, reject ) => { resolve('data:'
tinyMCE版本5.2.1中使用file_picker_callback回调函数自定义文件上传（当然包含图片上传）
沧笙踏歌的博客
04-18 6623
环境说明 jQuery+tinyMCE版本5.2.1，我引用的是tinymce.min.js而不是jQuery版本 准备工作 把这个图标弄出来 在plugins加入link 在toolbar加入link 如果有 link_list: [ { title: '预置链接1', value: 'http://www.tinymce.com' }, { ti...
vue中使用tinymce富文本，以及如何使用图片上传
木子静静的博客
10-14 5552
最新在写tinymce富文本，这里特别记录一下，以便于以后方便使用，因为也涉及到图片的上传，刚刚使用的时候图片上传这里只能输入地址保存，就想能手动上传，然后在网上看了好多方法，需要这个插件那个插件的感觉很复杂，后来阴差阳错的把手动上传配置出来了，操作很简单。[tinymce中文文档](http://tinymce.ax-z.cn/) 1.安装 npm install tinymce npm install @tinymce/tinymce-vue 2.在官网下载语言包 https://www.tiny.
tinymce上传图片php,图片&文件上传
weixin_34404599的博客
03-12 1010
此页更新时间：2020-10-28 11:46配置选项列表：如要快速上手，可以阅读《简介与入门：上传图片和文件》这个章节，里面包含完整的上传代码示例。automatic_uploads开关使用Data URL/Blob URL插入图片和文件到内容区的方式。例如，图像是使用imagetools插件处理后插入到内容区的，此时图像并未真正上传到服务器，而是以Data URL/Blob URL的方式插入在...
Tinymce 富文本编辑器 images_upload_handler 图片处理写法 Vue demo
05-27
以下是一个Vue demo，演示如何使用tinymce编辑器的`images_upload_handler`选项来上传图片并进行处理： ```vue <textarea ref="myTextarea"></textarea> import tinymce from 'tinymce/tinymce' import '...
MVC+API 实现tinymce富文本编辑器上传图片、上传视频
growb的博客
05-09 868
首先是要下载一个版本，这里我自己用的放到GitHub上了 https://github.com/dhgr1/tinymce 之前我试过官网的以及别的地方的，但都会报错，我也没搞清楚原因，你们可以自己去试试，我的这个里面是已经包括中文包以及多图片上传需要的插件axupimgs 我这里是放到项目的Content里面的Scripts里面 首先是引用插件和中文包 <script src="~/Content/Scripts/tinymce/js/tinymce/tinymce.min.js"&gt
tinymce-uploadimage:TinyMCE 4插件以上传图像（base64）
05-08
GitLab RosarioSIS代码现在托管在！ UploadImage，一个TinyMCE插件 版本0.1-2017年1月 许可GNU GPL v2 作者弗朗索瓦·雅克（FrançoisJacquet） 该插件允许用户上传直接放置在文本区域中的图像。 从技术上讲，图像会自动转换为base64代码。 没有图像上传到服务器。 图像数据直接放置在HTML图像标签的src内部。 要求 这是为版本4（TinyMCE是WYSIWYG HTML编辑器）编写的。 设置 您的TinyMCE init（）方法应包含以下值： tinymce . init ( { ... plugins : 'uploadimage' , // and your other plugins. toolbar : 'uploadimage' // and your other buttons. . . .
tinymce富文本编辑器实现本地图片上传
Li_na_na01的博客
04-03 6481
在开发过程中使用tinymce富文本编辑器，发现他的图片上传默认是上传网络图片 那么如何实现上传本地图片呢，上官网逛一圈，发现其实很简单 在官网中找到下面这张图片，并且有相关的例子 这里，我使用了自定义函数 images_upload_handler (blobInfo, success, failure) { const url = 'uploadImg' ...
富文本编辑器TInyMCE,本地图片上传（Image Upload）
weixin_33936401的博客
08-07 2219
TinyMCE 官网 （类似：百度的富文本web编辑器UEditor） 第一步 下载 TinyMCE，解压后放入工程，在需要的HTML页面引入tinymce.min.js。 第二步 下载tinyMCE image upload 插件 tinymce-imageupload，解压后把该文件夹放在 tinymcejstinymceplugin...
thinkphp 6.0 使用tinyMCE image 图片上传插件应该注意的问题
lupiqian的博客
03-27 1068
一般情况下，tinyMCE的image的图像上传功能接收来自服务器返回的json字符串，然后解析成图片链接引入编辑器。 但是，在开发过程中， 由于tp处于debug模式， 返回的数据会附带上调试的html， js代码，从而导致因该返回的json字符串解析失败，错误信息如下： Uncaught SyntaxError: Unexpected token < in JSON at position 0 所以，返回json字符串后，应该立即调用exit就可避免这样的问题出现。 示例（最后一行）：
Tinymce 实现图片和视频上传
qq_43467284的博客
05-31 4135
使用Tinymce 实现图片和视频上传功能
vue中 Tinymce上传本地图片的实现
reembarkation的博客
03-22 515
vue中 Tinymce上传本地图片的实现
tinymce6插件开发（版本涉及4.x\5.x\6.x\7.x，案例以Element-UI中开发为蓝本）
暂时先用这个名字
02-08 2117
网上大部分涉及tinymce插件开发的文章以4.x和5.x版本为主，而最新的6.x版很多老插件都无法正常加载或运行了。本文以一个包含checkbox组件的弹窗为例进行说明，代码可直接复制使用。
TinyMCE图片和文件上传（阿里云）
qq453660983的博客
06-14 3554
TinyMCE图片和文件上传（阿里云）
tinymce 图片上传插件
我爱1和0 个人主页:521100.net
05-22 1256
tinymce 图片上传插件
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

风清云淡_A

觉得有帮助的话可以给点鼓励

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值