slate

机器翻译正文由机器翻译自项目原始文档（英文），排版经程序统一处理，可能存在偏差，请以原项目仓库为准。

一个完全可定制的框架
用于构建富文本编辑器。

为什么？ · 原则 · 演示 · 示例 · 文档 · 贡献！

Slate 让你可以构建丰富且直观的编辑器，就像 Medium、Dropbox Paper 或 Google Docs 中的编辑器——这些正成为 Web 应用的基本标配——而不会让你的代码库陷入复杂性。

它之所以能做到这一点，是因为所有逻辑都是通过一系列插件实现的，因此你永远不会被“核心”中包含或不包含的内容所限制。你可以把它看作是一个可插拔的 Medium 实现，建立在 React 之上。它的灵感来源于像 Draft.js、Prosemirror 和 Quill 这样的库。

🤖 Slate 目前处于测试阶段。 它的核心 API 现在可以使用，但你可能需要为高级用例提交改进请求，或者修复一些 bug。它的一些 API 尚未“最终确定”，随着我们发现更好的解决方案，可能会有破坏性更改。目前没有 Medium 发布计划，我们仍在完善架构。

🤖 Slate 也是由贡献者驱动的。 它没有任何大公司的支持，这意味着所有贡献都是自愿的，由真正需要的人完成。如果你需要改进、添加或修复某些功能，请自己贡献，否则没人会去做。如果你想成为更活跃的维护者，请在 Slack 频道告诉我们。

为什么？

为什么要创建 Slate？嗯…… (注意：本节包含我一些的观点!)

在创建 Slate 之前，我尝试了很多其他的富文本库——Draft.js、Prosemirror、Quill 等。我发现，虽然让简单示例工作起来很容易，但一旦你开始尝试构建类似 Medium、Dropbox Paper 或 Google Docs 的东西，就会遇到更深层次的问题……

• 编辑器的“模式”是硬编码的且难以定制。 像加粗和斜体这样的功能可以开箱即用，但评论、嵌入内容，甚至更多领域特定的需求怎么办？

• 以编程方式转换文档非常复杂。 作为用户的操作也许能奏效，但进行编程修改，这是构建高级行为的关键，却变得不必要地复杂。

• 序列化为 HTML、Markdown 等似乎是事后想的。 像将文档转换为 HTML 或 Markdown 这样的简单操作涉及大量模板代码，而这却是非常常见的用例。

• 重新发明视图层显得低效且有限。 大多数编辑器都是自己实现视图，而不是使用现有技术如 React，因此你必须学习一个全新的系统及新的“陷阱”。

• 协作编辑从一开始就没有被设计好。 通常，编辑器内部的数据表示使得用于实时协作编辑几乎不可能，除非基本上重写编辑器。

• 代码库是单片的，而不是小而可复用的。 许多编辑器的代码库通常不暴露可以被开发者复用的内部工具，导致不得不重新发明轮子。

• 构建复杂的嵌套文档是不可能的。 许多编辑器是围绕简单的“平面”文档设计的，使得表格、嵌入内容和标题等内容难以理解，有时甚至不可能。

当然，并不是每个编辑器都有所有这些问题，但如果你尝试过使用其他编辑器，你可能遇到过类似的问题。为了规避其 API 的限制并实现你想要的用户体验，你必须采用非常笨拙的方法。有些体验根本是不可能实现的。

如果这些听起来很熟悉，你可能会喜欢 Slate。

这就引出了 Slate 如何解决所有这些问题……

原则

Slate试图通过一些原则来解决“为什么？”的问题：

1. 一流插件。 Slate最重要的部分是插件是一流的实体。这意味着你可以_完全_自定义编辑体验，构建像Medium或Dropbox一样的复杂编辑器，而无需与库的假设作斗争。

2. 无模式核心。 Slate的核心逻辑对你将要编辑的数据模式几乎没有假设，这意味着当你需要超越最基本的用例时，库中没有内置的假设会让你陷入困境。

3. 嵌套文档模型。 Slate使用的文档模型是嵌套的递归树，就像DOM本身。这意味着像表格或嵌套块引用这样的复杂组件对于高级用例是可能的。但只使用单层层级也可以让它保持简单。

4. 与DOM平行。 Slate的数据模型基于DOM——文档是嵌套的树，它使用选择和范围，并且暴露所有标准的事件处理程序。这意味着像表格或嵌套块引用这样的高级行为是可能的。几乎你在DOM中能做的事情，在Slate中也都能做。

5. 直观的命令。 Slate文档通过“命令”进行编辑，这些命令设计为高层次的，并且极其直观易写易读，以便自定义功能尽可能有表现力。这大大提高了你对代码的理解能力。

6. 协作友好的数据模型。 Slate使用的数据模型——特别是操作如何应用于文档——被设计为允许在其上实现协同编辑，因此如果你决定让编辑器支持协作，无需重新考虑一切。

7. 清晰的“核心”边界。 通过插件优先的架构和无模式核心，更清楚地界定了“核心”和“自定义”之间的边界，这意味着核心体验不会因边缘情况而变得复杂。

演示

查看所有示例的实时演示！

示例

为了了解你如何使用 Slate，可以看看几个示例：

• 纯文本 — 展示最基本的情况：一个被美化的 <textarea>。
• 富文本 — 展示你期望的基本编辑器功能。
• Markdown 预览 — 展示如何为类似 Markdown 的快捷方式添加键处理器。
• 内联元素 — 展示如何在内联节点中包裹文本并关联数据。
• 图片 — 展示如何使用无文本（void）节点添加图片。
• 悬浮工具栏 — 展示如何实现一个悬浮工具栏。
• 表格 — 展示如何嵌套块来呈现更高级的组件。
• 粘贴 HTML — 展示如何使用 HTML 序列化器处理粘贴的 HTML。
• 提及 — 展示如何使用内联无文本节点实现简单的 @ 提及。
• 查看所有示例...

如果你有一个展示常用用例的示例想法，请提交 pull request！

文档

如果你是第一次使用 Slate，请查看 入门指南 和 概念 以熟悉 Slate 的架构和思维模型。

• 操作指南
• 概念
• 常见问题解答
• 资源

如果这些还不够，你随时可以 阅读源代码，代码中有大量注释。

文档还有其他语言的翻译版本：

如果你正在维护翻译版本，欢迎在这里提交拉取请求！

软件包

Slate 的代码库是一个 Yarn 工作区的单仓库，通过 Changesets 发布。它由少量软件包组成——尽管你并不总是会使用它们全部。它们包括：

贡献中！

所有贡献都非常欢迎！查看贡献说明了解更多信息！

Slate 是 MIT 许可证 的。