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

loading...


0

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

loading...

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.
         } 
    }
    

    这就是它 .

评论

暂时没有评论!