ProseMirror 能做什么,以及如何实现
Examples of what ProseMirror can do, and how to do it
-
基础
Basics
用示例配置搭建一个最小的富文本编辑器。
Setting up a minimal rich text editor using the example configuration.
-
文档里的恐龙
Dinos in the document
定义一个自定义的文档节点类型,并把它加入 schema。
Defining a custom document node type and adding it to a schema.
-
友好的 Markdown
Friendly Markdown
让用户在 Markdown 与所见即所得(WYSIWYM)两种编辑界面之间切换。
Allow users to switch between a Markdown and WYSIWYM editing interface.
-
工具提示
Tooltip
使用插件视图(plugin view)实现一个悬浮在编辑器选区上方的动态工具提示。
Using a plugin view to implement a dynamic tooltip that hovers over the editor selection.
-
图片上传
Image upload
通过在上传期间创建占位内容,稳健地处理异步编辑操作。
Handling asynchronous editing actions robustly by creating a placeholder during uploads.
-
从零编写 schema
Schema from scratch
不使用基础 schema,为几种不同的文档风格编写自定义文档 schema。
Writing custom document schemas for a few different document styles, without using a base schema.
-
编写自己的菜单
Writing your own menu
构建自定义的编辑器菜单栏。
Building a custom editor menu bar.
-
可折叠节点
Foldable nodes
使用节点视图(node views)和装饰(decorations)实现可折叠节点。
Using node views and decorations to implement collapsible nodes.
更进阶的示例
More advanced examples
-
内嵌代码编辑器
Embedded code editor
在 ProseMirror 实例内部使用代码编辑器组件来表示代码块。
Representing code blocks using a code editor component inside a ProseMirror instance.
-
代码检查(Linter)
Linter
一个会扫描文档中的常见错误,并帮助用户修正它们的编辑器。
An editor that scans the document for common errors and assists the user in correcting them.
-
编辑脚注
Editing footnotes
把脚注实现为带内容的内联节点,并为子文档接上一个独立的编辑器。
Implementing footnotes as inline nodes with content, and wiring up a separate editor for a sub-document.
-
修订跟踪
Track changes
保留文档的修改历史,让用户可以查看并还原其中的单个修改。
Keeping a history of changes to the document, allowing the user to inspect and revert individual ones.
-
协同编辑
Collaborative editing
一个基本可靠的协同编辑器,支持共享注释。
A more or less solid collaborative editor, with support for shared annotations.