wangeditorV5自定义上传图片

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

一般来说实际业务里都是上传到我们自己的服务器，所以最方便的方法就是改写customUpload方法

官方文档写的非常简单：

自定义上传

如果你不想使用 wangEditor 自带的上传功能，例如你要上传到阿里云 OSS 。
可以通过 customUpload 来自定义上传。

editorConfig.MENU_CONF['uploadImage'] = {
    // 自定义上传
    async customUpload(file: File, insertFn: InsertFnType) {
        // file 即选中的文件
        // 自己实现上传，并得到图片 url alt href
        // 最后插入图片
        insertFn(url, alt, href)
    }
}

基本等于什么都没说

如何在这里扩展呢？

先讲一下editorconfig的基本结构：

我这边常用的就是hoverbarkeys（点击富文本里面的东西会出现的菜单栏）

以及menu_conf

menu_conf里面就可以设置自定义上传

const editorConfig: Partial<IEditorConfig> = {
 placeholder: "请输入内容...",
 hoverbarKeys: {...},
 MENU_CONF:{...}}

具体写法：

拿到file，请求，插入操作

uploadImage: {        
async customUpload(file: File, insertFn: InsertFnType) {
 //开始请求  let formData = new FormData();          
formData.append("img", file);          
const res = await uploadHttp.post( "/upload",formData);          
if (res.sta === 0) {            
//插入操作 ,url:图片url，alt：图片alt，href：图片href            
insertFn(url, alt, href)          
}        
},      
},

当然这里的insertFn也是可以自定义的

自定义insertFn：

如果你对slate.js以及snabbom.js有了解的话

直接把insertFn替换成下面的insertNode也是可以的，效果是一模一样的

好处就是可以自定义一些其他的东西，比如style，或者直接改成别的元素都可以

可以实现修改默认图片上传样式的功能，比如现在默认是30%宽度，可以改成你想要的任何样式，满足业务需求

const node = {type: "image",  src,alt,style: { width: "100%" }, children: [{ text: "" }],};           
 editor.insertNode(node);