前言
Draft.js 是一款由 Facebook 开发并且用于其社交平台上的富文本编辑器。随着社交网络的日益增长，人们对于简洁、高效地在 Web 端上面写作的需求日益增长，并且需要在文本编辑器上有更多的工具来辅助写作。Draft-js-plugin-editor-toolbar-picker 在这个背景下应运而生，通过 CKEditor 和 TinyMCE 这类编辑器的参考，提供了一套工具条样式选择器。
这个 package 可以独立使用，也可以和其它插件结合使用，与其它插件比较有关联性的是 Draft-js-plugin-image，你可以通过这两个插件联合使用，提供一个拥有图片上传和样式选择功能的编辑器。
在本篇文章中，我们会介绍如何使用这个 npm 包，以及如何和富文本编辑器 Draft.js 结合使用，最后我们会展现一个实际的代码案例，旨在能够帮助读者更好地理解这个插件的使用方法。
安装
你可以使用 npm 命令来安装 draft-js-plugin-editor-toolbar-picker
npm install draft-js-plugin-editor-toolbar-picker --save
基本使用
在你的应用中引入 Draft.js 插件后，使用 EditorToolbarPicker 来创建一个选择工具条：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------------- ---- ----------------------------------------
------ - ----------- - ---- -----------
------ - ------ - ---- ----------------------
----- -------- ------- --------------- -
------------------ -
-------------
---------- - -
------------ --------------------------
--
-
------------------- - ----------- -- -
--------------- ----------- ---
--
-------- -
----- - ----------- - - -----------
------ -
-----
-------
-------------------------
----------------------------------------------
----------
------ -
---------- -----------------
--
------- -
---------- --------------------
--
--
--
------
--
-
-
------ ------- ---------EditorToolbarPicker 接受一个名为 component 的 prop 用于决定在选择器中应该显示的组件。一般来说，需要把可用的样式对象传递给这个组件，以便选择器使用，如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------------- ---- ----------------------------------------
------ - ----------- - ---- -----------
------ - ------ - ---- ----------------------
------ - ------------------- - ---- ------------------------
----- --------------------- - -
- ------ ------- ------ ------ --
- ------ --------- ------ -------- --
- ------ ------------ ------ ----------- --
--
----- -------- ------- --------------- -
------------------ -
-------------
---------- - -
------------ --------------------------
--
-
------------------- - ----------- -- -
--------------- ----------- ---
--
-------- -
----- - ----------- - - -----------
------ -
-----
-------
-------------------------
----------------------------------------------
----------
------ -
---------- -----------------
--
------- -
---------- --------------------
------ -
---------------- ----------------------
--
--
--
--
------
--
-
-
------ ------- ---------
-------- --------------------- ---------------- --------- ----------- -- -
------ -
---- --------------------------------
-------------------------- -- -
----- ------------ -
----------- -- ---------------------------- - ----------------------- ------------------------ - -------------------------
------ -
----- ------------------------ -------------- -- ---------------------- ------------------
-------------
-------
--
---
------
--
-高级使用
当它单独使用时，许多内置的组件（如 BoldButton、ItalicButton、UnderlineButton 等）都可以作为可用的样式传递到 EditorToolbarPicker 组件。你也可以传递自定义的组件或者 HTML 元素或 react 组件作为样式，来获得更多的灵活性。
还有一点需要注意：当使用自定义样式时，你需要为这些样式定义一个唯一的样式名，否则选择器可能无法正常工作。
例如，在下面的例子中，我们提供了一个自定义样式，它是一段嵌入式链接。你可以点击链接按钮将它添加到当前选择器中。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------------- ---- ----------------------------------------
------ - ------- ------------ --------- - ---- -----------
------ --------- ---- -------------
----- ------- - ------------
----- ------------ - -
----- -
------ -------
--------------- ------------
--
--
----- ---------------- ------- --------------- -
------------------ -
-------------
---------- - -
----- ---
--
------------------ - ------------------------------
----------------------- - -----------------------------------
----------------- - -----------------------------
-
-------------------- -
-----------------------
----- - ----------- - - -----------
----- --------- - ---------------------------
-- -------------------------- -
----- ------------ - --------------------------------
----- -------- - ------------------------
----- ----------- - ---------------------------
----- ----- - --------------------------------------
----- ------- - ------------------------------ -- ----------------------------- - ---
----- ---- - ------- - --------------------------------------------- - ---
--------------- ----- ---- -- -- -- -
------------- -- -------------- -- ----------------------- ---
---
-
-
------------------------- -
-- ------------ --- --- -
---------------------
-
-
------------------- -
--------------- ----- ------------------ ---
-
--------------- -
----- - ------------ -------- - - -----------
----- ---------- - - ---- --------------- --
----- ------------ - --------------------------------
----- ---------------------- - --------------------------------- ---------- ------------
----- --------- - -------------------------------------------------
----- -------------- - ---------------------------- - --------------- ---------------------- ---
----- --------- - ------------------------------
----- --------------- - -------------------------------------------- ---------- -----------
----- ---------------------- - ------------------------------- - --------------- --------------- ---
---------------------------------
-
-------- -
----- - ---------- - - -----------
----- - ---- - - -----------
------ -
---- -----------------------------
------
-------------- -- -
-------------- - ----------
--
-----------
---------------- ----
-----------------------------------
----------------------------
------------
--
------- ----------------------------------------
------
--
-
-
-------- -------------------------- --------- ------------- -
---------------------------- ------------- ----------
-
-------- -------------------- ------------- --------- -
----- ---- - -----------------------
--- ---------
--- ----- - --
----- ---------- - ----------------- --- ----- -
-------------- - --------------- ----- - -------------- - --------------------
----- - ----- - -------------- - -------------------
-
-
-------- ----------- -
----- - ------------- ---------- -------- - - ------
----- - --- - - --------------------------------------------
------ -
-- ---------- --------------- ------------- ------------
----------
----
--
-
-------- -------------------------- -
------ -
--------------- -------------
----------- -
-
--------- -------------
---------- -----
--
--
-------------- -
---------- --------------------
------ -
---------------- -
- ------ ------- ------ ------ --
- ------ --------- ------ -------- --
- ------ ------------ ------ ----------- --
- ------ ------- ------ ------ --
--
---------------
--
--
--
-
----- -------- ------- --------------- -
------------------ -
-------------
---------- - -
------------ --------------------------
--
------------- - -------------------------
--------------------- - ---------------------------------
-
--------------------- -
--------------- ----------- ---
-
------------------------- -
----- -------- - -------------------------------------------------- ---------
-- ---------- -
------------------------
------ -----
-
------ ------
-
-------- -
------ -
-----
-------
------------------------------------
----------------------------------------
------------------------
------------------------
--
------
--
-
-
------ ------- ---------结语
通过本文，我们学习了如何使用 Draft.js Plugin Editor Toolbar Picker 这个 npm 包来实现一个带有选择器样式的富文本编辑器。我们也学习了如何和 Draft.js 插件结合使用，和使用自定义的样式组件达到更高的灵活性。
现在，您是否对于富文本编辑器有了更深的了解呢？
参考资料
- Draft.js - https://draftjs.org/
- Draft-js-plugin-editor-toolbar-picker - https://github.com/nikgraf/draft-js-plugins/tree/master/packages/draft-js-plugin-editor-toolbar-picker
- React Draft Wysiwyg - https://github.com/jpuri/react-draft-wysiwyg
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e281e8991b448e0696