前言
在前端开发中，富文本编辑器是非常常见的功能，而 Slate.js 是目前一个非常优秀的富文本编辑器库，可以完全自定义编辑器的功能和样式。但是对于初学者，可能会感到使用起来有些困难，需要花费很多时间去学习。
这时，我们就可以使用 slate-toolbar-bmsterling 这个 npm 包来快速添加一个工具栏，让用户更加方便地操作富文本编辑器。
该文章主要介绍 slate-toolbar-bmsterling 的安装和使用，帮助大家快速上手。
安装和引用
在使用之前，您需要在工程中安装 slate-toolbar-bmsterling 依赖包：
npm install slate-toolbar-bmsterling --save
在应用中引入依赖包，以及 slate 本身所需要的相关依赖：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- --------------
------ - ----- - ---- --------
------ ------------ ---- ----------------- -- ------
------ - ------- - ---- --------------------------- -- -- ------- --
---
- -----------------------
--
----- ---------- - -
----------- --------
-- ------------
---- -------
--- --------------
--- --------------
--- ----------------
--- ---------------
--- ---------------
--- -------------
--
----- --------- - -
--- ---------
------- -------
-- ------------
----- ------
--
----- ----- - -
-
--------------- ----- -
----- ---- - -------------------------------------
-- ------ -
------ -
------- --------
----- -----
------ -------------------
--
-
--
----------------- --------- -
-- -------------- --- -------- -------
------ ------------- -
---- --------
------ ------------------------------------
---- ------------
------ ------------------
---- -------
------ ----------------------
---- --------------
------ --------------------
---- --------------
------ --------------------
---- ----------------
------ --------------------
---- ---------------
------ --------------------
---- ---------------
------ --------------------
---- --------------
------ --------------------
-
-
--
-
--------------- ----- -
----- ---- - ------------------------------------
-- ------ -
------ -
------- -------
----- -----
------ -------------------
--
-
--
----------------- --------- -
-- -------------- --- ------- -------
------ ------------- -
---- -------
------ ----------------------------
---- -------
------ ------------------------
---- ---------
------ --------------------
---- ------------
------ ------------------
-
-
--
-
--------------- ----- -
-- ----------- -- ------------------------ --- ------ -
------ -
------- --------
----- --------
----- -
---- -----------------------
-------- ----------------------
--
------ -------------------
--
-
--
----------------- --------- -
-- -------------- --- -------- -------
------ ------------- -
---- --------
------ -
----
----------------------------
--------------------------------
--
--
-
-
-
--
----- ------ ------- --------------- -
------------------ -
-------------
----- ------- - -----------------------------
---------- - -
------ -------
--
-
-------- - -- ----- -- -- -
--------------- ----- ---
--
---
- ----- ------- ----
--
--- - ------ -- -
----------- - -------
--
-------- -
------ -
-----
--------
------------------------
------------------------
--------------
--
------------------
------------------------
------------------------
-----------------
------------------------------
----------------------------
---------------
--
------
--
-
-
------ ------- -------使用
上述代码中，我们实例化了一个名为 Editor 的组件。在组件的 render 函数中，我们使用了 <Toolbar /> 组件，将其与 SlateReact 的 <Editor> 组件一起放入渲染结果中。
在 Slate 中使用 slate-toolbar-bmsterling 依赖包非常容易。在上面的示例中，我们定义了以下函数，这些函数返回选定文本应用的样式：
-- -------------------- ---- -------
---
- ------ ---- ---------
--
----- ---------- - ------- ------- ----- -- -
------ ----------------- -
---- -------
------ ----------------------------------
---- ---------
------ --------------------------
---- ------------
------ ------------------------
---- -------
------ ------------------------------
--------
------ -------
-
--
---
- ---------- ----- ----------
--
----- ----------- - ------- ------- ----- -- -
------ ----------------- -
---- -------
------ -
-----
-----------------------------
------
--
---- --------------
------ --------------------------
---- --------------
------ --------------------------
---- ----------------
------ --------------------------
---- ---------------
------ --------------------------
---- ---------------
------ --------------------------
---- --------------
------ --------------------------
---- --------
------ ------------------------------------------
---- --------
------ -
---- -------------------------
--------
---- -------------------------------- ------ --
---------------------------------------------------------
---------
--- --
------
--
--------
------ -------
-
--
---
- - ----- ------------
--
----- ------- - --------------------- ----------- -----------
---
- -- ------ -------
--
----- ------ - -
--------- -
----- - ------ ------------- --
---------- -------- - ----- ----- ------ ----- -- -- -
------ ------ -
-- -----------------------------
---- -------------------------- -
----- --------- - --------------------------
------ -------------------------------- ---------------- -----------
-
-------- -
------ -------
-
-
-
-
--
---
- ----
--
----- ------------ - -
------- --------
--------- -
------- -----------
------ -
-
------- --------
----- ------------
------ -
-
------- -------
----- -------- ----
-
-
-
-
-
--值得注意的是，我们在 renderMark 和 renderBlock 函数中使用了 next()，它将向下传递调用，能够匹配下一个节点或标记，以允许多个插件对节点或标记应用样式和行为。
您还可以根据 bmsterling/slate-toolbar-bmsterling 文档中的更多文档组合定制样式、颜色和行为。
结语
slate-toolbar-bmsterling 是一个非常方便实用的 npm 包，可以帮助我们快速地达成富文本编辑器中的常见操作。通过本教程，希望能够帮助您掌握该包的使用，能够更加灵活地操作富文本编辑器，而且也能够更加方便地实现复杂的编辑效果，是非常值得尝试的！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b44c6eb7e50355dbe67