在前端开发中，富文本编辑器是一个常见的需求。draft-js 是 Facebook 开源的一款富文本编辑器库，它提供了丰富的 API 和插件系统，可以满足各种复杂的富文本编辑需求。
本文将介绍如何使用 npm 包管理器安装并使用 draft-js 库，包括如何创建一个简单的富文本编辑器并添加自定义样式和插件。本文适合于对 React 和 npm 有一定基础知识的读者。
安装
首先，我们需要使用 npm 包管理器来安装 draft-js。打开命令行界面，进入你的项目目录，并输入以下命令：
--- ------- -------- ------
这个命令会在你的项目中安装 draft-js 并将其保存为依赖项。--save 参数将 draft-js 添加到你的 package.json 文件中，以便你的项目在以后重建时能够正确地安装这个库。
创建富文本编辑器
在 React 中使用 draft-js 可以非常方便地创建富文本编辑器。下面是一个简单的例子，展示了如何使用 draft-js 创建一个空的富文本编辑器：
------ ----- ---- --------
------ - ------- ----------- - ---- -----------
------ --------------------------
-------- ---------- -
----- ------------- --------------- - ---------------
-- -- -------------------------
--
-------- ------------------------ -
-------------------------------
-
------ ------- ------------------------- ------------------- ---
-
------ ------- ---------在这个例子中，我们通过 import 语句导入了 Editor 和 EditorState 组件。EditorState 是一个 immutable.js 类型的对象，代表了富文本编辑器的当前状态。createEmpty 方法可以创建一个空的 EditorState 对象。
然后，在 MyEditor 函数组件中，我们使用 useState 钩子来创建一个名为 editorState 的状态变量，并将其初始化为一个空的 EditorState 对象。我们还定义了一个名为 onChange 的回调函数，用于更新 editorState 状态变量。最后，我们渲染了一个 Editor 组件，并将 editorState 和 onChange 函数传递给它。
运行这段代码，你会看到一个空的富文本编辑器。现在我们来添加一些自定义样式和插件。
添加样式
draft-js 提供了很多 API 来管理富文本编辑器中的样式。你可以使用 CSS 样式表、内联样式或实现自定义样式来控制编辑器中的样式。
下面是一个简单的例子，展示了如何使用内联样式为编辑器中的文本添加下划线：
------ ----- ---- --------
------ - ------- ------------ --------- - ---- -----------
------ --------------------------
-------- ---------- -
----- ------------- --------------- - ---------------
-- -- -------------------------
--
-------- ------------------------ -
-------------------------------
-
-------- ---------------------- -
------------------------------------------------------- --------------
-
------ -
-----
------- -------------------------------------------
------- ------------------------- ------------------- --
------
--
-
------ ------- ---------在这个例子中，我们定义了一个名为 handleUnderlineClick 的回调函数，该函数在用户单击「下划线」按钮时被调用。这个函数使用 RichUtils.toggleInlineStyle
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/32421