ckeditor - 上传适配器未定义 ckeditor5-angular 中的图像上传问题

Question

这个问题可能已经有了答案，但没有一个是特定于 Angular 的。
这里是其中的一些

CKEditor 5 and Image Button

How to enable image upload support in CKEditor 5?

Insert image to CKeditor

我正在使用 Angular 5 并遵循 this实现 ckeditor5-angular 的文档。

但是我在上传图片时遇到问题，当我尝试上传图片时，它在浏览器控制台中显示。

filerepository-no-upload-adapter: Upload adapter is not defined. Read more: https://docs.ckeditor.com/ckeditor5/latest/framework/guides/support/error-codes.html#error-filerepository-no-upload-adapter

我试过搜索这个问题并找到了很多解决方案，但实际上我一个都看不懂，因为它们不是 Angular 特有的。

请帮助我如何上传图片。

Answer 1

在 component.html文件添加以下代码

<ckeditor [editor]="Editor" (ready)="onReady($event)"></ckeditor>

在 component.ts文件创建函数 onReady(data)

onReady(eventData) {
    eventData.plugins.get('FileRepository').createUploadAdapter = function (loader) {
      console.log(btoa(loader.file));
      return new UploadAdapter(loader);
    };
  }

添加名为 UploadAdapter 的新类并添加以下代码:-

export class UploadAdapter {
  private loader;
  constructor(loader: any) {
    this.loader = loader;
    console.log(this.readThis(loader.file));
  }

  public upload(): Promise<any> {
    //"data:image/png;base64,"+ btoa(binaryString) 
    return this.readThis(this.loader.file);
  }

  readThis(file: File): Promise<any> {
    console.log(file)
    let imagePromise: Promise<any> = new Promise((resolve, reject) => {
      var myReader: FileReader = new FileReader();
      myReader.onloadend = (e) => {
        let image = myReader.result;
        console.log(image);
        return { default: "data:image/png;base64," + image };
        resolve();
      }
      myReader.readAsDataURL(file);
    });
    return imagePromise;
  }

}

这里 default表示上传的图片网址。我已经在 base64 中转换了文件，但您可以调用服务器 url 并上传您的文件，然后使用相同的 key 返回服务器 url。

享受编码 :)