在前端开发中，使用富文本编辑器是一项非常常见的需求，而 CKEditor 是一款非常受欢迎的富文本编辑器。在本教程中，我们将介绍如何使用 npm 包 angular-ckeditor-legacy 这个 Angular 组件来集成 CKEditor 富文本编辑器。
安装
使用以下命令来安装 angular-ckeditor-legacy：
npm install angular-ckeditor-legacy --save
注意：由于 CKEditor 渲染过程的限制，必须将此依赖包添加到 scripts 标签中，而不是添加到 Angular CLI 的 angular.json 中。
集成
在 AppModule 中声明 CKEditor 模块：
-- -------------------- ---- ------- ------ - -------------- - ---- -------------------------- ----------- -------- - -- --- --------------- -- --- - --在模板中使用 CKEditor 组件：
<ckeditor [(ngModel)]="model" name="editor"></ckeditor>
其中，[(ngModel)]="model" 表示将编辑器中的内容双向绑定到组件中的 model 变量上，name="editor" 设置了编辑器的名称为 editor。
配置
我们可以在应用中的任何组件中使用CKEDITOR全局变量，在这里可以自定义配置:
-- -------------------- ---- -------
------- ----- --------- ----
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
---------- -
--------------------------- - -------------
-
-这里的示例中，我们在 AppComponent 中自定义了 CKEditor 的格式化标签，指定了 p、h1、h2、h3 标签。
示例代码
可以通过以下示例代码了解 angular-ckeditor-legacy 如何在 Angular 应用中使用：
<!-- app.component.html --> <textarea [(ngModel)]="model" name="editor"></textarea> <ckeditor [(ngModel)]="model" name="editor"></ckeditor>
-- -------------------- ---- -------
-- ----------------
------ - --------- - ---- ----------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
----- - --------- ---------------
-结语
本教程介绍了如何使用 npm 包 angular-ckeditor-legacy 来在 Angular 应用中集成 CKEditor 富文本编辑器，并且讲解了如何自定义配置，希望对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067359890c4f7277583e21