发布于 1个月前

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>
©2020 edoou.com   京ICP备16001874号-3