ng2-summernote-angular4 是一个基于Angular4和Summernote的富文本编辑器组件，允许你在你的 Angular4 应用程序中使用Summernote编辑器，并将编辑器的内容绑定到您的组件数据。本文旨在为大家介绍如何使用这个npm包对Angular4应用程序中的富文本编辑器进行配置和使用。
安装ng2-summernote-angular4
首先，你需要在你的 Angular4 项目中安装 ng2-summernote-angular4 npm 包，你可以使用以下命令：
npm install ng2-summernote-angular4 --save
配置ng2-summernote-angular4
在安装完 ng2-summernote-angular4 后，你需要将它导入到您的 AppModule 中。在 Import 中添加以下代码：
-- -------------------- ---- -------
------ - ---------------- - ---- --------------------------
-----------
---
-------- -
---
--------------------------
---
--
---
--
------ ----- --------- - -创建富文本编辑器
在你要使用富文本编辑器的组件中，将以下代码添加到该组件的模板文件中：
<summernote [(ngModel)]="content"></summernote>
注意，ngModel 是一个 Angular 用法, 它负责对组件数据进行双向绑定。 在上面的示例中，ngModel绑定到一个名为 content 的组件属性。或者你可以使用FormControl 例如：
<summernote formControlName="content"></summernote>
在上面的示例中，ngModel绑定到一个名为 content 的表单控制器。
使用所有配置选项
富文本编辑器提供了许多可配置选项，你可以使用它来自定义你的编辑器。 例如，你可以使用以下代码来配置富文本编辑器：
<summernote [height]="400" [options]="{ placeholder: '编辑器内容', disableDragAndDrop: false }"></summernote>在上面的示例中：
- height - 编辑器的高度，默认值为 200.
- options - Summernote 的配置选项，包括 placeholder 和 disableDragAndDrop.
使用自定义按钮
ng2-summernote-angular4 允许你添加自定义按钮并使用插件来自定义你的编辑器。你可以使用之前在您的项目中安装的插件，或者你可以自己编写插件。如下所示，我们将添加自定义的代码高亮按钮：
<summernote [height]="400" [options]="{ toolbar: [['style', ['style', 'highlight']], ['font', ['bold', 'italic', 'underline', 'clear']]] }"></summernote>在上面的示例中：
- toolbar - 编辑器的工具栏, 它是一个包含其他数组的数组，每个数组代表工具栏按钮组.
示例代码
完整的组件示例代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
----------- -------------- --------------------- ------------ -------- ---------- --------- -------------- -------- -------- --------- ------------ ---------- ----------------
------- ------------------------------------
-
--
------ ----- ------------ -
-------- -------
-------------- -
--------------------------
-
-在上面的示例中，在编辑器的下方我们添加了一个按钮，点击它将会将编辑器中的内容打印到控制台上。
总结
通过上述的步骤，你可以将 ng2-summernote-angular4 富文本编辑器组件添加到你的 Angular4 应用程序中。您还可以使用自定义按钮和其它配置，来满足您的特定要求。我们希望这篇文章能够帮助你学习在 Angular4 应用程序中如何集成 ng2-summernote-angular4 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557cf81e8991b448d4d93