Angluar 11集成CkEditor 5

CkEditor 5提供了5种即用型的编辑器，分别是

Classic editor
Inline editor
Balloon editor
Balloon block editor
Document editor

版本说明

CkeEditor 5也提供可Angular的Component，npm包是ckeditor5-angular，分为两个主版本：

版本 1.x.x ：适用于 Angular 5-8。Angular官方对这些版本已不再提供支持，所以CkEditor 5也不在对1.x.x进行维护。
版本 2.x.x ：适用于 Angular 9.1+。

选择ckeditor5-angular 2.x.x的版本最好是依赖于相同的Angular主版本，此处是Angular11，而v2.0.2开始支持Angular11，示例版本为：

ckeditor5-angular：v2.0.2
angular：11.2.14

安装ckeditor5-angular

安装最新的ckeditor5-angular

npm install --save @ckeditor/ckeditor5-angular

安装指定版本的ckeditor5-angular

npm install --save @ckeditor/ckeditor5-angular@2.0.2

安装ckeditor5 build

安装完ckeditor5-angular组件后，选择一个ckeditor5的build，可以是ckeditor5官方提供的editor build，也可以是自定义的build，这里以官方@ckeditor/ckeditor5-build-classic为示例。

npm install --save @ckeditor/ckeditor5-build-classic

导入CKEditorModule

导入CKEditorModule到所使用编辑器组件的模块中：

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

使用editor组件

导入CKEditorModule后，我们就可以使用editor组件了，这里是ClassicEditor。

在使用编辑器的Angular组件中导入ClassicEditor：

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
@Component( {
    // ...
} )
export class MyComponent {
    Editor = ClassicEditor;
    // ...
}

注意：Editor不能设定为私有，需要被Angular模板能访问到。

在模板中使用ckeditor：

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

秒客网