CKEditor 5抛出无法读取Angular6项目中未定义的属性“创建”

Question

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

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中使用以下代码

块引用

<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

使用以下代码创建了一个文件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>

Answer 2

链接下有以下代码：

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

尽管您实际上应该将设置ClassicEditor为Editor属性，但是您只需设置其类型（实际上也是错误的，因为编辑器可以具有type typeof ClassicEditor）。

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