前言
在前端开发中，编辑器是很常用的组件，主要用于富文本编辑和表格编辑等功能。如何方便快捷地构建一个高质量的编辑器成为了一个重要的议题。在 React 生态系统中，有很多开源的富文本编辑器，其中 react-draft-editor 是一个很不错的选择。而 react-draft-editor-ch 则是 react-draft-editor 的中文版，具有更好的国际化支持。
本篇文章将会对 react-draft-editor-ch 进行详细的使用教程，并提供示例代码供读者参考。
安装
react-draft-editor-ch 支持通过 npm 进行安装:
npm install react-draft-editor-ch --save
如果你使用 yarn，可以通过以下命令安装：
yarn add react-draft-editor-ch
基本使用
react-draft-editor-ch 的主要思想是将富文本内容保存为 JSON 格式，也就是 Draft.js 的 ContentState。因此，在使用它之前，需要先初始化 ContentState。在初始化 ContentState 之后，再使用 Editor 组件来呈现内容。
比如，以下代码演示了如何使用 react-draft-editor-ch：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------ - ---- ------------------------
------ - ------------ ------------- -------------- - ---- -----------
------ -------------------------------------------------------
------ ------- -------- ---------- -
----- ------------- --------------- - ----------- -- -
----- ------- - ---------------------------------------
-- --------- -
------ -------------------------------------------------------------------
- ---- -
------ --------------------------
-
---
----- ---------- - -- -- -
----- ------------ - --------------------------------
----- ---------- - ---------------------------
-------------------------------------- ----------------------------
-
------ -
--
-------
-------------------------
-------------------------
--
------- --------------------------------
---
--
-该示例代码创建了一个基本的富文本编辑器，并支持存储和恢复编辑内容。它使用了 useState 和 Draft.js 提供的一些函数来实现功能。
高级用法
react-draft-editor-ch 可以实现很多高级的用法。下面，将介绍一些常见的用例。
内容改变监听
如果要监听内容的改变，在 Editor 组件上可以设置 onChange 回调函数。
-- -------------------- ---- -------
------ - -------- - ---- --------
------ - ------ - ---- ------------------------
------ - ----------- - ---- -----------
------ -------------------------------------------------------
------ ------- -------- ---------- -
----- ------------- --------------- - ------------------------------------
----- ------------ - ------- -- -
----------------------
-- ----- - ----------- --
------------------------------------------------------
--
------ -
-------
-------------------------
-----------------------
--
--
-选择文本内容
如果要操作选中的文本，可以使用 getSelection 函数来获取当前的选择，然后调用 EditorState 上的函数进行处理。
-- -------------------- ---- -------
------ - -------- - ---- --------
------ - ------ - ---- ------------------------
------ - ----------- - ---- -----------
------ -------------------------------------------------------
------ ------- -------- ---------- -
----- ------------- --------------- - ------------------------------------
----- ---------- - -- -- -
----- --------- - ---------------------------
-- -------------------------- -
----- ------- - --------------------------------
----- ---------------- - ---------------------------------- ---------- --------
----- -------- - ----------------------------- ----------------- -----------------------
-------------------------
-
--
------ -
--
-------
-------------------------
-------------------------
--
------- --------------------------------
---
--
-这里的 handleBold 函数会在用户点击“加粗”按钮时被调用。它首先使用 getSelection 函数来获取当前选择，如果不是一个空选择，就把该选择的内容加粗显示，然后使用 EditorState.push 函数来更新编辑器的状态。
插入图片
如果要插入图片，在顶部导入 draft-js-image-plugin 和 react-draft-editor-ch-image-plugin 两个插件。
-- -------------------- ---- -------
------ - -------- - ---- --------
------ ------- - ----------- - ---- ------------------------
------ ----------------- ---- ------------------------
------ ------------------- ---- ---------------------------------
------ -------------------------------------------------------
------ ------------------------------------------------
------ ---------------------------------------
------ ----------------------------------------------------
----- ----------- - --------------------
----- ------------- - ----------------------
----- - ------- - - --------------
----- ------- - --------------- -------------
------ ------- -------- ---------- -
----- ------------- --------------- - ------------------------------------
----- ----------------- - ----- -- -
----- ------------ - --------------------------------
----- ---------------------- - --------------------------
--------
------------
- ---- --- -
--
----- --------- - -------------------------------------------------
----- -------------- - ---------------------------- - --------------- ---------------------- ---
----------------------------------------------------------------- ---------- - ----
--
------ -
--
-------- --
-------
-------------------------
-------------------------
-----------------
--
------- ----------- -- -------------------------------------------------------------
---
--
-可以看到，我们在导入时包含了两个新的插件。其中，draft-js-image-plugin 用于处理图片的上传和显示，react-draft-editor-ch-image-plugin 则是中文化的版本。
除此之外，我们还修改了 Toolbar 的相关配置，让它支持插入图片的操作。
最后，在 handleInsertImage 函数中，我们创建一个新的 ContentBlock，然后使用 Entity.add 函数将图片实体添加到 contentState 中。
结语
本文介绍了 react-draft-editor-ch 的基本使用和一些高级用例。希望这些例子能够帮助读者更好地掌握这个组件，并且在实际开发中能够更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e4d9381d61a3540aa1