CKEDITOR5 - Angular8：TypeError：this.editor.create 不是函数
Posted
技术标签:
【中文标题】CKEDITOR5 - Angular8：TypeError：this.editor.create 不是函数【英文标题】：CKEDITOR5 - Angular8 : TypeError: this.editor.create is not a function 【发布时间】：2020-04-17 07:33:28 【问题描述】：我正在尝试将 CKEDITOR 5 集成到我的 Angular 8 项目中。我已经使用其他插件以及 ClassicEditor 和 InlineEditor 创建了自定义超级构建（使用本指南：https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html#creating-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>
【问题讨论】：
【参考方案1】：一些插件与其他插件冲突，在我的情况下，分页插件导致了这个问题，所以我删除了这个， 您可以很容易地弄清楚，按照这些步骤，从 ck build 中删除一个插件 + 构建 ck 代码并对其进行测试。
阅读本文了解更多信息 https://github.com/ckeditor/ckeditor5-angular/issues/146
【讨论】：
以上是关于CKEDITOR5 - Angular8：TypeError：this.editor.create 不是函数的主要内容，如果未能解决你的问题，请参考以下文章