前言
在处理富文本编辑器中插入图片的问题时，很多人都会使用 @mikeljames 的 draft-js-drag-n-drop-upload-plugin。这个 npm 包提供了一种可以拖拽图片上传的方法，方便了图片上传的操作。
但是这个包的使用方法对于一些前端新手而言还是有一定的难度，本文将详细介绍如何使用这个 npm 包，希望本文可以对初学者有所帮助。
安装
使用 npm 安装这个包：
npm install @mikeljames/draft-js-drag-n-drop-upload-plugin
安装完成后，我们需要引入这个包：
import createUploadPlugin from '@mikeljames/draft-js-drag-n-drop-upload-plugin';
使用
首先，我们需要初始化一个 Rich Text Editor 实例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -----------
----- -------- ------- --------------- -
------------------ -
-------------
---------- - ------------- ---------------------------
------------- - ------------- -- -----------------------------
------------ - -----------------------
-
-------- -
------ -
-------
------------------------------------
------------------------
----------------------
--
--
-
-
------ ------- ---------在上面的代码中，我们首先引入了 @mikeljames/draft-js-drag-n-drop-upload-plugin 包。
然后，我们初始化了一个 Rich Text Editor 实例，并将 createUploadPlugin() 的返回值作为插件传递给了 <editor> 组件。
接下来，我们需要定义上传图片的功能。
-- -------------------- ---- -------
------ - ------------ - ---- -----------
------ - ----------- - ---- -----------
----- ----------- - --------------------
------------- ------- ------------ ------- -- -
-- -------------------- ------- --
---------------------------
------------------ -- -
-------------
----- -----
---------- ----- -- -
-------------------------------------------------------------------- ------------- -- -
------------------------------
----------- -- -
----- --------- - ----------------------
------ --------- --- ---- -- -------------------------------------------------------------- --- --------
--
------- ---- -- -
----- --------- - ---------------------------
-- -
----- -- -------------------------- --
--- -- ------------------------
- -
----- --- - --------------------------------
----------------------------
----
- ---- --- --
--
-
-
--
---
--
-------- -- -- -
-- ---------
--
---
---
-
---在上面的代码中，我们定义了一个上传图片的方法 handleUpload，这个方法将在用户开始拖拽图片时被调用。
handleUpload 方法包含三个参数：
- files：当前拖拽的图片文件。
- editorState：当前的 editorState 对象。
- upload：一个可以上传图片的方法。在实际场景中，我们可以采用 axios 或者其他第三方上传图片的库进行上传。
在 handleUpload 方法中，我们首先可以定义一个开启 loading 的状态，然后针对每个文件进行上传操作。
在每个文件上传成功后，我们遍历编辑器中当前所有的 ContentBlock，找到所有的图片块，并且把它们中的其中一个 Entity 的 src 更新为上传成功后的 url。
最后，我们重新设置 editorState。
最终，我们把这个上传图片的插件传递给 <editor> 组件即可。
-- -------------------- ---- -------
----- -------- ------- --------------- -
------------------ -
-------------
---------- - ------------- ---------------------------
------------- - ------------- -- -----------------------------
------------ - --------------
-
-------- -
------ -
-------
------------------------------------
------------------------
----------------------
--
--
-
-
------ ------- ---------示例代码
完整的代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----------- - ---- -----------
------ ------------------ ---- -------------------------------------------------
------ - ------------ - ---- -----------
------ - ----------- - ---- -----------
----- ----------- - --------------------
------------- ------- ------------ ------- -- -
-- -------------------- ------- --
------------------ -- -
---------------------------
-------------
----- -----
---------- ----- -- -
-------------------------------------------------------------------- ------------- -- -
------------------------------
----------- -- -
----- --------- - ----------------------
------ --------- --- ---- -- -------------------------------------------------------------- --- --------
--
------- ---- -- -
----- --------- - ---------------------------
-- -
----- -- -------------------------- --
--- -- ------------------------
- -
----- --- - --------------------------------
----------------------------
----
- ---- --- --
--
-
-
--
---
--
-------- -- -- -
-- ---------
--
---
---
-
---
----- -------- ------- --------------- -
------------------ -
-------------
---------- - ------------- ---------------------------
------------- - ------------- -- -----------------------------
------------ - --------------
-
-------- -
------ -
-------
------------------------------------
------------------------
----------------------
--
--
-
-
------ ------- ---------结语
本文介绍了 @mikeljames/draft-js-drag-n-drop-upload-plugin 的使用方法。
尽管使用这个包可能对一些前端新手而言有难度，但是在掌握了这个包的使用方法后，我们将能够更高效地在富文本编辑器中处理图片上传问题。
希望本文可以对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bd881e8991b448e57c4