CKEditor5实现自定义上传图片到七牛云

最近公司在做一个ios端的日记App，需要我写一个后台管理，需要支持图文混排功能，然后对比了一下市面上比较主流的富文本编辑器，最终选择CKEditor5进行二次开发，因为CKEditor5具有强大的插件系统，方便自定义开发一些功能，比如一键导入微信文章，给所有的链接添加下划线等等。

如何实现自定义上传?

根据官方文档的描述,我们需要自己实现一个上传Adapter，实现upload方法和abort方法，在实际测试中abort方法将在删除图片时被调用，也就是说，可以把删除服务器图片的代码逻辑写到abort方法里面，upload方法需要返回一个Promise，数据返回格式为

{
    default: 'http://example.com/images/image–default-size.png'
}
或者
{
    default: 'http://example.com/images/image–default-size.png',
    '160': 'http://example.com/images/image–size-160.image.png',
    '500': 'http://example.com/images/image–size-500.image.png',
    '1000': 'http://example.com/images/image–size-1000.image.png',
    '1052': 'http://example.com/images/image–default-size.png'
}
`

编辑器会根据自己的宽度显示合适的图片,话不多说，上代码

import * as qiniu from 'qiniu-js'

export default class UploadImageAdapter {
    constructor(vue, loader) {
        this.vm = vue
        this.loader = loader
        this.qiniuData = {
            config: {
                useCdnDomain: true
                // region: 'qiniu.region.z2'
            },
            token: "",
            putExtra: {
                fname: "",
                params: {},
                mimeType: ["image/png", "image/jpeg"]
            },
            imgURL: "http://www.example.com" //这个是自己服务器的域名
        }
    }
    getQiniuToken() {
        return new Promise(resolve=>{
            this.vm.$request(
                `/qiniu/token`,
                "get", {}, {
                    headers: {
                        Authorization: window.localStorage.getItem("Authorization"),
                        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
                    }
                }
            ).then(res => {
                if (res.code == 200) {
                    resolve(res.data.token)
                }
            });
        })
        
    }
    async upload() {
        const vm=this.vm
        const img = await this.loader.file
        const token =await this.getQiniuToken() //获取七牛云token
        this.qiniuData.token=token
        let imgType = img.name.split(".").reverse()[0];
        let filename = `qiDairy/${new Date().getTime()}${Math.random()
          .toString(18)
          .substr(2)}.${imgType}`;
        
        let observable = qiniu.upload(
            img,
            filename,
            this.qiniuData.token,
            this.qiniuData.putExtra,
            this.qiniuData.config
        );
        this.observable=observable
        return new Promise((resolve, reject) => {
            let observer = {
                next(res) {
                   
                },
                error(err) {
                    
                    reject(false);
                    vm.$Message.error({
                        content: `富文本编辑器图片 ${
                      img.name
                    } 上传至七牛云失败，请重新上传或者重新登录后上传`,
                        duration: 3
                    });
                },
                complete(res) {
                    let url = `${vm.qiniuData.imgURL}${
                    res.key
                  }?imageView2/0/format/jpg/q/15|imageslim`;
                    let response={
                        default:url
                    }
                    resolve(response);
                }
            };
            let subscription = observable.subscribe(observer); // 上传开始
        })
    }

    abort() {
      //可以书写删除服务器图片的逻辑
    }
}

至此自定义上传图片功能就完成了，自定义上传视频，文件功能应该是同理
因为我使用的是CKEditor5的vue版本，可以在ready事件里面写如下代码来注册适配器

  onEditorReady(editor) {
      editor.plugins.get("FileRepository").createUploadAdapter = loader => {
        return new ckUploadImageAdapter(this, loader); //this代表vue实例
      };
    }