CKEDITOR5 - Angular8：TypeError：this.editor.create 不是函数

Question

我正在尝试将 CKEDITOR 5 集成到我的 Angular 8 项目中。我已经使用其他插件以及 ClassicEditor 和 InlineEditor 创建了自定义超级构建（使用本指南：https ://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html#creating-super-建立）。

我已经导入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;

我在这里做错了什么？任何帮助是appriciated。

---

编辑

通过文档后，我发现了我的错误。通过以下更改，我能够使其正常工作。

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>

Answer 1

有些插件与其他插件冲突，在我的例子中，分页插件导致了这个问题，所以我删除了这个，你可以很容易地弄清楚，按照以下步骤，从 ck build 中删除一个插件 + 构建 ck 代码并测试它。

阅读本文以获取更多信息 https://github.com/ckeditor/ckeditor5-angular/issues/146