如何在CKEditor5 Angular中编写自定义上传适配器

时间:2019-07-06 11:44:21

标签: angular ckeditor5

我正在寻找一个用于在CKEditor5中上传图像的自定义上传适配器。

我的代码是:

组件:

 import { Component } from '@angular/core';
 import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
 import Base64UploadAdapter from '@ckeditor/ckeditor5- 
 upload/src/base64uploadadapter';


 @Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ckeditor';
  public Editor = ClassicEditor;

  ckconfig = {
    // include any other configuration you want
    extraPlugins: [ this.TheUploadAdapterPlugin ]
  };

  TheUploadAdapterPlugin(editor) {
    console.log('TheUploadAdapterPlugin called');
    editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
      // return new UploadAdapter(loader, '/image');
      return "hello";
    };
  }

  class UploadAdapter {
    loader;  // your adapter communicates to CKEditor through this
    url;
    constructor(loader, url) {
      this.loader = loader;   
      this.url = url;
      console.log('Upload Adapter Constructor', this.loader, this.url);
    }

    upload() {
      return new Promise((resolve, reject) => {
        console.log('UploadAdapter upload called', this.loader, this.url);
        console.log('the file we got was', this.loader.file);
        resolve({ default: 'http://localhost:8080/image/1359' });
      });
    }

    abort() {
      console.log('UploadAdapter abort');
    }
  }  
}

我收到错误消息“意外的令牌。需要构造函数,方法,访问器或属性。”用于类UploadAdapter。知道为什么吗?

此外,图片上传似乎无法通过这种方式进行。在线上是否有任何实现示例。我找不到任何东西。

0 个答案:

没有答案