通用
一个适应性强的生态系统，能够处理端到端的文档编辑、与第三方工具的互操作性、文档管理和协作。
简单设置
这是一个使用 Angular 富文本编辑器的快速示例
CKEditor 5 的组件，使用 Angular CLI！
1
创建一个项目
使用 Angular CLI 创建一个项目，并将
工作目录更改为新创建的项目。
npx @angular/cli new ckeditor5-angular && cd ckeditor5-angular2
安装软件包
安装 Angular 文本编辑器组件和所选编辑器类型的依赖项
根据您的首选编辑体验。 在这种情况下，我们使用经典的。
npm install ckeditor5 @ckeditor/ckeditor5-angular3
添加一个组件
用负责导入和初始化编辑器的代码替换 src/app/app.component.ts 的内容。
import { Component } from '@angular/core';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
import {
ClassicEditor,
Bold,
Essentials,
Heading,
Indent,
IndentBlock,
Italic,
Link,
List,
MediaEmbed,
Paragraph,
Table,
Undo
} from 'ckeditor5';
import 'ckeditor5/ckeditor5.css';
@Component( {
selector: 'app-root',
templateUrl: './app.component.html',
imports: [ CKEditorModule ],
standalone: true
} )
export class AppComponent {
title = 'angular';
public Editor = ClassicEditor;
public config = {
toolbar: [
'undo', 'redo', '|',
'heading', '|', 'bold', 'italic', '|',
'link', 'insertTable', 'mediaEmbed', '|',
'bulletedList', 'numberedList', 'indent', 'outdent'
],
plugins: [
Bold,
Essentials,
Heading,
Indent,
IndentBlock,
Italic,
Link,
List,
MediaEmbed,
Paragraph,
Table,
Undo
]
}
}
4
添加模板
用负责控制编辑器的代码替换 src/app/app.component.html 的内容。
<ckeditor [editor]="Editor" [config]="config" data="<h1>Hello from CKEditor 5!</h1>"></ckeditor>
5
完成！
通过执行以下命令运行应用程序
在项目的目录中。
npm run start