@ckeditor/ckeditor5-angular 的图片上传

在使用@ckeditor/ckeditor5-build-decoupled-document 的文章模板时，图片上传功能未实现UploadAdapter而无法上传，解决办法：自己实现一个文件上传适配器。本本已base64格式上传为例

1、实现Base64UploadAdapter

export class Base64UploadAdapter {

    public reader = new FileReader();
    loader: any;

    constructor(loader: any) {
        this.loader = loader;
    }

    public upload() {
        return new Promise((resolve, reject) => {
            const reader = this.reader;
            reader.addEventListener('load', () => {
                resolve({ default: reader.result });
            });

            reader.addEventListener('error', err => {
                reject(err);
            });

            reader.addEventListener('abort', () => {
                reject();
            });

            this.loader.file.then((file: Blob) => {
                reader.readAsDataURL(file);
            });
        });
    }

    public abort() {
        this.reader.abort();
    }
}

2、在CKEditor的 onRead事件中注入

public onReady(editor: any) {
    editor.ui.getEditableElement().parentElement.insertBefore(
      editor.ui.view.toolbar.element,
      editor.ui.getEditableElement()
    );

    editor.plugins.get('FileRepository').createUploadAdapter = function (loader: any) {
      return new Base64UploadAdapter(loader);
    };
  }

注意：不要使用@ckeditor/ckeditor5-upload下的UploadAdapter，会造成重复引用