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

Question

我确实通过安装在我的角度项目中启动了经典的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>

出现错误

未捕获的 CKEditorError：ckeditor-duplicated-modules：某些 CKEditor 5 模块重复

Answer 1

我通过使用自定义上传适配器而不是SimpleUploadAdapter来完成此工作- 即

1. 仅从此处复制该类：https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/upload-adapter.html#the-complete-implementation
   （我对其进行了稍微调整以避免 TypeScript 错误，并更改了网址）
2. 将类导入到 Angular 组件中
3. 添加一个ready提供实现的处理程序createUploadAdapter

所以我的代码是：

我的上传适配器.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 );
    }
}

我的组件.html：

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

我的组件.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 );
        };
    }
}