ProseMirror 简介
ProseMirror 是一个基于 JavaScript 的文本编辑库，它能在浏览器和 Node.js 环境中使用，它提供了灵活的 API 和高性能的渲染和编辑功能。它还提供了一个丰富的插件系统，以便开发者能够扩展编辑器的功能。
简介 prosemirror-menu
prosemirror-menu 是一个增加菜单支持的扩展包，它包含工具栏、快捷键等常用的菜单，可以快速帮助用户完成常用的编辑任务。
安装
您可以使用 npm 包管理器来安装 prosemirror-menu：
npm install --save prosemirror-menu
或者您也可以通过下面的方式手动添加它到您的 HTML 页面：
<script src="https://unpkg.com/prosemirror-menu"></script>
快速上手
首先，我们需要创建一个 ProseMirror 编辑器实例并将其附加到 DOM 元素上。然后，我们需要在编辑器实例中使用 buildMenuPlugin 方法来构建菜单插件，最后通过 menu.fullMenu 属性和 menuBarUpdate 方法将菜单插件与菜单栏绑定。让我们看下面的示例代码：
-- -------------------- ---- ------- ------ - ----------- - ---- -------------------- ------ - ---------- - ---- ------------------- ------ - ------ - ---- -------------------- ------ - ------ - ---- --------------------------- ------ - ------------ - ---- ---------------------------- ------ - --------------- - ---- ------------------- ----- ------ - --- -------- ------ ------------- ------ ------------ --- ----- ----- - -------------------- ------- -------- -------------- ------ ----------------------------------- --- ----- ---- - --- --------------------------------------------- - ----- --- ----- ---- - ------------------------ ----------------------------------------------------------- --------------- -------- ------------- ---
这里，我们使用 exampleSetup 创建了一个基本的编辑器配置并将其与 buildMenuPlugin 方法生成的菜单插件合并。我们然后通过 menu.fullMenu 属性向 #menu 元素添加完整菜单，并将 menuBarUpdate 方法传递给 view 实例以更新菜单栏状态。
好了，现在您的 ProseMirror 编辑器就有了菜单栏支持！让我们试试。
添加自定义项
如果您希望添加自定义项到菜单栏，可以使用 buildMenuItems 方法来构建一个菜单项数组，并将其传递给 menuBarUpdate 方法以添加到菜单栏中。
-- -------------------- ---- -------
------ - -------- - ---- -------------------
----- ---------- - --- ----------
------ ------- ------
---------- --------- ----- -
------------------- ---- -----------
--
---
----- --------- - ------------------------
-- --- ------ ---- -- --- --- -- --- ----- -------- ----
--------------------------------------
--------------- -------- ------------------------ ---现在您已经学习了如何使用 prosemirror-menu 增加菜单支持，如何创建和定制菜单项。如果您想更深入地了解 ProseMirror，可以访问 ProseMirror 官网。
总结
ProseMirror 的出现极大地方便了前端文本编辑开发。而 prosemirror-menu 提供了常用的菜单栏支持，有利于开发人员快速构建一个功能齐全的编辑器。本文提供了 prosemirror-menu 的使用教程，并对一些常用的场景进行了示例演示。希望这篇文章可以对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f730f04a9b7065299ccbc00