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

我正在寻找一个示例,显示使用Angular 5为CKEditor 5实现自定义图像上传器 .

回答(1)

2 years ago

不需要该适配器的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.
     } 
}

这就是它 .