在前端开发中，我们经常会用到所谓的 WYSIWYG（所见即所得）编辑器，以方便用户直接在页面上编辑内容。而 mini-wysiwyg 就是一个小巧、易用的 WYSIWYG 编辑器，它可以方便地集成到我们的项目中。
什么是 mini-wysiwyg？
mini-wysiwyg 是一个基于 jQuery 的简单 WYSIWYG 编辑器，它具有以下特点：
- 轻量级：只有约 1KB 的压缩文件大小；
- 易用性：提供简单而常用的富文本编辑功能；
- 自定义性：可以通过配置和扩展，添加更多的功能。
如何使用 mini-wysiwyg？
使用 mini-wysiwyg 很简单，我们只需要在项目中安装该 npm 包：
npm install mini-wysiwyg
然后在 HTML 中引入相关的 CSS 和 JS 文件：
<link rel="stylesheet" href="node_modules/mini-wysiwyg/dist/mini-wysiwyg.min.css"> <script src="node_modules/mini-wysiwyg/dist/mini-wysiwyg.min.js"></script>
最后，我们可以在 JS 中使用以下代码来启用 mini-wysiwyg：
$(function() {
$("#editor").minifieditor();
});其中，#editor 是我们要启用 mini-wysiwyg 的文本框的 ID。
mini-wysiwyg 还提供了一些配置项，我们可以根据需要来进行配置。例如，以下代码可以禁用某些按钮：
$(function() {
$("#editor").minifieditor({
buttons: ["bold", "italic", "underline"],
controller: {},
height: 300
});
});buttons 指定了要启用的按钮，这里只启用了“加粗”、“斜体”和“下划线”三个按钮；controller 是一个空对象，用于扩展新的按钮；height 指定了编辑器的高度。
总的来说，使用 mini-wysiwyg 很方便，我们只需要进行简单的配置，就可以轻松地实现所见即所得的富文本编辑功能。
示例代码
为了更好地说明如何使用 mini-wysiwyg，下面是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------- ------------
----- ---------------- -----------------------------------------------------------
-------
------
-----
--------- -----------------------
------
------- ---------------------------------------------------------------------------------
------- ------------------------------------------------------------------
--------
------------ -
---------------------------
-------- -------- --------- -------------
----------- ---
------- ---
---
---
---------
-------
-------在上面的示例代码中，我们在 head 标签中引入 mini-wysiwyg 的 CSS 文件，然后在 body 中定义了一个 textarea，并给它设置了 ID 为 editor。在 body 最后，我们引入了 jQuery 库和 mini-wysiwyg 的 JS 文件，并在其后使用了启用 mini-wysiwyg 的代码。
结语
本文介绍了 mini-wysiwyg npm 包的使用教程，通过本文的学习，你将掌握如何轻松地在前端项目中使用所见即所得的富文本编辑器。当然，除了 mini-wysiwyg，还有很多其他的前端开源项目值得我们学习和使用。希望本文能够帮助你更好地了解前端技术，并给你带来实际指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f491d8e776d080411e1