如何在Angular 5中为CKEditor5实现自定义图像上传器？

1 回答

• 0

  不需要该适配器的Angular特定版本 .

  您可以使用例如：https://github.com/pourquoi/ckeditor5-simple-upload或尝试将其与CKFinder集成 .

  然后，您需要做的就是将配置对象传递给 <ckeditor [config]='config'> 组件 .

  或者，您可以自己创建它 . 这应该是上传适配器的基本框架，应与UploadAdapter interface匹配：

  editor.plugins.get( 'FileRepository' ).createUploadAdapter = loader => {
      return new UploadAdapter( loader, editor.config.get( 'uploadUrl' ), editor.t );
  }
  
  class UploadAdapter {
      constructor( loader, url, t ) {
          this.t = t; // Translate function
          this.loader = loader;
          this.url = url; // Endpoint URL
      }
  
      upload() {
          // Perform uploading and return a promise to that action.
      }
  
      abort() {
          // Abort current upload process.
      }
  }
  

  整个过程在文档中有更深入的描述：https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/upload-adapter.html . 您还可以查看https://github.com/pourquoi/ckeditor5-simple-upload/blob/master/src/adapter.js的源代码

  然后，要获取 ckeditor5-angular 包中的 editor 属性，您需要侦听 ready 事件并获取编辑器参数：

  <editor [ready]="onReady" ...></editor>
  

  @Component()
  class EditorComponent {
       public onReady( editor ) {
            // Now you can acess the editor.
       } 
  }
  

  这就是它 .

  回复于 2024-04-17T01:43:39+08:00