介绍
@tommoor/slate-drop-or-paste-images 是一个开源的 npm 包，提供了在 Slate 富文本编辑器中实现拖拽或粘贴图片的功能。它支持拖拽或粘贴本地图片、网络图片及 Base64 编码的图片，并且可以自动上传到服务器，得到图片在文章中的地址。
安装
你可以使用 npm 或 yarn 进行安装：
npm install @tommoor/slate-drop-or-paste-images yarn add @tommoor/slate-drop-or-paste-images
快速开始
首先，我们要创建一个 Slate 编辑器：
-- -------------------- ---- -------
------ ------ - --------- ------- - ---- -------
------ - ------------ - ---- -------
------ - ------ --------- --------- - ---- -------------
----- ----------- - -- -- -
----- ------ - ---------- -- -------------------------------------- ---
----- ------- --------- - ----------
-
----- ------------
--------- -- ----- -------- ---
--
--
----- ------------- - ----------------- -- -
------ -------------------- -
---- --------
------ ------------- ---------- --
--------
------ --------------- ---------- --
-
-- ---
----- ----------------- - ------------
----- - -- -
----- ----- - -------------- -- --------------------
--- ------ ---- -- ------ -
----- --- - ----- -----------------
------------------- ----
-
--
--------
-
------ -
------ --------------- ------------- ------------------ -- --------------------
---------
-----------------------------
--------------------------
---------------------------
--
--------
-
-
----- ---------- - ------ -- -
----- - ----------- ------ - - ------
------------- - ------- -- ------------- --- ------- - ---- - ----------------
----------------- - ---- -- -
----- ---- - --------------------------
----- - ----- - - ----
-- ------ -- ------------ - -- -
--- ------ ---- -- ------ -
----- ------ - --------------------
-- ----- --- -------- -
----- --- - -------------------------
------------------- ----
-
-
- ---- -- ------------------ -
------------------- -----
- ---- -
----------------
-
-
------ ------
-
----- ----------- - -------- ---- ------- -- -
-- -------- -
----- ------- - ---------------------
----- ------- - -------------------- -------
------------------------- ------- - ------------------- ------- - -------
-----------------------
-------
- ----- -------- ---- ---- --------- -- ----- -- -- --
- --- ------- - ------- - -------- -
-
-- ---------- -
-------------------------
-
- ---- -
-----------------------
-------
- ----- -------- ---- ---- --------- -- ----- -- -- --
- ------- ---- -
-
-
-
----- ---------- - --- -- -
-- ------ ------ -----
-- ---------------------------------- ------ -----
-- ----------------------------- ------ ----
----- --- - --- ----------------------------------
------ --------------------------------------------
-
----- ------------ - -- ----------- --------- ------- -- -- -
----- -------- - -------------
----- ------- - ------------
------ -
---- ----------------
---- ------------------------
----
-----------------
--------
-------- --------
--------- -------
---------- -------
---------- ----------- -- ------- - -- - - --- -------- - ---------
--
--
------
----------
------
-
-
----- -------------- - -- ----------- -------- -- -- -
------ -- ------------------------------
-
----- ----------- - ----- ---- -- -
----- -------- - --- ----------
----------------------- -----
----- -------- - ----- ------------------------------------------------ -
------- -------
----- ---------
--
----- ---- - ----- ---------------
------ -------- -- ------ --- -- -------- -- --- --------
-这个编辑器会在拖拽或粘贴图片时自动上传并插入图片。如果你有自己的上传 API，记得将 uploadImage 函数替换成适合自己的实现。
示例代码
为了让大家更好地理解这个 npm 包的使用方法，下面我们来看一下具体的代码实现。
首先，我们要配置 Slate 编辑器的 props，添加一个 renderElement 函数，用于根据 element 的类型渲染对应的组件。例如，如果它是一个 image 类型，就渲染 ImageElement：
-- -------------------- ---- -------
----- ----------- - -- -- -
----- ------ - ---------- -- -------------------------------------- ---
----- ------- --------- - ----------
-
----- ------------
--------- -- ----- -------- ---
--
--
----- ------------- - ----------------- -- -
------ -------------------- -
---- --------
------ ------------- ---------- --
--------
------ --------------- ---------- --
-
-- ---
------ -
------ --------------- ------------- ------------------ -- --------------------
--------- ----------------------------- --
--------
-
-然后，我们要添加 withImages 函数，用于注册插入图片的逻辑。这段函数的作用是将 insertData 函数替换成我们自己的实现，从而实现上传图片并插入的功能。具体来说，我们要判断 data 中是否有文件，如果有，则上传文件并插入。如果没有，则默认调用 insertData 函数。
-- -------------------- ---- -------
----- ---------- - ------ -- -
----- - ----------- ------ - - ------
------------- - ------- -- ------------- --- ------- - ---- - ----------------
----------------- - ---- -- -
----- ---- - --------------------------
----- - ----- - - ----
-- ------ -- ------------ - -- -
--- ------ ---- -- ------ -
----- ------ - --------------------
-- ----- --- -------- -
----- --- - -------------------------
------------------- ----
-
-
- ---- -- ------------------ -
------------------- -----
- ---- -
----------------
-
-
------ ------
-接着，我们添加 insertImage 函数用于插入图片。这个函数接受三个参数：editor，src 和 target。
editor 是我们的 Slate 编辑器实例，src 是图片的地址，target 是光标所在位置。
这个函数会首先判断 target 是否合法，如果合法则在该位置插入图片，否则在光标所在位置插入图片。
-- -------------------- ---- -------
----- ----------- - -------- ---- ------- -- -
-- -------- -
----- ------- - ---------------------
----- ------- - -------------------- -------
------------------------- ------- - ------------------- ------- - -------
-----------------------
-------
- ----- -------- ---- ---- --------- -- ----- -- -- --
- --- ------- - ------- - -------- -
-
-- ---------- -
-------------------------
-
- ---- -
-----------------------
-------
- ----- -------- ---- ---- --------- -- ----- -- -- --
- ------- ---- -
-
-
-最后，我们实现 ImageElement 组件，用于渲染图片：
-- -------------------- ---- -------
----- ------------ - -- ----------- --------- ------- -- -- -
----- -------- - -------------
----- ------- - ------------
------ -
---- ----------------
---- ------------------------
----
-----------------
--------
-------- --------
--------- -------
---------- -------
---------- ----------- -- ------- - -- - - --- -------- - ---------
--
--
------
----------
------
-
-这里我们使用了 useSelected 和 useFocused 两个 hooks 来判断当前选中状态。
总结
通过这个 npm 包，我们可以在 Slate 编辑器中实现拖拽或粘贴图片的功能，并且自动上传到服务器，得到图片的地址。这个包在编辑器制作、博客发布等场景下非常实用，推荐大家尝试使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056b4681e8991b448e546d