简介
woofmark 是一个能够将 Markdown 格式文本转换成 HTML 的 JavaScript 库。它支持实时预览、自定义工具栏以及代码高亮等特性，是一个非常实用的前端开发工具。
本文将详细讲解 woofmark 的使用方法，并提供示例代码帮助读者更好地理解。
安装
woofmark 可以通过 npm 来安装：
npm install woofmark
然后在项目中引入：
import woofmark from 'woofmark';
使用
基础使用
woofmark 的基本用法非常简单，只需要在页面中添加一个 textarea 元素，然后调用 woofmark() 方法即可：
<textarea id="myTextarea"></textarea>
<script>
woofmark('#myTextarea');
</script>这样一来，当用户在 textarea 中输入 Markdown 文本时，会实时地将它渲染成 HTML 并显示出来。
配置选项
woofmark 还提供了一些配置选项，可以用来控制其外观和行为。以下是一些常用的选项：
element: 指定要把 Markdown 转换成 HTML 的元素，默认为div。previewClass: 指定用于预览区域的 CSS 类名，默认为woofmark-preview。toolbar: 指定工具栏的配置。可以是一个数组或一个函数，数组中的每个元素表示一个工具按钮，函数返回一个数组。syntaxHighlight: 指定是否对代码进行语法高亮，默认为 false。
以下是一个示例：
-- -------------------- ---- -------
--------- ---------------------------
---- -------------------------------
--------
--- ------- - -
------ ------- ------ --------
------ --------- ------ ----------
------ ---------------- ------ -----------------
------ ---------- ------ -----------
------ -------- ------ ---------
------ ------- ------ --------
------ ----------------- ------ ---------- -------
------ --------------- ------ -------- -------
------ ------- ------ -------
--
----------------------- -
-------- ----------
------------- -------------------
-------- --------
---------------- ----
---
---------自定义工具栏
woofmark 还支持自定义工具栏，你可以根据需要添加、删除或修改工具按钮。下面是一个示例，其中添加了一个名为 image 的工具按钮：
-- -------------------- ---- -------
--------- ---------------------------
---- -------------------------------
--------
--- ------- - ---------- -
------ -
- ----- ------- ------ ------ --
- ----- --------- ------ -------- --
- ----- ---------------- ------ --------------- --
- ----- ---------- ------ --------- --
- ----- -------- ------ ------- --
- ----- ------- ------ ------ --
- ----- ----------------- ------ ---------- ----- --
- ----- --------------- ------ -------- ----- --
- ----- ------- ------ ------ --
-
----- --------
------ --------
-------- ---------------- -
-- ---------
-
-
--
--
----------------------- -
-------- ----------
------------- -------------------
-------- --------
---------------- ----
---
---------事件监听
woofmark 还支持一些事件，可以用来监听编辑器的变化。以下是一些常用的事件：
change: 当编辑器内容发生变化时触发。focus: 当编辑
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34756