9.6K Star！可扩展的富文本编辑框架！-富文本编辑器框架

简介

Lexical 是一个可扩展的 JavaScript 网页文本编辑器框架，强调可靠性、可访问性和高性能，旨在提供一流的开发人员体验，轻松地制作原型并充满信心的构建功能。结合高度可扩展的架构，Lexical 允许开发人员创建在大小和功能上可扩展的独特文本编辑体验。

Lexical 可以轻松创建复杂的文本编辑体验，否则使用内置浏览器工具会非常复杂，比如可以用来构建这些：

比 a 标签有更多要求的简单纯文本编辑器 textarea，例如定义表情符号、链接、主题标签等功能
更复杂的富文本编辑器，可用于在博客、社交媒体、消息传递应用程序上发布内容
一个成熟的 WYSIWYG 编辑器，可用于 CMS 或富文本编辑器
结合上述特点的实时协作文本编辑

Lexical 具有以下特点：

可靠性。Lexical 由每个附加到单个内容可编辑元素的编辑器实例组成，一组编辑器状态代表编辑器在任何给定时间的当前和待定状态。
可访问性。Lexical 遵循 WCAG 中建立的最佳实践，并与屏幕阅读器和其他辅助技术兼容
效率高。它不直接关注 UI 组件、工具栏或富文本功能和 markdown，这些功能的逻辑可言通过插件接口包含在内

支持以下浏览器：

Firefox 52+
Chrome 49+
Edge 79+
Safari 11+
iOS 11+ (Safari)
iPad OS 13+ (Safari)
Android Chrome 72+

项目地址：

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 (
    <div className="App">
      <h1>Rich Text Example</h1>
      <p>Note: this is an experimental build of Lexical</p>
      <Editor />
      <div className="other">
        <h2>Other Examples</h2>
        <ul>
          <li>
            <a
              href="https://codesandbox.io/s/lexical-plain-text-example-g932e"
              target="_blank"
              rel="noreferrer"
            >
              Plain text example
            </a>
          </li>
        </ul>
      </div>
    </div>
  );
}