在 Angular 中向 ckeditor 添加简单的上传适配器

Question

我确实在我的 angular 项目中通过安装启动了经典的 ckeditor...

npm install --save @ckeditor/ckeditor5-angular
npm install --save @ckeditor/ckeditor5-build-classic

在我的组件中我导入了它...

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';

启动对象...

  public Editor = ClassicEditor;

并且在模板中是这样开始的

        <ckeditor [config]="{ toolbar: [ 'heading', '|', 'bold', 'italic' ] }" name="Blog" placeholder="About your ride" [(ngModel)]="formModel.Blog" required [editor]="Editor" data="<p>Blog!</p>"></ckeditor>

现在我想给这个编辑器添加简单的上传适配器。

我确实安装了

npm install --save @ckeditor/ckeditor5-upload

然后有写

将 SimpleUploadAdapter 添加到我的插件列表 https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/simple-upload-adapter.html

我被困在这里。我不知道那个插件列表是什么以及在哪里。

关于如何将图片上传添加到我的 ckeditor 有什么想法吗？

更新在我的组件中这样做：

  public Editor = ClassicEditor;
  public config = { plugins: [SimpleUploadAdapter]};

在我的 HTML 调用中相同

<ckeditor [config]="{ toolbar: [ 'heading', '|', 'bold', 'italic' ] }" name="Blog" placeholder="About your ride" [(ngModel)]="formModel.Blog" required [editor]="Editor" data="<p>Blog!</p>"></ckeditor>

获取错误

Uncaught CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated

Answer 1

我通过使用自定义上传适配器而不是 SimpleUploadAdapter 实现了此功能 - 即

仅从此处复制 class：https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/upload-adapter.html#the-complete-implementation
（我稍微调整了一下以避免 TypeScript 错误，并更改了 URL）
将 class 导入您的 Angular 组件
添加 ready 处理程序，为 createUploadAdapter

所以我的代码是：

my-upload-adapter.ts:

export class MyUploadAdapter {
    loader: any;
    xhr: any;
    constructor( loader ) {
        this.loader = loader;
    }
    upload() {
        return this.loader.file
            .then( file => new Promise( ( resolve, reject ) => {
                this._initRequest();
                this._initListeners( resolve, reject, file );
                this._sendRequest( file );
            } ) );
    }
    abort() {
        if ( this.xhr ) {
            this.xhr.abort();
        }
    }
    _initRequest() {
        const xhr = this.xhr = new XMLHttpRequest();
        xhr.open( 'POST', 'http://yourserver/upload', true ); // TODO change the URL
        xhr.responseType = 'json';
    xhr.setRequestHeader("Accept", "application/json");
    }
    _initListeners( resolve, reject, file ) {
        const xhr = this.xhr;
        const loader = this.loader;
        const genericErrorText = `Couldn't upload file: ${ file.name }.`;
        xhr.addEventListener( 'error', () => reject( genericErrorText ) );
        xhr.addEventListener( 'abort', () => reject() );
        xhr.addEventListener( 'load', () => {
            const response = xhr.response;
            if ( !response || response.error ) {
                return reject( response && response.error ? response.error.message : genericErrorText );
            }
            resolve( {
                default: response.url
            } );
        } );
        if ( xhr.upload ) {
            xhr.upload.addEventListener( 'progress', evt => {
                if ( evt.lengthComputable ) {
                    loader.uploadTotal = evt.total;
                    loader.uploaded = evt.loaded;
                }
            } );
        }
    }
    _sendRequest( file ) {
        const data = new FormData();
        data.append( 'upload', file );
        this.xhr.send( data );
    }
}

my.component.html:

<ckeditor ... (ready)="onReady($event)"></ckeditor>

my.component.ts:

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { MyUploadAdapter } from '../my-upload-adapter';

//...

export class MyComponent implements OnInit {
    Editor = ClassicEditor;

//...

    onReady(editor: ClassicEditor): void {
        editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
            return new MyUploadAdapter( loader );
        };
    }
}

在 Angular 中向 ckeditor 添加简单的上传适配器

Adding simple upload adapter to ckeditor in Angular

angular

file-upload

ckeditor