随着前端技术的发展，富文本编辑器在前端项目中的应用越来越普及。@nodejh/react-draft-wysiwyg 是一款基于 React 和 Draft.js 实现的富文本编辑器，提供了许多丰富的功能，如插入图片、插入表格、插入链接等，同时也支持自定义样式和工具栏。
本文将介绍如何使用该 npm 包搭建一款初步的富文本编辑器，并针对其中的关键代码进行详细讲解和探讨，以期对读者有一定的指导意义和学习帮助。
1. 安装
可以通过 npm 的方式进行安装：
npm install @nodejh/react-draft-wysiwyg
2. 基本用法
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------------ ------------ - ---- -----------
------ - ------ - ---- ------------------------------
------ -----------------------------------------------------------
----- -------- - -- -- -
----- ------------- --------------- - ------------------------------------
-- ------
----- ---------- - -- -- -
----- ------- - --------------------------------
----- ---------- - ----------------------
------ ---------------------------
--
-- ----------
----- ------------------- - ------------- -- -
----------------------------
--
------ -
-----
-------
-------------------------
-----------------------------------------
--
------- ----------- -- ----------------------------------------
------
--
--
------ ------- ---------如上所示，我们可以通过 EditorState.createEmpty() 初始化一个空的编辑器，并将其放入 Editor 组件中，使用 onEditorStateChange 事件监听编辑器的状态改变，在状态改变时更新 editorState。
另外，convertToRaw 函数可以将编辑器内容转化为 Raw 格式，这里使用 JSON.stringify 将其转化为字符串并输出到 console 中。
3. 上传图片
除了基本的文字编辑之外，富文本编辑器最常见的需求就是上传图片。@nodejh/react-draft-wysiwyg 提供了在编辑器中上传图片的功能。首先需要引入 Image 组件，组件内部通过 File API 和 formData 对象来上传图片。在上传过程中需要注意的是，需要在请求头中添加 Authorization 信息以保证上传的图片能够被正确地存储到服务器。
-- -------------------- ---- -------
------ - ------------ ------------- ------------ - ---- -----------
------ - ------- ----------- - ---- ------------------------------
------ ----- ---- ----------------------------------------
------ -----------------------------------------------------------
----- -------- - -- -- -
----- ------------- --------------- - ------------------------------------
----- -------------------- ---------------------------------- - -
-----------
- -- -
----------------------------
--
----- ------------ -------------------------------- - ----- ------ -- -
----- -------- - --- -----------
----------------------- ------
----- -------- - ----- -------------------------------- -
------- -------
-------- -
-------------- ------- - - ------------------------------
--
----- ---------
---
----- ------ - ----- ----------------
------ -
----- - ----- ---------- --
--
--
------ -
-----
-------
-------------------------
-----------------------------------------
----------
------ - --------------- ------------ ---- - -------- ---- - --
--
-----------------------------------
-----------------------------------
---------------------------------
--
------
--
--如上所示，我们可以将上传图片的函数 uploadImage 作为 Image 组件的属性传入 toolbar，在 uploadImage 函数中，通过 FormData 对象将文件信息封装成表单数据，同时在请求头中添加了 Authorization 信息，将图片上传到后端。上传成功后，通过返回的 url 构造一个 JSON 对象 link 并将其作为 uploadImage 函数的返回值返回。
4. 小结
本文简单介绍了 @nodejh/react-draft-wysiwyg 这款 npm 包的基本用法和上传图片的方法，并提供了示例代码。在实践中，读者可以根据自己的需求来进一步探索这款富文本编辑器的丰富功能以及实现方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcd967216659e244a59