在网页设计中，很多时候我们会需要添加分割线来分隔不同段落的内容。这时候，通常情况下我们需要手动添加 HTML 代码，比较麻烦，也容易出错。而这里介绍的 npm 包 medium-editor-autohr，可以使我们在 Medium Editor 编辑器中自动添加分割线，对于我们前端开发者来说非常实用。本文将详细介绍如何使用此 npm 包，让你知道如何更加方便快捷地添加分割线。
安装
首先，在使用 medium-editor-autohr 之前，我们需要先安装 Medium Editor ，中文翻译为“常规编辑器”，是一个能够轻松创建富文本编辑器的 JavaScript 库，无论是在普通网站，还是在 AngularJS 、React 或 Backbone 等框架中都可以很方便的使用。
npm install medium-editor --save
然后可以安装 medium-editor-autohr
npm install medium-editor-autohr --save
使用
在安装好 Medium Editor 和 medium-editor-autohr 之后，我们就可以开始使用了。首先，我们需要在 HTML 文件中添加 Medium Editor 的 CSS 和 JS：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ------ ------ ---------------
----- ---------------- -----------------------------
----- ---------------- -----------------------------------
------- ------------------------------------
------- -------------------------------------------
-------
------
---- -----------------------------
--------
--- ------ - --- ----------------------------------------- -
-------- -
-------- -------- --------- ------------ ---------
--
------- -----
---------------- ----------------------
---
---------
-------
-------这里我们定义了一个名为 editor 的变量，它是按照 Medium Editor 的规则创建的，然后在 buttons 中加入了 autohr，以便我们在编辑器中使用。在我们定义 editor 的时候，我们在配置中加入了 autohr 和 autohrClassName，其中 autohr 这个参数表示是否启用 medium-editor-autohr 这个插件，如果设置为 true，那么就可以自动添加分割线了。autohrClassName 表示分割线的样式，这里 medium-editor-autohr 将会增加一个名为 medium-editor-autohr 的 class，可以用来控制分割线的样式。
示例代码
接下来，我们来看一个使用 medium-editor-autohr 的实际例子：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ------ ------ ---------------
----- ---------------- -----------------------------
----- ---------------- -----------------------------------
------- ------------------------------------
------- -------------------------------------------
-------
------
---- -----------------------------
--------
--- ------ - --- ----------------------------------------- -
-------- -
-------- -------- --------- ------------ ---------
--
------- -----
---------------- ----------------------
---
---------
-------
-------总结
medium-editor-autohr 是一个十分方便的 npm 包，可以非常便捷地实现在 Medium Editor 编辑器中自动添加分割线的效果。如果你是一个前端开发人员，通常需要在网页设计中添加分割线，而手动添加可能会非常繁琐，使用这个 npm 包可以使你的工作变得轻松非常多。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005602a81e8991b448de599