angular6 - CKEditor 5 抛出无法读取 Angular6 项目中未定义的属性 'create'

Question

我已经使用 JHipster 创建了一个项目，并尝试使用 CKEditor 5 创建一个所见即所得的富文本编辑器。我已经使用以下 link 完成了以下步骤。创建一个编辑器。

1. npm install --save-dev @ckeditor/ckeditor5-angular

2. npm install --save-dev @ckeditor/ckeditor5-build-classic

3. 导入了 @ckeditor/ckeditor5-angular 并添加到我的 module.js 中的导入中

4. 导入@ckeditor/ckeditor5-build-classic并创建变量public Editor:ClassicEditor；在我的组件中

5. 在 html 中使用了以下代码

Blockquote

<ckeditor [editor]="Editor" data="<p>Hello world!</p>"></ckeditor> 

当我转到我添加的页面时，会抛出以下错误，这是我从浏览器开发人员工具控制台得到的。

ERROR TypeError: Cannot read property 'create' of undefined
    at CKEditorComponent.createEditor (ckeditor-ckeditor5-angular.js?076d:187)
    at eval (ckeditor-ckeditor5-angular.js?076d:96)
    at ZoneDelegate.invoke (zone.js?d135:388)
    at Zone.run (zone.js?d135:138)
    at NgZone.runOutsideAngular (core.js?09c9:3784)
    at CKEditorComponent.ngAfterViewInit (ckeditor-ckeditor5-angular.js?076d:95)
    at callProviderLifecycles (core.js?09c9:9568)
    at callElementProvidersLifecycles (core.js?09c9:9542)
    at callLifecycleHooksChildrenFirst (core.js?09c9:9532)
    at checkAndUpdateView (core.js?09c9:10468)

我只是想知道这是 CKEditor 5 的问题还是我错过了任何步骤？

Answer 1

链接下有以下代码:

export class ArticleUpdateComponent implements OnInit {
    public Editor: ClassicEditor;
    // ...
}

虽然您实际上应该将 ClassicEditor 设置为 Editor 属性，但您只设置它的类型(这实际上也是错误的，因为编辑器可以具有类型 类型经典编辑器)。

您应该做的是简单的属性分配public Editor = ClassicEditor;，这将使ClassicEditor在Editor下的模板中可用属性。

当导入不正确时，也可能引发此错误 - 根据 TypeScript 配置，导入应类似于 import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic'; 或 从'@ckeditor/ckeditor5-build-classic'导入ClassicEditor;。