前言
在前端项目中，很多时候需要使用富文本编辑器。draft-js 是 Facebook 推出的一款支持高度定制化的富文本编辑器。而 draft-js-embeder-plugin 则是一款优秀的插件，可以在富文本编辑器中添加嵌入式内容。
使用教程
安装
使用 npm 安装 draft-js-embeder-plugin：
npm install draft-js-embeder-plugin --save
初始化
在你的 React 组件中，初始化富文本编辑器和插件：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------- ----------- - ---- -----------
------ ------------------- ---- --------------------------
----- ------------- - ----------------------
----- ----------- - -- -- -
----- ------------- --------------- - ----------- --
-------------------------
--
----- ------------ - ------------- -- -
----------------------------
--
------ -
-----
-------
-------------------------
-----------------------
-------------------------
--
------
--
--
------ ------- ------------添加嵌入式内容
在 editorState 中的 content 中添加嵌入式内容：
-- -------------------- ---- -------
------ - ------------- ------------ - ---- -----------
----- ------------ - ------- -- -
------ -
----
---------------------------
-------------------------- ------- --------------- --
--
--
--
-------------------------- - -
------------------ -
---------- -------------
--
--
----- --------- - -
----- ------------------
----- -
----- -------- -- - ------ ---- -----------
--
--
----- -------------------- - -----------------------------------
------------------------------------------------------
--- --------------
---- ---------
----- ---------------
----- ---------------
----- ---
-------------- -------
---
---
----- ------------------------ - -----------------
------------
---------------------
------------------
--
-----------------------------------------定制嵌入式内容
在上面的示例中，我们添加了一个自定义的 HTML 块。你也可以添加其他类型的嵌入式内容。
你可以在插件初始化时，使用 contentTypes 属性来指定你自己的嵌入式内容类型，以及嵌入式内容的渲染组件。
例如，在下面的示例中，我们添加了一个自定义的 Twitter 块。它将显示一个 Twitter 嵌入式组件。在 contentTypes 中，我们将 Twitter 块的类型指定为 custom/twitter。
-- -------------------- ---- -------
-- ---------------- --
------ ----- ---- --------
------ --------- ---- -------------
------ -----------------------
----- ------------ - -- ---- -- -- -
----- - -------- - - -----
----- - --------- ----- --------- ------------ - - --- --------------
----- ------- - -----------------------
------ -
---- ----------------------------
----------- --------------------------
-- --------------------
-------------
------
--
--
---------------------- - -
----- -----------------
--------- ----------------------------
--------------
--
------ ------- --------------- -------------------- ---- -------
-- -------------- --
------ ------------------- ---- --------------------------
------ ------------- ---- ------------------
----- ------------- - ---------------------
------------- -
----------------- -
---------- -------------
--
--
---下面的代码演示了如何在 editorState 中添加一个 Twitter 块：
-- -------------------- ---- -------
----- ---------- - -
----- -----------------
----- -
--------- --------------------------------------------------------
--
--
----- --------------------- - -----------------------------------
------------------------------------------------------
--- --------------
---- ---------
----- ----------------
----- ----------------
----- ---
-------------- -------
---
---
----- ------------------------- - -----------------
------------
----------------------
------------------
--
------------------------------------------现在可以看到，我们已经成功地在富文本编辑器中添加了一个新的嵌入式 Twitter 内容块。
总结
本文主要介绍了 draft-js-embeder-plugin 的使用方法，以及如何添加自定义的嵌入式内容类型。该插件可以方便地添加嵌入式内容到富文本编辑器中，大大提高了开发效率。希望这篇文章对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566c181e8991b448e31bd