不得不安利的富文本编辑器,太赞了!

hello,大家好,我是徐小夕 。之前和大家分享了很多可视化零代码前端工程化 的最佳实践,最近也在迭代可视化 文档知识引擎Nocode/WEP。在研究文档编辑器的时候也发现了很多优秀的开源项目,从中吸取了很多先进的设计思想。

接下来就和大家分享一款由facebook 开源的强大的富文本编辑器------Lexical 。目前在github上已有 17.7 k 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的设计模型如下:

这里为了大家更直观的了解它的使用,我分享一个相对完整的代码案例:

javascript 复制代码
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零代码搭建平台, 如果你也感兴趣,欢迎随时交流反馈。

往期精彩

相关推荐
逛逛GitHub31 分钟前
这个 OCR 开源项目天花板,杀疯了。
github
liusheng1 小时前
腾讯地图 SDK 接入到 uniapp 的多端解决方案
前端·uni-app
李兆龙的博客1 小时前
从一到无穷大 #52:Lakehouse 不适用时序?打破范式 —— Catalog 架构选型复盘
架构
拉不动的猪1 小时前
如何处理管理系统中(Vue PC + uni-app 移动端):业务逻辑复用基本方案
前端·javascript·架构
边洛洛1 小时前
next.js项目部署流程
开发语言·前端·javascript
Zsnoin能1 小时前
浏览器连接 新北洋BTP-P33/P32蓝牙打印机,打印 二维码
前端
非凡ghost1 小时前
Syncovery Premium(文件同步软件)
前端·javascript·后端
trsoliu1 小时前
2025前端AI Coding产品与实战案例大盘点
前端·ai编程
杨筱毅1 小时前
【底层机制】Linux内核4.10版本的完整存储栈架构讲解--用户空间到物理设备完整IO路径
linux·架构·1024程序员节·底层机制
云中雾丽1 小时前
react-checkbox的封装
前端