#npm 包 ng-tinymce 使用教程
在前端开发中，富文本编辑器扮演着非常重要的角色。Tinymce 是一种非常流行的富文本编辑器，而 ng-tinymce 是一个 Angular 模块，用于在 Angular 应用程序中快速集成 Tinymce。
安装 ng-tinymce
安装 ng-tinymce 之前首先要安装 Node.js，并在命令行中运行如下命令：
npm install ng-tinymce --save
导入 TinyMCE 模块
为了在你的应用程序中使用 ng-tinymce，你必须先导入 TinyMCE 模块。在你的 app.module.ts 文件中导入 TinyMCE 模块如下所示：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------- - ---- -------------
---
-----------
------------- -
---
--
-------- -
--------------
----------------------- -------- ------------------ ---
---
--
---------- ---
---------- --------------
--
------ ----- --------- - -你需要指定 TinyMCE 组件的基础 URL。这个 URL 是你的应用将 TinyMCE 打包后在服务器上的根路径。
在 HTML 模板中使用
在 HTML 模板中使用 ng-tinymce 是非常简单的。只需要在模板中添加 ng-tinymce 标签，并指定需要编辑的文本域，如下所示：
<ng-tinymce [formControl]="myFormControl" [config]="config"></ng-tinymce>
这里的 myFormControl 是你的 Angular 表单控制器。你需要将其传递给 ng-tinymce。
你还需要指定 Tinymce 的配置项。一个简单的配置示例如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- ------------ ---------- - ---- -----------------
------------
--------- -----------
--------- ------------ ----------------------------- ---------------------------------
---------- -----------------------
--
------ ----- ------------ -
-------------- ------------
------ - -
------- ----
------ ---------
-------- ------ ------
-------- ----- ---- - ---- ------ - --------- ----------- ---------- - ------
---------------------- ----------------
--
------------------- --- ------------ -
-----------------
-
----------- -
------------------ - ----------------
---------- -------------
-------------------
--
-
---------------- ---- -
------ ----------------------------------
-
-这里的重点是 tinyMCE 的配置项。你可以在 Tinymce 配置页面上找到所有可用的配置项。这里只列出了一些常用的选项。
总结
ng-tinymce 是一个快速集成 Tinymce 的 Angular 模块。使用它，你可以非常容易地将 Tinymce 富文本编辑器集成到你的应用程序中，同时还可以轻松控制编辑器的配置和表单验证。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005538a81e8991b448d0b9d