什么是 draft-js-delete-img-btn-plugin？
draft-js-delete-img-btn-plugin 是一款基于 React 和 draft-js的npm包，它可以帮助我们在富文本编辑器中删除图片。在 draft-js 中，删除图片的快捷键是 Backspace 键，然而在一些场景下，使用 Backspace 键删除图片并不是很方便，使用 draft-js-delete-img-btn-plugin 可以帮助我们在编辑器右侧添加一个删除图片按钮，方便用户删除图片。
如何使用 draft-js-delete-img-btn-plugin？
安装
我们可以通过 npm 安装 draft-js-delete-img-btn-plugin：
npm install draft-js-delete-img-btn-plugin --save
使用
我们在 React 的编辑器组件中引入 draft-js-delete-img-btn-plugin，并将其作为插件传入编辑器。这里我们以 react-draft-wysiwyg 以及 draft-js-plugins-editor为例：
-- -------------------- ---- -------
------ ------ - ------ - ---- --------
------ ------- - ----------- - ---- -----------
------ - ------ -- ----------- - ---- ----------------------
------ ------------------------ ---- ---------------------------------
------ --------------------------
------ ---------------------------------------------------
----- ------------------ - ---------------------------
----- -------- - -- -- -
----- --------- - -------------
----- ------------- --------------- - ------------------------------------------
-------
------------
---------------
-------------------------
------------------------------------
------------------------------
--
-
-这样，我们的富文本编辑器就添加了一个删除图片的按钮。
配置
当然，我们也可以对 draft-js-delete-img-btn-plugin 进行配置，默认情况下，它会添加一个名称为 deleteImage 的样式，我们也可以修改这个样式，以达到自定义删除图片按钮的目的。配置实例如下：
-- -------------------- ---- -------
----- ------------------ - --------------------------
------------- -
---------- -------------------------
------ ---------
---------- ---------------
--
---------------------- -
---------- -----------------------------------
--
---除了修改删除按钮的样式，还可以修改删除按钮容器的样式。
总结
通过使用 draft-js-delete-img-btn-plugin，我们可以很方便地添加一个删除图片的按钮，提升用户体验，同时我们也可以对插件进行配置，以符合我们的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005548481e8991b448d1c84