前言
如果你是一个 Web 开发人员，那么你一定会使用 Markdown 来写一些文档记录和笔记。而 Markdown 的编辑器和工具也是很多的，比如我们平时会用到的 Typora 和 VSCode 编辑器，在他们中内置许多的 Markdown 工具，让我们的工作变得更加容易高效。
但是，如果你的网站需要自己的 Markdown 编辑器呢？这时候我们就要用到一个叫做 markdown-toolbar 的 npm 包了。
在本文中，我将会详细讲解如何使用该 npm 包来编写你自己的 Markdown 编辑器。
markdown-toolbar 的功能
markdown-toolbar 可以帮助我们在网站中快速构建出一个带有 Markdown 编辑器的工具栏，可以通过点击工具栏上的按钮，在文本框中插入各种基本的 Markdown 语法，例如：
- Bold:
**text** - Italic:
*text* - <del>Strikethrough</del>:
~~text~~ - Hyperlink:
[text](url) - Quote:
> text - Code: `code` or ```code```
- List:
* item
markdown-toolbar 的使用
安装
在终端中，我们可以使用 npm 命令来安装 markdown-toolbar：
npm install --save markdown-toolbar
导入
安装完成后，我们需要在你的代码文件中导入 markdown-toolbar 包：
import markdownToolbar from "markdown-toolbar";
创建 Markdown 编辑器
我们需要在 HTML 文件中增加一个文本框元素，然后指定它的 id，例如：
<textarea id="markdown-editor"></textarea>
然后，在 JavaScript 中，我们使用 markdown-toolbar 的 create 方法来创建一个 Markdown 编辑器：
const editor = markdownToolbar.create({
element: document.getElementById("markdown-editor"),
debug: false,
icons: ["bold", "italic", "strike", "link", "quote", "code", "list"]
});其中，element 参数是一个表示当前编辑器绑定到哪个元素的 DOM 对象；debug 参数用于启动调试模式，而icons 参数指定了需要显示哪些工具栏按钮，这里我们指定了所有的按钮。
获取当前编辑器的 Markdown 文本
在使用 markdown-toolbar 编辑器的时候，我们可以使用其 getContent 方法来获取当前编辑器内的 Markdown 文本：
const markdown = editor.getContent();
示例代码
下面是一个使用 markdown-toolbar 创建的 Markdown 编辑器的完整示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- -----------------
-------------------------------
------- --------------
------ --------------- ---- -------------------
------------- - -------- -- -
----- ------ - ------------------------
-------- -------------------------------------------
------ ------
------ -------- --------- --------- ------- -------- ------- --------
---
----- --- - ------------------------------------------------
----------------------------- -------- -- -
----- -------- - --------------------
----- ------------ - -----------------------------------------
---------------------- - ---------
---
--
---------
-------
------
-----
--------- --------------------------------
------
-----
------- ------------------------------ -----------------
------
-----
--------- ------------------ --------------------
------
-------
-------总结
在本篇文章中，我们详细讲解了如何使用 markdown-toolbar 来创建自己的 Markdown 编辑器。在生产环境下，你只需要修改 icons 参数来指定你需要的工具栏按钮即可方便快捷地创建你自己的 Markdown 编辑器。
当然，markdown-toolbar 还支持许多其他的配置和自定义功能，如果你有兴趣，可以到官方文档中深入阅读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5f51ab1864dac671eb