9.6K Star！可扩展的富文本编辑框架！
简介
Lexical 是可扩展框架一个可扩展的 JavaScript 网页文本编辑器框架，强调可靠性、文本可访问性和高性能，编辑旨在提供一流的可扩展框架开发人员体验，轻松地制作原型并充满信心的文本构建功能。结合高度可扩展的编辑架构，Lexical 允许开发人员创建在大小和功能上可扩展的可扩展框架独特文本编辑体验。
Lexical 可以轻松创建复杂的文本文本编辑体验，否则使用内置浏览器工具会非常复杂，编辑比如可以用来构建这些：
Lexical 具有以下特点：
支持以下浏览器：
项目地址：
https://github.com/facebook/lexical
几个重要的概念
编辑器实例编辑器实例是将所有东西连接在一起的核心，可以将 contenteditable DOM 元素附加到编辑器实例上，注册和监听命令，更重要的是，编辑器允许更新其自身的 EditorState。
// 创建编辑器实例
createEditor()编辑器状态编辑器状态表示你希望在 DOM 上显示的内容的底层数据模型，包含两部分：
Lexical 节点树Lexical 选定器对象。编辑器状态一旦创建就不可更改，可以使用以下方法进行创建：editor.update(() => { ...})可以将节点转换或命令处理程序作为钩子挂到 update 方法中，它们将作为更新流程的一部分而被调用，以防止更新的级联/瀑布式更新。
// 获取当前编辑器状态
editor.getEditorState()
// 编辑器状态可以被序列化成 JSON，通过该方法将 JSON 转换回实例对象
editor.parseEditorState()编辑器更新如果想要更改编辑器状态中的某些内容，必须通过更新操作来完成：
editor.update(() => { ...})传递给更新调用的闭包很重要，这是一个拥有活动中编辑器状态完整上下文的高防服务器地方，它公开了对底层编辑器状态节点树的访问。
DOM 协调器Lexical 有自己的 DOM 协调器，它采用一组编辑器状态（总是“当前”和“待定”）并在它们上应用“差异”。然后它使用此差异仅更新 DOM 中需要更改的部分，可以将其视为一种虚拟 DOM，使得 Lexical 能够跳过许多差异比较工作，因为它知道在给定更新中发生了哪些变化。
监听器、节点转换和命令除了调用更新之外，使用 Lexical 完成的大部分工作是通过监听器、节点转换和命令完成的。这些操作都来自编辑器实例，以 register 开头。另一个重要特性是所有注册方法都返回一个函数以轻松取消订阅它们。
const unregisterListener = editor.registerUpdateListener(({ editorState}) => {
console.log(editorState);
});
unregisterListener();命令是用于将 Lexical 中的所有内容链接到一起的通信系统，当按键被触发或其他重要信号出现时，语法在内部调度命令，传入的命令按优先级通过所有处理程序进行传播，类似于浏览器的时间传播机制
// 创建自定义命令
createCommand()
// 发送到编辑器实例
editor.dispatchCommand(command, payload)
// 也可以直接注册命令
editor.registerCommand(handler, priority)一个简单的服务器托管例子
这个例子可以用来创建一个简单的富文本编辑器：
import "./styles.css";
import Editor from "./Editor";
export default function App() {
return (
Rich Text Example
Note: this is an experimental build of Lexical
Other Examples
href="https://codesandbox.io/s/lexical-plain-text-example-g932e"
target="_blank"
rel="noreferrer"
>
Plain text example
);
}