@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，會造成重復引用