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>


版权声明:著作权归作者所有。