lexical介绍修订版本明细

源

采纳

编辑于 2月前

半兽人

lexical介绍

React
组件

Lexical 是 Meta（原 Facebook）开源的下一代富文本编辑器框架，用来在 Web 中构建高性能、可扩展的 WYSIWYG（所见即所得）编辑器或类似 Notion、Google Docs 的文本编辑体验。

它强调 可组合、可扩展、类型安全、性能高，底层采用类似 React Fiber 的机制管理编辑状态。

1. 核心特点

高性能
- 基于 React + 自研数据结构，支持大文档编辑
- 只更新有变化的部分（类似 React 的虚拟 DOM diff）
可扩展
- 通过插件（Plugin）添加功能，如 Markdown、历史记录、表格、代码块等
类型安全
- 基于 TypeScript 开发，编辑器节点、命令都有类型约束
模块化架构
- 分为核心编辑器、节点系统、插件系统
- 用户可完全自定义 Node（如图片、表格、代码高亮块）
支持受控或非受控
- 可用作受控表单输入，也可作为自由编辑器

2. 安装

npm install lexical

通常还会用到官方 React 绑定：

npm install @lexical/react

3. 基本用法

1) 创建一个最简单的编辑器

import React from 'react';
import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';

function Editor() {
  const initialConfig = {
    namespace: 'MyEditor',
    onError: (error) => console.error(error),
    theme: {
      paragraph: 'editor-paragraph',
    },
  };

  return (
    <LexicalComposer initialConfig={initialConfig}>
      <RichTextPlugin
        contentEditable={<ContentEditable className="editor-input" />}
        placeholder={<div className="editor-placeholder">输入点什么...</div>}
      />
      <HistoryPlugin />
      <OnChangePlugin onChange={(editorState) => {
        editorState.read(() => {
          // 读取当前编辑器内容
        });
      }} />
    </LexicalComposer>
  );
}

export default Editor;

说明：

LexicalComposer 是编辑器的核心容器

RichTextPlugin 提供基础的段落、加粗、列表等功能

HistoryPlugin 提供撤销/重做

OnChangePlugin 监听内容变化

4. 插件（Plugin）机制

Lexical 的功能几乎都通过插件提供：

基础功能：
- HistoryPlugin（撤销/重做）
- AutoFocusPlugin（自动聚焦）
- ClearEditorPlugin（清空内容）
输入扩展：
- MarkdownShortcutPlugin（支持输入 Markdown 自动转格式）
- ListPlugin（有序/无序列表）
- LinkPlugin（超链接）
富文本增强：
- CodeHighlightPlugin（代码高亮）
- TablePlugin（表格编辑）
- ImagesPlugin（图片插入）

5. 节点（Node）系统

Lexical 的核心是 Node-based architecture：

TextNode：普通文字节点
ElementNode：容器节点（如段落、列表、表格）
DecoratorNode：自定义渲染的复杂节点（如图片、React 组件）

你可以自定义 Node 来实现类似 Notion 的可拖拽模块。

6. 应用场景

在线文档编辑器（类似 Notion、Google Docs）
富文本输入框（博客、评论、社区发帖）
低代码/知识管理平台
实时协作编辑器（可与 Yjs、WebSocket 集成）

7. 优缺点

优点：

高性能（比 Draft.js、Slate 更快）
模块化、可扩展
官方 React 支持
强类型 + 现代化架构

缺点：

文档和生态相对较新，社区插件不如 Quill/Slate 丰富
学习曲线比 Draft.js 略高（需理解 Node/EditorState）

8. 对比其他富文本编辑器

特性	Draft.js	Slate.js	Quill	Lexical
性能	中	中	中	高
React 友好	高	高	中	高
可扩展性	中	高	低	高
学习曲线	中	高	低	中
官方维护状态	停滞	活跃	一般	Meta 支持

总结：

Lexical = Meta 新一代富文本框架，面向现代 React 和大文档场景
优势：高性能、插件化、强类型
适合：在线文档、笔记、低代码编辑器等场景

预览