Vue用axios实现TinyMCE的图片上传功能

最新推荐文章于 2025-05-22 12:17:23 发布

原创

最新推荐文章于 2025-05-22 12:17:23 发布 · 1w 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#VUE #TinyMCE #图片上传 #富文本编辑器 #axios

本文介绍了如何在Vue项目中使用axios插件，实现TinyMCE富文本编辑器的图片上传功能。作者参考了相关文章，并对TinyMCE的配置进行了调整，以适配axios请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue用axios插件实现TinyMCE的图片上传功能

最近工作用到富文本编辑器，通过各种对比选择了TinyMCE编辑器。

在配置方面参考了这篇文章vue项目移植tinymce踩坑，
对原文作者表示感谢。

同时，因为项目中使用axios插件进行请求，为了统一格式，使用axios重新实现了TinyMCE自带的上传功能。

具体方式如下：

再次强调，如果不会再Vue中引入TinyMCE可以参考vue项目移植tinymce踩坑。

在上文配置的init方法中添加如下方法(就在上文中setup方法的后面):

  // 图片上传三个参数，图片数据，成功时的回调函数，失败时的回调函数
 images_upload_handler: function (blobInfo, success, failure) {
   
   
   if (blobInfo.blob().size > self.maxSize) {
     failure('文件体积过大')
   }
   i