随着前端技术的不断发展，我们越来越依赖于使用 npm 包管理器来协助我们完成开发工作。在前端开发中，有一个非常实用的富文本编辑器叫做 summernote，而本文将介绍如何使用 summernote-bootstrap4 包来快速集成 summernote 到我们的项目中。
什么是 summernote？
summernote 是一个基于 jQuery 的富文本编辑器，支持图片上传，超链接、表格，引用等常用功能。由于其易用性，支持性以及在线 Demo 的演示效果，summernote 在前端界颇受欢迎。我们可以通过以下命令来安装 summernote：
npm install summernote
为什么要使用 summernote-bootstrap4 ？
虽然 summernote 是一个非常优秀的富文本编辑器，但是默认的样式则需要自己进行美化。为了方便我们快速集成 summernote 到我们的项目中，以及使其在视觉上更符合 Bootstrap 4 的风格，我们可以使用 summernote-bootstrap4 包。它集成了 summernote 和 Bootstrap 4，只需简单的安装和配置即可达到我们需要的效果。
npm install summernote-bootstrap4
如何使用 summernote-bootstrap4 ?
引入必要的文件
使用 summernote-bootstrap4，需要在 HTML 文件中包含必需的文件。在 head 标签中引入 CSS：
<link rel="stylesheet" href="path/to/bootstrap.css"> <link rel="stylesheet" href="path/to/summernote-bs4.css">
在 body 标签中引入 JS：
<script src="path/to/jquery.js"></script> <script src="path/to/bootstrap.js"></script> <script src="path/to/summernote-bs4.js"></script>
初始化 summernote
在 HTML 中添加一个文本域，并通过 jQuery 初始化 summernote：
<textarea id="summernote"></textarea>
$(document).ready(function() {
$('#summernote').summernote();
});定制 summernote
在初始化 summernote 后，能够通过对象参数对 summernote 进行定制。实例如下：
-- -------------------- ---- -------
---------------------------- -
-----------------------------
------- ---- -- -----------
-------- -
--------- -----------
-------- -------- --------- ------------ ----------
------------ --------------
--------- -----------
-------- ------ ----- --------------
--------- -----------
---------- -------- ---------- ----------
-------- -------------- -------------
- -- ------------
---
---获取 summernote 的值
我们可以通过以下的代码获取 summernote 中的内容：
var content = $('#summernote').summernote('code');结论
本文介绍了 npm 包 summernote-bootstrap4 的基本使用方法，包括引入必要的文件、初始化 summernote 以及对 summernote 进行设置等。希望这篇文章对你在将 summernote 集成到项目中时能发挥帮助，也希望你能通过实践感受到 npm 包管理器的好处。如果你还没有使用 npm 包管理器的经验，我推荐你在下一次项目开发中试试来体验其带来的便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e181e8991b448d76e1