在前端开发中，文章的排版对于用户体验和页面的美观程度都非常重要。而 medium-prose 这个 npm 包可以让我们在开发中更加方便地创建富文本编辑器，为我们的文章排版提供帮助。本文将详细介绍 medium-prose 的使用方法，并提供示例代码供参考。
概述
medium-prose 是一个基于 ProseMirror 的富文本编辑器，它可以让我们在前端中快速创建一个类似于 medium.com 的编辑器，支持粗体、斜体、下划线、标题、段落等常见的排版样式，同时还支持自定义扩展。
安装
要在项目中使用 medium-prose，首先需要使用 npm 进行安装：
npm install medium-prose
使用
安装完成后，我们需要在项目中引入 medium-prose。以下是一个简单的示例：
import { Medium } from 'medium-prose'
const medium = new Medium({
element: document.querySelector('#editor'),
extensions: [
// 在这里添加你需要的扩展
]
})如上所示，我们通过 import 引入了 medium-prose 并创建了一个 Medium 对象。具体地，我们需要为 Medium 对象提供以下参数：
element：表示 Medium 将要绑定的 DOM 元素，此处选择querySelector获取。extensions：表示 Medium 支持的扩展，这里我们可以通过引入 ProseMirror 中的扩展进行功能扩展。
接下来，我们需要设置 Medium 对象的内容和样式：
-- -------------------- ---- -------
----- ------- - -
----- ------
-------- -
-
----- ------------
-------- -
-
----- -------
----- ----- -- - ------ ----- ---------
-
-
-
-
-
--------------------------
------------------------
---------
-----
------------
-------
---------
----------
-------------
-------------
--------------
---------------
-----------
--如上所示，我们通过 setContent() 方法来为 Medium 设置内容，同时使用 setActiveStyles() 方法来设置 Medium 中的激活样式（也就是使得 Medium 编辑器虚线框处于激活状态时样式变化的样式）。在此处，我们添加了常用的样式例如粗体、斜体、下划线等等。
自定义扩展
medium-prose 同时也支持我们进行扩展。以下是一个简单的示例：
-- -------------------- ---- -------
------ - ------ - ---- --------------
------ - ------ - ---- --------------------
------ - --------- ------------- - ---- ------------------
------ - ----------- - ---- -----------------------
----- ------ - --- --------
-------- ----------------------------------
----------- -
--------
-------- -------------------
-------- ---------------
-------- ---------------------
---
--------
------ ---------------------------
-------- ----------------------------
------------ ------- --------- -- -
-- ------------------------ ------ -----
----- ----- - ---------------------
--- ---- - - ------------ - -- -- ---- -
----- ----- - --------------
-- ------------------------------------ ------ ------------------------------
------ -----------------------------------------------------------------------------------------------
-
------ -----
--
-------------- ------- --------- -- -
-- ------------------------ ------ -----
----- ----- - ---------------------
----- ---------- - --------------------------- ------------------- ----- ---------
----- --------- - -------------------------------------------- -------------------------- ----- ---------
----- - -- - - -----
--------------------------------------------- ----------- - --
----- --------- - -------------------------------------
----- --------- - -------------------------------------------------
----- ----- - --- ---------------------------------------------------- -- --
-------------------------- ------
----- --- - --------------------------------------------- - -----------
--------------------
------ -----------------------------
--
------------ ------------------------ - ------ - ---
------------ ------------------------ - ------ - ---
------------ ------------------------ - ------ - ---
------------ ------------------------ - ------ - ---
------------ ------------------------ - ------ - ---
------------ ------------------------ - ------ - ---
-------------- -------------------------
-------------- ------------------------
--------- ---------------------------
---
-
------ ------ -
------ --- ------
------------------- ------------- -
-----------------------------------------------
-
--
--
------ ------ ---------- -
----- ----- - ----------
----- - ----- - - ---------------
----- ---- - --------------
-- ------ -
----- - -------- --------- - - ------------------
----- ----------- - ---------
-- ------------ --- ------- -- ------------- -
---------------
------------ -
---------- -----------
-
--
- ---- -- ------------ --- ---------- -
---------------
------------ -
---------- -------------
-
--
-
-
-
-
-
--在上述代码中，我们使用了 ProseMirror 的 keymap、wrapItem()、blockTypeItem()、insertPoint()、Slice、Fragment 和 Selection 等 API 来实现自定义扩展。在此处，我们实现了如下扩展：
- 快捷键
Mod-b、Mod-i、Mod-u分别用来添加粗体、斜体、下划线样式。 - 快捷键
Enter、Mod-q、Mod-Enter、Shift-Enter分别用来添加段落、引用块、换行、双行间隔样式。 - 快捷键
Mod-Alt-1到Mod-Alt-6分别用来添加一级到六级标题样式。 - 快捷键
Mod-Shift-7、Mod-Shift-8、Mod-'分别用来添加有序列表、无序列表、代码块样式。 - 使用
plugin方法来传入一个可复用的 View 对象，以及其update()方法用来更新 Medium 编辑器内容或样式。
集成示例
下面是一个基础示例代码，可以直接运行查看效果：
-- -------------------- ---- -------
---- ------------------
------- --------------
------ - ------ - ---- --------------
------ - ------ - ---- --------------------
------ - --------- ------------- - ---- ------------------
------ - ----------- - ---- -----------------------
----- ------ - --- --------
-------- ----------------------------------
----------- -
--------
-------- -------------------
-------- ---------------
-------- ---------------------
---
--------
------ ---------------------------
-------- ----------------------------
------------ ------- --------- -- -
-- ------------------------ ------ -----
----- ----- - ---------------------
--- ---- - - ------------ - -- -- ---- -
----- ----- - --------------
-- ------------------------------------ ------ ------------------------------
------ -----------------------------------------------------------------------------------------------
-
------ -----
--
-------------- ------- --------- -- -
-- ------------------------ ------ -----
----- ----- - ---------------------
----- ---------- - --------------------------- ------------------- ----- ---------
----- --------- - -------------------------------------------- -------------------------- ----- ---------
----- - -- - - -----
--------------------------------------------- ----------- - --
----- --------- - -------------------------------------
----- --------- - -------------------------------------------------
----- ----- - --- ---------------------------------------------------- -- --
-------------------------- ------
----- --- - --------------------------------------------- - -----------
--------------------
------ -----------------------------
--
------------ ------------------------ - ------ - ---
------------ ------------------------ - ------ - ---
------------ ------------------------ - ------ - ---
------------ ------------------------ - ------ - ---
------------ ------------------------ - ------ - ---
------------ ------------------------ - ------ - ---
-------------- -------------------------
-------------- ------------------------
--------- ---------------------------
---
-
------ ------ -
------ --- ------
------------------- ------------- -
-----------------------------------------------
-
--
--
------ ------ ---------- -
----- ----- - ----------
----- - ----- - - ---------------
----- ---- - --------------
-- ------ -
----- - -------- --------- - - ------------------
----- ----------- - ---------
-- ------------ --- ------- -- ------------- -
---------------
------------ -
---------- -----------
-
--
- ---- -- ------------ --- ---------- -
---------------
------------ -
---------- -------------
-
--
-
-
-
-
-
--
----- ------- - -
----- ------
-------- -
-
----- ------------
-------- -
-
----- -------
----- ---------- ------ -------
-
-
-
-
-
--------------------------
------------------------
---------
-----
------------
-------
---------
----------
-------------
-------------
--------------
---------------
-----------
--
---------
-------
---------- -
---------- -----
------------ -----
------ -----
-
------------ -
---------- -----
------------ -----
------ -----
-
--------结语
通过本文所提供的学习方法和示例代码，我们可以更加深入地了解 medium-prose 的使用和扩展方式。同时，在项目中我们也可以使用 medium-prose，以便更好地排版和编辑文章内容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668081e8991b448e2968