在前端开发中，富文本编辑器是不可或缺的一个工具。essh-medium-draft 是一个基于 Medium 编辑器的 React 富文本编辑器，提供了许多可定制的功能。它可以作为一个 npm 包安装使用，本文将介绍如何使用 essh-medium-draft 和如何自定义它。
安装
使用 npm 安装 essh-medium-draft：
npm install essh-medium-draft
初始化
essh-medium-draft 的核心组件是 MediumDraftEditor。要使用它，我们需要引入 react 和 react-dom 并在代码中使用组件：
-- -------------------- ---- -------
------ ----- ---- -------
------ -------- ---- -----------
------ - ----------- - ---- ----------
------ - ----------------- - ---- -------------------
----- --- ------- --------------- -
------------------ -
------------
---------- - -
------------ --------------------------
-
-
-------- -
------ -
------------------
------------------------------------
--------------------- -- --------------- ----------- ---
--
-
-
-
-------------------- --- --------------------------------在上述代码中，我们创建了一个名为 App 的 React 组件，将 MediumDraftEditor 作为它的子组件。我们通过 editorState 和 onChange 属性实现与编辑器的数据交互。
定制
目前，我们只是用 essh-medium-draft 的默认设置构建了一个基本的编辑器。essh-medium-draft 提供了许多可定制的设置，包括样式、快捷键、菜单等。下面我们来了解如何使用一些最常见的定制方法。
样式
使用默认的样式往往不太符合我们的使用场景。通过 customStyleMap 属性，我们可以自定义标记元素的样式。例如，我们想将文本的文本颜色更改为绿色：
-- -------------------- ---- -------
----- --- ------- --------------- -
---
-------------- - -
------ -
------ --------
--
-
-------- -
------ -
------------------
---
------------------------------------
--
-
-
-然后，在我们的文本编辑器中，选中文本并选择 GREEN，文本的颜色将变为绿色。
快捷键
essh-medium-draft 允许我们定义自己的快捷键。例如，我们可以将 Ctrl + B 定义为让文本加粗：
-- -------------------- ---- -------
------ - --------- - ---- ----------
---
----- --- ------- --------------- -
---
---------------- - --------- ------------ -- -
----- -------- - --------------------------------------- --------
-- ---------- -
--------------- ------------ -------- --
------ ---------
-
------ -------------
-
-------- -
------ -
------------------
---
----------------------------------------
--
-
-
-在代码中，我们用 handleKeyCommand 方法捕捉用户按下的快捷键，并使用 RichUtils 来更改选定文本。大多数常见的快捷键都可以这样自定义。
菜单
在大多数富文本编辑器中，文本的样式和格式通过菜单来实现。essh-medium-draft 提供了一个 Toolbar 组件，用于构建菜单，同时还支持自定义按钮的菜单。例如，我们可以添加一个自定义的菜单项，用于更改文本字体：
-- -------------------- ---- -------
------ - --------------- ---------------- - ---- ----------
---
----- --- ------- --------------- -
---
---------- - -
-
------ ---------
------ ------------------------
--
-
------ --------
------ --------------------------
--
-
------ -----------
------ --------------------------
--
-
------------ - -
-
------ -------
------ ----------------------
----- -------
--
-
------ ----------
------ ------------------------
----- ---------
--
-
---------- - -
-
------ ------------
------ - ----------- ----------- --
--
-
------ --------
------ - ----------- ------- --
--
-
------ ------ --- -------
------ - ----------- ------ --- ------ --
--
-
-------- -
------ -
------------------
---
----------------------------
--------------------------------
-
---------
-------------
------------- -------------
------------------------- -- -
---------
----------------
------------------
------------ --
----------------------- -- --
------------ ----------------------------
----------------------
----------
--
---
-
--
---
---------------
--------------
----------
--------------------
-
-
-在代码中，我们构建了一个名为 Toolbar 的菜单栏，并添加了名为 Font 的下拉菜单。我们使用 DropdownMenu 和 MenuItem 组件来实现自定义菜单项。当用户选择字体时，我们用 RichUtils.toggleInlineStyle 方法更改文本样式。
结论
essh-medium-draft 是一个非常强大的富文本编辑器，提供了许多可定制的功能。通过本文的介绍，您可以了解如何使用 essh-medium-draft 和如何自定义它。您可以前往 essh-medium-draft 的 Github 页面（https://github.com/essh/medium-draft）了解更多信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006734f890c4f7277583808