CKEditor 5 抛出 Cannot read 属性 'create' of undefined in Angular6 project

Question

我是 angular6 的新手。我已经使用 JHipster 创建了一个项目，并尝试使用 CKEditor 5 创建一个 WYSIWYG 富文本编辑器。我已经通过使用以下 link 创建一个编辑器来完成以下步骤。

npm install --save-dev @ckeditor/ckeditor5-angular
npm install --save-dev @ckeditor/ckeditor5-build-classic
导入@ckeditor/ckeditor5-angular 并在我的 module.js
导入了@ckeditor/ckeditor5-build-classic并创建了一个变量public编辑器：ClassicEditor；在我的组件中
在 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 的问题还是我错过了任何步骤？

任何 help/directions 解决此问题的人将不胜感激！

Answer 1

您在link下有以下代码：

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

虽然您实际上应该将 ClassicEditor 设置为 Editor 属性，但您只设置了它的类型（这实际上也是错误的，因为编辑器可以设置类型 typeof ClassicEditor).

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

导入不正确时也会抛出此错误 - 根据 TypeScript 配置，导入应类似于 import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic'; 或 import ClassicEditor from '@ckeditor/ckeditor5-build-classic';.

Answer 2

如果你有这个问题，即使你有这个：

public Editor = BalloonEditor;

检查您的模板中是否有任何对 ckeditor 组件的调用

例如：

<ckeditor formControlName="contenido"></ckeditor>

如果你不设置[editor]="Editor"它会产生同样的错误。

Answer 3

使用以下代码

创建了文件src/app/typings.d.ts

declare module '@ckeditor/ckeditor5-build-classic' { // or other CKEditor 5 build.
const ClassicEditorBuild: any;

export = ClassicEditorBuild;}

在您的 主应用模块 中，导入 CKEditorModule 如下：

import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
@NgModule({imports: [CKEditorModule]})

现在，将导入添加到出现该问题的组件中 x.component.ts

import * as ClassicEditorBuild from '@ckeditor/ckeditor5-build-classic';

export class x implements OnInit { public Editor = ClassicEditorBuild;constructor() { }  ngOnInit(): void {}}

最后，在您的 x.component.html

中添加以下代码

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

CKEditor 5 抛出 Cannot read 属性 'create' of undefined in Angular6 project

CKEditor 5 throws Cannot read property 'create' of undefined in Angular6 project

angular6

ckeditor5