CKEDITOR5 - Angular8: TypeError: this.editor.create не является функцией

Я пытаюсь интегрировать CKEDITOR 5 в свой проект Angular 8. Я создал собственную супер-сборку с дополнительными плагинами и с ClassicEditor и InlineEditor (используя это руководство: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html#create-super-builds) .

Я импортировал CKEditorModule в свой общий файл модуля. Ниже мой файл компонента:

import { Component, OnInit } from '@angular/core';
import * as CKEDITOR from '@ckeditor/ckeditor5-build-classic';

@Component({
    templateUrl: './cke5.html',
    styleUrls: ['./cke5.scss'],
    selector: 'app-cke5'
})
export class CKE5  {

    loader: any;

    public CEditor = CKEDITOR.ClassicEditor.create( document.querySelector( '#editor' ), {
        extraPlugins: [ this.imageUploadAdapterPlugin ],
    } )
    .catch( error => {
        console.log( error );
    } );

    constructor() {
        console.log(CKEDITOR.ClassicEditor);
    }

    uploadImage() {
        return this.loader.file
            .then( file => new Promise( ( resolve, reject ) => {
                console.log('UPloading..');
            } ) );
    }

    abortImageUpload() {
        console.log('Abort image upload.')
    }

    imageUploadAdapter(loader: any) {
        this.loader = loader;

        const uploadInterface = {
            upload: this.uploadImage,
            abort: this.abortImageUpload
        };

        return uploadInterface;
    }

    imageUploadAdapterPlugin( editor ) {
        editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
            return this.imageUploadAdapter(loader);
        };
    }
}

Я получаю сообщение об ошибке TypeError: this.editor.create is not a function:

zone-mix.js:3267 ERROR TypeError: this.editor.create is not a function
    at CKEditorComponent.push../node_modules/@ckeditor/ckeditor5-angular/fesm5/ckeditor-ckeditor5-angular.js.CKEditorComponent.createEditor (ckeditor-ckeditor5-angular.js:311)
    at ckeditor-ckeditor5-angular.js:173
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
    at NgZone.push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular (core.js:26215)
    at CKEditorComponent.push../node_modules/@ckeditor/ckeditor5-angular/fesm5/ckeditor-ckeditor5-angular.js.CKEditorComponent.ngAfterViewInit (ckeditor-ckeditor5-angular.js:169)
    at callProviderLifecycles (core.js:21414)
    at callElementProvidersLifecycles (core.js:21388)
    at callLifecycleHooksChildrenFirst (core.js:21378)
    at checkAndUpdateView (core.js:29448)
console.<computed> @ zone-mix.js:3267
View_CKE5_0 @ CKE5.ngfactory.js? [sm]:1
proxyClass @ compiler.js:20828
push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:30271
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:4050
(anonymous) @ core.js:27137
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:26215
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:27137
(anonymous) @ core.js:26998
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
onInvoke @ core.js:26256
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:26170
next @ core.js:26998
schedulerFn @ core.js:23735
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:192
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:130
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:76
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:53
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:23719
checkStable @ core.js:26225
onLeave @ core.js:26292
onInvokeTask @ core.js:26250
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:3070
processImmediate @ internal/timers.js:439
Show 3 more frames

zone-mix.js:3267 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 2, nodeDef: {…}, elDef: {…}, elView: {…}}
console.<computed> @ zone-mix.js:3267
View_CKE5_0 @ CKE5.ngfactory.js? [sm]:1
proxyClass @ compiler.js:20828
push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:30271
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:4055
(anonymous) @ core.js:27137
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:26215
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:27137
(anonymous) @ core.js:26998
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
onInvoke @ core.js:26256
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:26170
next @ core.js:26998
schedulerFn @ core.js:23735
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:192
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:130
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:76
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:53
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:23719
checkStable @ core.js:26225
onLeave @ core.js:26292
onInvokeTask @ core.js:26250
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:3070
processImmediate @ internal/timers.js:439
Show 3 more frames

zone.js:391 TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at Xa.init (ckeditor.js:5)
    at Xa.<anonymous> (ckeditor.js:5)
    at Xa.fire (ckeditor.js:5)
    at Xa.<computed> [as init] (ckeditor.js:5)
    at ckeditor.js:5
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Object.onInvoke (core.js:26256)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)

Однако, если я просто назначу CKEDITOR.ClassicEditor без вызова create в приведенном выше коде, он будет работать нормально, редактор загружается и работает нормально.

public CEditor = CKEDITOR.ClassicEditor;

Что я здесь делаю не так? Любая помощь приветствуется.


ИЗМЕНИТЬ

Пройдя через документы, я обнаружил свою ошибку. С изменениями ниже я смог заставить его работать.

import { Component, OnInit } from '@angular/core';
import CKEDITOR from '@ckeditor/ckeditor5-build-classic';

@Component({
    templateUrl: './cke5.html',
    styleUrls: ['./cke5.scss'],
    selector: 'app-cke5'
})
export class CKE5  {
    public CEditor = CKEDITOR.ClassicEditor;
    loader: any;

    public editorConfig = {
        extraPlugins: [  ]
    };

    constructor() {
    }

    public onReady( editor ) {

        editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
            // Configure the URL to the upload script in your back-end here!
            return this.imageUploadAdapter(loader);
        };
    }

    imageUploadAdapter(loader: any) {
        this.loader = loader;

        const uploadInterface = {
            upload: () => { return this.uploadImage(this); },
            abort: () => { return this.abortImageUpload(this); }
        };

        return uploadInterface;
    }

    uploadImage(that: any) {
        return that.loader.file
            .then( file => new Promise( ( resolve, reject ) => {
                console.log('UPloading..');
            } ) );
    }

    abortImageUpload(that: any) {
        console.log('Abort image upload.')
    }
}

И в шаблоне:

<ckeditor [editor]="CEditor" (ready)="onReady($event)" [config]="editorConfig" data="<p>Hello, world!</p>"></ckeditor>

person Harshveer Singh    schedule 27.12.2019    source источник


Ответы (1)


Некоторые плагины конфликтуют с другими, в моем случае плагин Pagination вызывает эту проблему, поэтому я удалил этот. Вы можете легко понять, выполните этот шаг, удалите один плагин из ck build + создайте код ck и протестируйте его.

прочтите эту статью для получения дополнительной информации. https://github.com/ckeditor/ckeditor5-angular/issues/146

person Shahid Islam    schedule 12.06.2021