wangEditor自定义上传图片上传按钮，适合各种JS或者后端上传

最新推荐文章于 2024-11-26 21:30:00 发布

好帅的爸爸（）

最新推荐文章于 2024-11-26 21:30:00 发布

阅读量7.1k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： Vue wangEditor 富文本编辑器

本文链接：https://blog.youkuaiyun.com/wangliuqi123/article/details/99075373

wangEditor是一款轻量级的国产富文本编辑器，支持IE10+浏览器。当自带的图片上传功能无法满足需求时，可以通过API接口或自定义图标上传图片。本文介绍了如何利用API拦截上传前的图片信息，调用自己的上传方法，以及如何通过添加图标并绑定点击事件实现自定义上传，从而解决七牛云或其他云服务的上传问题。

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

wangEditor是一款优秀的国产编辑器。

轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。

但是自身带的图片上传在上传七牛云可能存在版本问题。还有如果是其他云的JS上传图片的话就爱莫能助了，好在wangEditor提供了丰富的API可以换一种思路来实现。

1:使用提供的API 接口：

editor.customConfig.customUploadImg = function (files, insert) {
    // files 是 input 中选中的文件列表
    // insert 是获取图片 url 后，插入到编辑器的方法

    // 上传代码返回结果之后，将图片插入到编辑器中
    insert(imgUrl)
}

这里可以拦截到上传前的图片信息然后调用自己的上传文件方法，最后，插入到编辑器中，

2：取巧，自定义图标上传图片：

文末粘贴全部代码