从 Prosemirror 到 Tiptap：富文本编辑器的演变
在现代 web 开发中，富文本编辑器在内容创作和管理中发挥着越来越重要的作用。Prosemirror 和 Tiptap 是两个备受欢迎的富文本编辑器，本文将讨论它们的特点和区别，并通过代码示例进行介绍。
Prosemirror 的基础
Prosemirror 是由 Mariko Kosaka 和其团队开发的一个强大的文本编辑器框架。它提供了底层的编辑器构建能力，允许开发者根据需求进行高度定制。Prosemirror 的核心是一个“文档模型”，它将用户输入的内容转化为可操作的状态对象。这使得编辑器的各种功能，如撤销、重做、选区管理等，变得更加灵活。
import {EditorState} from "prosemirror-state";
import {EditorView} from "prosemirror-view";
import {Schema} from "prosemirror-model";
// 定义一个简单的文档模式
const schema = new Schema({
nodes: {
doc: {content: "paragraph+"},
paragraph: {
content: "inline*",
toDOM() { return ["p", 0] },
parseDOM: [{tag: "p"}]
},
text: {inline: true, group: "inline"}
}
});
// 创建编辑器的状态和视图
const state = EditorState.create({schema});
const view = new EditorView(document.querySelector("#editor"), {
state,
});
上面的代码示例展示了如何使用 Prosemirror 创建一个简单的编辑器。首先定义了一个文档模式（Schema），然后使用这个模式创建了编辑器的状态和视图。
Tiptap 的兴起
Tiptap 是一个基于 Prosemirror 构建的富文本编辑器，它旨在简化 Prosemirror 的使用。Tiptap 提供了一个现代化的 API 和更多的开箱即用的功能，使得开发者能够更快地集成富文本编辑器。
Tiptap 允许开发者使用 Vue、React 等流行的前端框架进行集成，其高度的灵活性和易用性，使得它在开发者中瞬间流行开来。
下面是一个使用 Tiptap 创建基本编辑器的示例：
import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
// 创建 Tiptap 编辑器
const editor = new Editor({
element: document.querySelector('#editor'),
extensions: [
StarterKit,
],
content: '<p>欢迎使用 Tiptap!</p>',
});
// 监听编辑器更新事件
editor.on('update', () => {
console.log(editor.getHTML());
});
在这个示例中，我们通过 @tiptap/core 和 @tiptap/starter-kit 引入 Tiptap。然后创建一个编辑器实例，指定要挂载的元素和需要的扩展。通过简单的配置，我们就得到了一个功能齐全的富文本编辑器。
Prosemirror 与 Tiptap 的比较
-
学习曲线：Prosemirror 的学习曲线相对较陡，因为你需要深入理解其文档模型。而 Tiptap 则抽象了许多复杂的概念，使得上手变得容易。
-
灵活性：Prosemirror 提供了强大的底层 API 以及高度的定制化能力，非常适合有特定需求的项目。而 Tiptap 则提供了开箱即用的功能，更适合快速开发。
-
社区支持：Tiptap 在 GitHub 和其他开发者社区中有着活跃的生态系统，提供了丰富的扩展和插件。
总结
总的来说，从 Prosemirror 到 Tiptap 的演变展示了富文本编辑器的发展趋势。从基础的功能到高度封装的 API，Tiptap 使得开发者能够更快捷地实现复杂的文本编辑需求。在选择使用哪种工具时，可以根据项目的具体需求、团队的技术栈和开发的复杂度进行合理的判断。无论选择哪种工具，理解其核心原理会有助于更好地利用这些强大的编辑器。
