在Angular中向ckeditor添加简单的上传适配器 [英] Adding simple upload adapter to ckeditor in Angular

问题描述

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

I did started classic ckeditor in my angular project by installing...

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

在我的组件中，我已将其导入...

In my component I've imported it...

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>

现在，我要向此编辑器添加简单上传适配器.

Now I want to add Simple upload adapter to this editor.

我确实安装了

npm install --save @ckeditor/ckeditor5-upload

然后有文字

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

我被困在这里.我不知道该插件列表是什么，在哪里.

And I'm stuck here. I don't know what's and where is that plugin list.

有什么想法可以将图像上传添加到我的ckeditor吗?

Any ideas how to add image upload to my ckeditor ?

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

Update In my component did this:

  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模块重复

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

推荐答案

我通过使用自定义上传适配器而不是 SimpleUploadAdapter -即

I got this working by using a custom upload adapter instead of SimpleUploadAdapter - i.e.

1. 仅从此处复制课程:

1. Copy the class only from here: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/upload-adapter.html#the-complete-implementation
   (I adapted it slightly to avoid TypeScript errors, and changed the URL)
2. Import the class into your Angular component
3. Add a ready handler that provides an implementation for 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添加简单的上传适配器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！