Slate.js是一个高度可定制的平台，用于创建富文本编辑器，也被称为所见即所得编辑器。它使你能够创建强大、直观的编辑器，类似于你可能在Medium、Dropbox Paper或Google Docs中使用的编辑器。这些迅速成为许多网络应用的标准功能，而像Slate这样的工具使它们更容易实现，确保你的程序不会被复杂的问题所困扰。
尽管在撰写本文时Slate仍处于测试阶段，但人们自然会问它是否有潜力取代Quill和Draft.js 等更成熟的平台。简短的回答是，现在下结论还为时过早，但这里有几个事实可以证明为什么它可以。
Slate.js的新内容是什么？
为你的React应用程序建立一个富文本编辑器并不容易。随着应用程序规模的扩大，需要一个更有生产力、支持更多的工具。有了Quill这样的框架，开发者必须通过大量的黑客攻击来修复性能问题。但Slate.js的设计是为了通过以下功能使事情变得更简单。
一流的插件
其他基于React的富文本编辑器，如Quill和Draft提供插件，为用户提供额外的功能。另一方面，Slate将插件视为一流的实体；基本的编辑功能甚至被设计成一个独特的插件。这意味着你可以完全改变编辑体验，允许你开发复杂的编辑器，如Medium或Dropbox，而不必与库的标准假设作斗争。
与DOM并行
DOM作为Slate的数据模型的基础。文档是一个分层的树，它采用了选择和范围，并暴露了所有通常的事件处理程序。这意味着复杂的功能，如表格和嵌套的块状引文是可能的。Slate可以执行几乎所有你能在DOM中做的事情。
嵌套文档模型
Slate的文档模型，就像DOM本身，是一个分层的、递归的树。根据你的使用情况，你可以纳入复杂的组件，如表格和嵌套的块状引文，正如我们上面所提到的，或者你可以通过仅仅采用单一层次结构来保持简单。
无状态视图和不可改变的数据
Slate编辑器是无状态的，通过React和Immutable.js利用不可变的数据结构，使得推理代码和编写插件更加容易。为了比较，Quill处理自己的变化，例如，不允许用户阻止编辑。Quill不能阻止变化，但它会在值与现有状态不同时覆盖内容。
无模式的核心
Slate的核心逻辑对你要改变的数据结构不做任何假设，所以当你需要超越最基本的用例时，库中没有任何假设会让你猝不及防。这在与Quill和Draft.js合作时可能会导致严重的性能问题。
清晰的核心边界
有了插件优先的设计和无模式的核心，"核心 "和 "自定义 "之间的界限就更明显了，这意味着核心体验不会在边缘案例中陷入困境。
直观的修改
石板文本是用 "变化 "来编辑的，它的目的是高层次的、直接的创建和理解，允许自定义功能尽可能地表达。这极大地提高了你对你的代码进行推理的能力。
协作就绪的数据模型
Slate的数据格式是为了让协作编辑建立在上面，所以如果你决定让你的编辑器成为协作的，开发者不必重新考虑一切。
Slate.js的实际应用
现在让我们通过建立一个简单的富文本编辑器来看看Slate的操作。为了开始，我们需要创建一个新的React项目；我们将使用Create React App来完成。运行下面的命令。
npx create-react-app rich-text-editor
你可以在安装必要的软件包时泡杯咖啡。安装完成后，用下面的命令安装我们的Slate实现所需的三个包。
npm i --save slate slate-react slate-history
然后，启动该应用程序。
npm start
接下来，打开App.js 组件并导入我们安装的软件包。
import React, { useMemo, useState } from 'react'
import { createEditor } from 'slate'
import { Slate, Editable, withReact } from 'slate-react'
下一步是创建一个新的Editor 对象。我们将使用useEditor 钩子来使我们的编辑器在不同的渲染中保持稳定。然后，我们将创建一个状态来处理我们编辑器中的输入，有一个段落和一些假文本。
const editor = useMemo(() => withReact(createEditor()), [])
const [value, setValue] = useState([
{
type: 'paragraph',
children: [{ text: 'I am a Slate rich editor.' }],
},
])
现在，让我们通过渲染Slate上下文提供者来跟踪我们的Slate编辑器，它的插件，它的值，它的选择，以及对编辑器的所有改变。然后，在我们的React上下文中渲染<Editable> 组件。
<Editable> 组件的行为类似于React中的contentEditable 组件。它将为最近的editor 上下文渲染一个可编辑的富文本文档，只要它被渲染。用下面的代码修改渲染方法。
return (
<Slate
editor={editor}
value={value}
onChange={newValue => setValue(newValue)}
>
<Editable />
</Slate>
)
现在你有了你的文本编辑器，在你喜欢的浏览器中测试一下localhost:3000 上的应用程序。
为什么是Slate.js？
Slate是为了解决开发者在使用Quill和Draft.js构建大规模应用程序时可能遇到的挑战而创建的。它被设计为通过调整来改变文档的创建，这对于开发高级行为是必要的。事实证明，使用Quill或Draft时，这往往过于复杂。
毫无疑问，Quill是一个随心所欲的编辑器；你不需要改变任何东西就可以开始使用。然而，如果你超越了最基本的使用情况，你可能会遇到某些性能问题，这已经成为一个公认的 缺陷。
另一方面，Slate的设计是为了促进实际的生产力，为你提供灵活性，让你做任何选择。Slate提供了与Markdown、Google Docs和Medium开箱即用的复杂集成，以实现与队友的无缝协作。
它允许你执行复杂的操作，如添加表格，并在这些表格中插入图片和子弹头列表。Slate.js使序列化为HTML、Markdown和其他格式成为可能。简单的任务，如将文档转换为HTML或Markdown，由于少了模板代码而变得容易得多。
综上所述，Slate.js绝对值得一试。
Slate会取代Quill和Draft.js吗？
说实话，情况可能不是这样的。Slate.js仍处于测试阶段，这意味着稳定版本仍未发布。你的应用程序可能会崩溃，或者一些功能可能无法正常工作。
同样，尽管Quill和Draft.js有不完善之处，但它们在生产中已经有很长一段时间了。尽管我们可能希望如此，但在编程语言方面，没有完美的东西。除此之外，一个组织要在短时间内将其系统改变为全新的东西并不容易。
归根结底，Slate还没有被严格地用于生产级的应用，而且它还没有被证明可以处理那些暴露出Quill和Draft效率低下的模糊任务。
也许在一年左右的时间里，我们会开始听到公司和开发者介绍他们使用Slate的经验--他们如何克服Quill和Draft的已知缺陷。也许它背后的社区会对它进行修改，使之成为一个真正可行的解决方案。它将取代Quill和Draft吗？我们现在还不能说。
The postWhat is Slate.js, and will it replace Quill and Draft.js?appeared first onLogRocket Blog.
