前言
在前端开发中，编辑器是不可或缺的工具之一。而使用 React 进行富文本编辑时，Draft.js 可谓首选。然而，Draft.js 的默认编辑器并不支持插入图片的功能，这就需要借助第三方的 npm 包来完成这一功能。draft-js-image2-plugin 就是其中之一。它可以让我们在 Draft.js 编辑器中插入图片，并且支持图片上传和拖拽，十分方便实用。本文就是对该插件进行详细的使用教程。
安装
我们需要先安装该插件，通过 npm 安装即可。在命令行中输入以下指令：
npm install draft-js-image2-plugin --save
安装完成后，在你的项目中通过以下名字引入该插件：
import createImagePlugin from 'draft-js-image2-plugin';
使用
在安装好插件后，我们可以开始在 Draft.js 编辑器中添加图片功能了。首先，依然需要先创建一个 Draft.js 编辑器的实例。
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ------ - ------- ----------- - ---- ----------- ------ ----------------- ---- ------------------------- ----- ----------- - -------------------- ----- ------- - -------------- -------- ------------- - ----- ------------- --------------- - ----------- -- -------------------------- -- -------- ------------------- - ---------------------- - ------ - ----- ------- ----------------- ------------------------- ----------------------- -- ------ -- - ------ ------- ------------展开代码
这时候我们的编辑器就已经加入了该插件。
接着我们需要在编辑器中添加添加图片的按钮、图片选择框等ui组件。可以自己编写样式，也可以使用npm包如antd来减少样式编写的关注度。
我们在这里写一个简单的 ui 组件代码：
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ------ - ------ ------- ------- - ---- ------- ------ - ------------ - ---- -------------------- -- ---------- ----- --------- - ----- ------ ----- -- ----------- ----- --------- - ---- - ---- - -- -- - -- -------- -------------------------- - ----- - -------- --------- ---------- - - ------ ----- ---------- ------------ - ------------- -------- -------------- - ----------- ---------------- - -------- ------------------- - ----- --- - ---------------------------------------- ----------------- - -------- ------------------ - ---------------------------------- -- -------- --- ----------- - -------- ------------------- - ----- ----- - ------------------- ----- --------- - ------------------ ------------------------ -- - ----- ------ - --- ------------- --------------------------- ---------------- - -------- -- - ----- - ------ - - ------- -- ------- -- ------------- -- ---------- - ---------------------- -- - ------------ - ---- --------- ----- ---------- ---- ------ -- --- - ---- - ----------------------------- ------- ----------- - ---- - ---------- - -- --- - -------- ---------- - --------------------- ---------------- - ------ - ------ ----------------- ------------ ----------------------- --------------- - ------- ----------------------- ------------------- ------------------------- ----------------------- - ---------------- --- - - - ----- ------------- -- --------------- ------ -------- --------- ----------- ---- -- ----- -- -------- - -- ----------- ---------------- ----------------------- -- ------ - - ----- --------- -------- -- - ------ ------- --------------------展开代码
这个 ui 组件主要是用于显示图片上传的ui，当然在点击上传按钮后，你需要做后端接收图片的处理，这里不再赘述。你也可以自己编写 ui 组件。
OK，我们已经为 Draft.js 编辑器添加了上传图片的ui，但它还处于不可用的状态。接下来，我们需要考虑如何让插件能够和它进行交互，才能完成嵌入图像的功能。
有几个步骤我们需要完成：
- 为 Draft.js 编辑器增加一个 ToolbarButton，用于打开上传图片的 ui。
- 捕获 ui 组件返回的 图片url 数组。
- 将图片 urls 传给 Draft.js 编辑器。
让我们分步骤来完成。
1. 为 Draft.js 编辑器增加一个 ToolbarButton
为了方便用户添加图片，我们需要一个 ToolbarButton 来触发 ui 组件的显示。ToolbarButton 可以用来触发各种这样或者那样的操作。我们可以根据自己的需要来自定义它，或者使用已经存在的。
下面是一个叫做 insertImageButton 的 ToolbarButton 组件:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----------- - ---- ----------- ------ - ------- - ---- ----------------- -------- -------------------------------- - ------ - ----- -------------------- ----- -------- --- ------ ------- -------- ------------- ------- --------- -- - --------------------------- -- - -- ----- -- ----------- - -- - ------------------ -- - ----- ------------ - -------------------------------- ----- ---------------------- - -------------------------- -------- ---------- - ---- ---- -- -- ----- --------- - ------------------------------------------------- ----- -------------- - ---------------------------- - --------------- ----------------------- --- --------- ----------------- --------------- ----------------------- --------------- -- ---------- -- --- - --- -- -- - ------ ------- ------------------展开代码
上面这个插入图片的 ToolbarButton 组件，我们需要通过参数 onInsertImage 获取。它是一个函数，在 ToolbarButton 被点击的时候，将被调用，然后我们可以在函数中打开图片上传的 ui 组件。最终获取的结果就是一组图片 urls。我们在上面代码中使用了 Promise 对象和 async、await 来进行异步处理。
2. 捕获 UI 组件返回的图片 url 数组
在 ToolbarButton 中调用工具栏按钮时，我们需要捕获 ui 组件返回的图片 urls 数组。我们需要编写一个 onInsertImage 回调函数，这个函数将被 ToolbarButton 的 insertImageButton 参数所调用。
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ------ - ------ - ---- ----------- ------ ----------------- ---- ------------------------- ------ ----------------- ---- ------------------ ------ ------------------- ---- ------------------------ ------ ------------ ----- ----------- - -------------------- ----- ------- - -------------- -------- ------------- - ----- ------------- --------------- - ----------- -- -------------------------- -- ----- ----------------------- ------------------------- - ---------------- -------- ------------------- - ---------------------- - -------- ------------------- - ------ --- ----------------- ------- -- - ------------------------------- -------- ---------- - -------------------------------- --------- - -------- -------------------- - -------------------------------- ----- ---- - ------------------- -- ---------- -------------- - ---------------- -------------------- ------------------------------- ------------------- ----------------------- --- --------------------------------------------------------- -- --- - ------ - ----- ------- ----------------- ------------------------- ----------------------- -- ------- ----------- -- - --------------------------------- ------------------- -- - ---- --------- ------ -- - ------ ------- ------------展开代码
如上，我们将 onInsertImage 换成了 handleInsertImage ，它被加入了 Draft.js 编辑器中的 addImage 事件中。
handleInsertImage 函数返回一个 Promise，用于表示异步操作。在函数内部，我们创建了一个 Modal ui 组件，它会在我们点击插入图片按钮时显示一个包含上传图片和预览图片的图片浏览器。
当 Modal ui 组件返回 urls 数组时，我们就将这个数组通过 promise 返回给 insertImageButton 回调函数。
3. 将图片 urls 传给 Draft.js 编辑器
最后，我们需要将图片 urls 传递给 Draft.js 编辑器。为了做到这一点，我们需要修改 addImage 函数。该函数的主要作用是设置 editorState 中的 selection 和 content，让我们可以进行编辑操作。
经过以上修改，我们将参数改为 editorState 和 callback，因为我们需要从 editorState 中获取当前的 selection，然后更新 contentState。最终，我们要将 contentState 通过 callback 函数，设置回到 editorState。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----------- - ---- ----------- ------ - ------- - ---- ----------------- -------- --------------------- --------- ----- - --- -------------- - ------------ ----- ------------ - ----------------------------------- ----- -------------- - ------------------------------ ----- ------------ - ---------------------------------------------------------- ----- --------- - ----------------------- ----- ---- - ----------------------- ----- --- - ---- - ------- - ---------------- ----- --------- - ------------ ---------------------- ------------ - ---- ---------- ------- ---- -------- -- --------------------------- ----- --------------- - --------------------------------------- - ---- ---------- ------- ---- -------- --- -- ---------- --- --------- - -------------- - -------------------------------- ---------------- ------------------- - ---- - ----- ------------ - --------- ----- ---------------------- - ------------------------------------------------------------- ------------ - ---- ---------- ------- ---- -------- --- ----- -------- - ------------ -- ------------ --- ---------- - -------------------------------------------------------------- ----- ------------- ----- ----- ----- --- -------------- ---------------------------------------------------------------------- ------------------------------- -- - ------------------------ ------------------------- ------ ----- -------- - ------------------------------------------------- ----- --------------- - ------------------------------ --------- ------------------------------------------ ---------- ---------------- --------------- --------------- --------------- --- -------------- - -------------------------------- ---------------- ---------------- - ------------------------- - ------ ------- -------- ------------------- - ----- ----------- - ------- -- - ------ - ---- -------- -------- ------ ----------- -------------- - --------- - ------- ------- ---------- -- ----------- -- - ---------------- -- - -------- -- ------ -- -- ----- ------------ - - ---------- --- -- -------- --------------- ---------------------- -- ------ - --------- ------------- --------- ----- -- --------------------- --------- ------ ------------ ------------ --------------------- - ------ - -------- ------ -------- ---- ------------------------ --- ------ - ---- --- -- -- -- ------------- ------------- ----------- -- -展开代码
通过上述代码，我们已经实现了在 Draft.js 编辑器中添加图片的功能。关于 draft-js-image2-plugin 具体参数及细节，请大家参阅官方文档。
总结
通过本文的介绍，我们了解了如何使用第三方 npm 包 draft-js-image2-plugin 在 Draft.js 编辑器中添加图像功能。这个插件是非常优秀的一个 npm 包，使用它的过程非常简单，只需要按照上述步骤进行操作即可。
当然，实际应用中，很多时候我们可能需要根据自己的需求对该插件进行适当的调整和修改，来满足更多的业务场景，这也需要一些 React 和 Draft.js 技术的基础和实践经验。在日常的工作中，我们应该多积累这方面的经验，以提高我们的技术水平和工作能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005548681e8991b448d1c99
