我正在参加「掘金·启航计划」
Slate 简介
Slate.js 是一个强大的富文本编辑器框架，是目前比较完美的富文本解决方案。但它并不是开箱即用，许多功能需要用户进行二次开发，因此，Slate 编辑器拓展性很好，只要你可以，甚至可以将它玩出花来。
为什么是它？
- 十分轻量：就像上面说的，Slate.js 不是开箱即用的，几乎没有自带任何功能，它只是提供了一个插件的机制给开发者自由去实现想要的功能
- 协同编辑：早期的 Web 富文本编辑器没有考虑到多人协同，Slate.js 的设计对协同编辑更为友好
- 脱离视图：Slate.js 脱离了视图层，聚焦到编辑器本身，作为开发者更容易上手
安装依赖
在这里我们默认为 React 框架，下面的例子假设你已经提前安装好了了 react 和 react-dom
安装 slate 相关依赖
yarn add slate slate-react
安装好后，请导入
import React, { useState } from 'react'
import { createEditor } from 'slate'
import { Slate, Editable, withReact } from 'slate-react'
实现一个简单的 Slate 编辑器
接下来我们创建一个 editor 对象，为了让编辑器组件在渲染中保持稳定，我们通过 useState hook 来创建它。然后渲染 Slate Context Provider，该 Provider 组件会跟踪编辑器的变化，比如编辑器的插件、值、文本选择等的任何更改。前提是它必须包裹 <Editable> 组件。
<Editable> 组件类似 contenteditable 可编辑属性，它会为最近的编辑器上下文提供一个可编辑的富文本输入框。
const initialValue = []
const App = () => {
// 创建一个在渲染中保持不变的 slate editor 对象
const [editor] = useState(() => withReact(createEditor()))
return (
<Slate editor={editor} value={initialValue}>
<Editable />
</Slate>
)
}
至此，一个简单的 Slate 编辑器就完成了。但目前我们给到编辑器的初始值是一个空数组，所以页面上看不到任何东西。
Slate Editor 的值类型是一个简单的 JSON 对象，在这里我们定义一个携带一些文本的段落。接下来，我们给编辑器添加一些初始值：
const initialValue = [
{
type: 'paragraph',
children: [{ text: '这是一段初始的文字' }],
},
]
添加完一些简单的美化样式，最终我们实现了一个简单的富文本编辑器，接下来就可以在上面自由地输入文字啦~
