不得不安利的富文本编辑器，太赞了！
hello，大家好，我是徐小夕。之前和大家分享了很多可视化，零代码和前端工程化的最佳实践，最近也在迭代可视化文档知识引擎Nocode/WEP。在研究文档编辑器的时候也发现了很多优秀的开源项目，从中吸取了很多先进的设计思想。
接下来就和大家分享一款由facebook开源的强大的富文本编辑器——Lexical。目前在github上已有 17.7k star。
github地址： https://github.com/facebook/lexical
往期精彩
Lexical 基本介绍
Lexical 是一个可扩展的 JavaScript 文本编辑器框架，聚焦于可靠性、可访问性和性能。旨在提供一流的开发人员体验，因此我们可以轻松地进行文档设计和构建功能。
结合高度可扩展的架构，Lexical 允许开发人员创建独特的文本编辑体验，功能可以二次扩展，比如支持多人协作，定制文本插件等。
demo演示
我们可以使用它实现类似 Nocode/WEP 文档引擎的编辑体验。
我们可以轻松的选中文本来设置文本样式：
同时还能对文本内容进行评论：
当然插入表格和代码等区块也是支持的：
接下来就和大家一起分享以下它的设计思路。
设计思想
Lexical 的核心是一个无依赖的文本编辑器框架，允许开发人员构建强大、简单和复杂的编辑器表面。Lexical 有几个值得探索的概念：
- 编辑器实例：编辑器实例是将所有内容连接在一起的核心。我们可以将一个 contentEditable DOM 元素附加到编辑器实例，并注册侦听器和命令。最重要的是，编辑器允许更新其 EditorState。我们可以使用 createEditor() API 创建编辑器实例，但是在使用框架绑定（如@lexical/react）时，通常不必担心，因为这会为我们自动处理。
- 编辑器状态：编辑器状态是表示要在 DOM 上显示的内容的底层数据模型。编辑器状态包含两部分：
- Lexical 节点树
- Lexical 选择对象
- 编辑器状态一旦创建就是不可变的，为了更新它，我们必须通过 editor.update(() => {...}) 来完成。但是，也可以使用节点变换或命令处理程序“挂钩”到现有更新中 - 这些处理程序作为现有更新工作流程的一部分被调用，以防止更新的级联/瀑布。我们还可以使用 editor.getEditorState() 检索当前编辑器状态。
- 编辑器状态也完全可序列化为 JSON，并可以使用 editor.parseEditorState() 轻松地将其序列化为编辑器。
- 读取和更新编辑器状态：当想要读取和/或更新 Lexical 节点树时，我们必须通过 editor.update(() => {...}) 来完成。也可以通过 editor.getEditorState().read(() => {...}) 对编辑器状态进行只读操作。
Lexical的设计模型如下：
这里为了大家更直观的了解它的使用，我分享一个相对完整的代码案例：
import {$getRoot, $getSelection, $createParagraphNode, $createTextNode, createEditor} from 'lexical';
// 第一步，创建编辑器实例
const config = {
namespace: 'MyEditor',
theme: {
...
},
onError: console.error
};
const editor = createEditor(config);
// 第二步，更新编辑器内容
editor.update(() => {
const root = $getRoot();
const selection = $getSelection();
// 创建段落节点
const paragraphNode = $createParagraphNode();
// 创建文本节点
const textNode = $createTextNode('Hello world');
// 添加文本节点到段落
paragraphNode.append(textNode);
// 插入元素
root.append(paragraphNode);
});
通过以上两步，我们就实现了文本编辑器的创建和更新，是不是非常简单？
如果大家对这款编辑器感兴趣，也欢迎在github上学习使用，也欢迎在留言区和我交流反馈。
github地址： https://github.com/facebook/lexical
最后
后续我还会持续迭代 Nocode/WEP 项目， 让它成为最好用的可视化 + AI知识库，同时也会持续迭代和分享H5-Dooring零代码搭建平台， 如果你也感兴趣，欢迎随时交流反馈。
往期精彩
来源：juejin.cn/post/7377662459921006629
