CKEditor 5由现成的编辑器构建和构建所基于的CKEditor 5 Framework组成。
目前，Angular的CKEditor 5组件仅支持通过构建集成CKEditor 5。 由于缺乏在angular-cli中调整webpack配置的能力，因此无法集成从源构建的CKEditor 5。
虽然目前还没有支持从源代码集成CKEditor 5，但您仍然可以创建CKEditor 5的自定义构建并将其包含在Angular应用程序中。
快速开始
在现有的Angular项目中，为Angular 2 安装CKEditor 5 WYSIWYG编辑器组件：
npm install --save @ckeditor/ckeditor5-angular
安装一个官方编辑器版本或创建一个自定义编辑器（例如，如果您要安装更多插件或自定义无法通过编辑器配置控制的内容）。
假设你选择了@ckeditor/ckeditor5-build-classic：
npm install --save @ckeditor/ckeditor5-build-classic
现在，将CKEditorModule添加到您的应用程序模块导入：
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
@NgModule( {
imports: [
...
CKEditorModule,
...
],
...
} )
在Angular组件中导入编辑器构建并将其分配给public属性，以便在模板中可以访问它：
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
@Component( {
...
} )
export class MyComponent {
public Editor = ClassicEditor;
...
}
最后，使用模板中的<ckeditor>标记运行富文本编辑器：
<ckeditor [editor]="Editor" data="<p>Hello, world!</p>"></ckeditor>
重建你的应用程序，CKEditor 5应该用“Hello，world！”来迎接你。
注意：使用文档编辑器构建
如果要使用文档编辑器构建，则需要手动将工具栏添加到DOM。
import * as DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
@Component( {
...
} )
export class MyComponent {
public Editor = DecoupledEditor;
public onReady( editor ) {
editor.ui.view.editable.element.parentElement.insertBefore(
editor.ui.view.toolbar.element,
editor.ui.view.editable.element
);
}
}
然后，在模板中：
<ckeditor [editor]="Editor" data="<p>Hello, world!</p>" (ready)="onReady($event)"></ckeditor>
与 ngModel整合
该组件实现ControlValueAccessor接口并与ngModel一起使用。 以下是如何使用它：
@Component( {...} )export classMyComponent {publicmodel = {editorData: '<p>Hello, world!</p>'};...}<ckeditor [(ngModel)]="model.editorData" [editor]="Editor"></ckeditor>
支持的@Input属性
Angular 2 的CKEditor 5组件支持以下@Input属性：
editor (required)
Editor提供静态create()方法来创建编辑器的实例：
<ckeditor [editor]="Editor"></ckeditor>
config
编辑器的配置：
<ckeditor [config]="{ toolbar: [ 'heading', '|', 'bold', 'italic' ] }" ...></ckeditor>
data
编辑器的初始数据。 它可以是静态值：
<ckeditor data="<p>Hello, world!</p>" ...></ckeditor>
或共享父组件的属性
@Component( {
...
} )
export class MyComponent {
public editorData = '<p>Hello, world!</p>';
...
}
<ckeditor [data]="editorData" ...></ckeditor>
tagName
指定将在其上创建编辑器的HTML元素的标记名称。
默认的标签是 <div>.
<ckeditor tagName="textarea" ...></ckeditor>
disabled
控制编辑器的只读状态：
@Component( {
...
} )
export class MyComponent {
public isDisabled = false;
...
toggleDisabled() {
this.isDisabled = !this.isDisabled
}
}
<ckeditor [disabled]="isDisabled" ...></ckeditor>
<button (click)="toggleDisabled()">
{{ isDisabled ? 'Enable editor' : 'Disable editor' }}
</button>
支持的@Output属性
Angular 2 的CKEditor 5组件支持以下@Output属性：
ready
编辑器准备就绪时触发。 它与编辑器#ready事件相对应。 与编辑器实例一起解雇。
change
编辑器的内容发生变化时触发。 它对应于editor.model.document#change:data事件。
使用包含编辑器和CKEditor 5的对象change:data事件对象。
<ckeditor [editor]="Editor" (change)="onChange($event)"></ckeditor>
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { ChangeEvent } from '@ckeditor/ckeditor5-angular/ckeditor.component';
@Component( {
...
} )
export class MyComponent {
public Editor = ClassicEditor;
public onChange( { editor }: ChangeEvent ) {
const data = editor.getData();
console.log( data );
}
...
}
blur
编辑器的编辑视图模糊时触发。 它对应于editor.editing.view.document#blur事件。
与包含编辑器和CKEditor 5失去焦点事件数据的对象一起使用。
focus
聚焦编辑器的编辑视图时触发。 它与editor.editing.view.document#focus事件相对应。
与包含编辑器和CKEditor 5focus事件数据的对象一起使用。
样式
Angular的CKEditor 5组件可以使用组件样式表或使用全局样式表进行样式设置。 让我们看看如何使用这两种方法设置CKEditor 5组件的高度。
通过组件样式表设置高度
首先，在父组件的目录中创建一个(S)CSS文件，并为给定编辑器的部分设置样式，前面是:host和::ng-deep伪选择器。
/* src/app/app.component.css */
:host ::ng-deep .ck-editor__editable {
min-height: 500px;
}
然后在父组件中添加上述样式表的相对路径。
/* src/app/app.component.ts */
@Component( {
// ...
styleUrls: [ './app.component.css' ]
} )
通过全局样式表设置高度
要使用全局样式表设置组件样式，首先要创建它：
/* src/styles.css */
.ck-editor__editable {
min-height: 500px;
}
然后，将其添加到angular.json配置文件中。
"architect": {
"build": {
"options": {
"styles": [
{ "input": "src/styles.css" }
]
}
}
}
本土化
CKEditor 5可以分两步进行本地化。
1. 加载翻译文件
首先，您需要将转换文件添加到捆绑包中。 这一步可以通过两种方式实现：
import'@ckeditor/ckeditor5-build-classic/build/translations/de';import*asClassicEditorfrom'@ckeditor/ckeditor5-build-classic';..."architect": {"build": {"options": {"scripts": [ "node_modules/@ckeditor/ckeditor5-build-classic/build/translations/de.js" ]}}}
2. 配置语言
然后，您需要配置编辑器以使用给定的语言：
@Component( {
...
} )
export class MyComponent {
public Editor = ClassicEditor;
public config = {
language: 'de'
};
}
有关高级用法，请参阅设置UI语言指南。
贡献和报告问题
Angular 2 的富文本编辑器组件的源代码可以在GitHub上的https://github.com/ckeditor/ckeditor5-angular中找到。
文章作者ianzhi,原文地址：https://cloud.tencent.com/developer/article/1476868
文章版权归作者所有，转载请保留此声明。
