Meta的开源力作：Lexical框架，富文本的未来

引言

Lexical 是一个由 Facebook（现在称为 Meta）开源的可扩展 JavaScript Web 文本编辑器框架。

这个框架特别强调了三个核心特性：可靠性、可访问性以及高性能。

旨在为开发者创造最优的开发体验。

以下是 Lexical 框架的几个关键特点和能力：

可扩展性：

Lexical 的设计允许开发者轻松地创建从简单到极为复杂的文本编辑器。

其架构高度可扩展，意味着你可以根据需求添加自定义功能，比如富文本格式、Markdown 支持、自定义UI组件（如工具栏）等，而这一切都可以通过扩展插件来实现。

可靠性：

框架的核心关注点之一是确保编辑器在各种条件下都能稳定工作，减少崩溃或数据丢失的风险，这对于提升用户体验至关重要。

可访问性：

Lexical 内置了对可访问性的支持，确保创建的编辑器能够被广泛的用户群体所使用，包括那些依赖辅助技术的用户。

高性能：

优化的内部机制使得 Lexical 能够处理大规模的文本编辑任务而不牺牲响应速度，这对于提升用户交互体验非常关键。

与React集成：

虽然 Lexical 并不仅限于 React，但它提供了与 React 深度集成的能力，使得在 React 应用中使用Lexical变得非常直接。同时，理论上它也可以支持任何基于DOM的前端库，只要有相应的绑定实现。

开发者体验：

Lexical 致力于简化开发流程，让开发者能够快速原型设计并充满信心地构建功能。这包括清晰的文档、丰富的示例代码以及易于理解的 API 设计。

模块化和可定制：

框架的模块化设计意味着你可以按需加载功能，只引入你真正需要的部分，从而保持最终应用的轻量级。

Lexical 的核心尽量做到最小化。

Lexical 并不直接关注单体编辑器倾向于做的事情——例如 UI 组件、工具栏或富文本功能。

相反，这些功能的逻辑可以通过插件接口包含在内，并在需要时使用。

这确保了极大的可扩展性并将代码大小保持在最低限度。

github：https://github.com/facebook/lexical

官方 playground 预览：

功能介绍

基本功能

基本功能包括：多级标题、字体、撤销、回退、字体大小、加粗、斜体、链接、字体颜色、字体背景、图片、表格、待办、有序列表、无序列表、水平线、引用

特色功能

分页

DOM结构树（命令模式）

绘图

便签

安装

React

将React放第一是因为官方在UI层已基于React封装好了所有的组件，开箱即用。

安装 lexical 核心包与 lexical/react 扩展包：

npm install --save lexical @lexical/react

创建一个 React 组件，添加如下内容：

    import {$getRoot, $getSelection} from 'lexical';
    import {useEffect} from 'react';

    import {AutoFocusPlugin} from '@lexical/react/LexicalAutoFocusPlugin';
    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 {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';

    function onError(error) {
      console.error(error);
    }

    function Editor() {
      const initialConfig = {
        namespace: 'MyEditor',
        theme:{
    		// 自定义各组件样式名
    	},
        onError,
      };

      return (
        <LexicalComposer initialConfig={initialConfig}>
          <RichTextPlugin
            contentEditable={<ContentEditable />}
            placeholder={<div>请输入内容...</div>}
            ErrorBoundary={LexicalErrorBoundary}
          />
          <HistoryPlugin />
          <AutoFocusPlugin />
        </LexicalComposer>
      );
    }

这里还有个坑，如果大家在这时通过浏览器预览组件，会发现页面上就只有一个输入框。

这是因为官方团队并未将 lexical 需要的全局 css样式 封装进组件，需要大家手动添加，样式文件地址：

https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/index.css

这里在列举一些常用组件，大家可以按需引入:

<ToolbarPlugin /> // 工具栏
<DragDropPaste /> // 拖放粘贴
<AutoFocusPlugin /> // 自动聚焦
<AutoLinkPlugin /> // 自动链接
<ListPlugin /> // 列表
<CheckListPlugin /> // 代办
<CodeHighlightPlugin /> // 代码块
<TabIndentationPlugin /> // 缩进
<LinkPlugin /> // 链接
<HorizontalRulePlugin /> // 水平线
<PageBreakPlugin /> // 翻页
<ImagesPlugin /> // 图片
<TablePlugin /> // 表格

上述提到的组件均可在 lexical-playground 中找到，附上地址：

https://github.com/facebook/lexical/blob/main/packages/lexical-playground

效果如下：

Vue

官方并没有提供 Vue 版本，不过在 github 上已经有开发者使用 TS 完成了其 Vue 版本的基础封装。

github: https://github.com/wobsoriano/lexical-vue

安装：

npm install lexical lexical-vue # or pnpm or yarn

组件的使用都大同小异，这里省略了部分，仅保留核心代码示意：

    <script setup lang="ts">
    import {
      ...
      LexicalRichTextPlugin,
    } from 'lexical-vue'
    </script>

    <template>
      <ToolbarPlugin />
      <div class="editor-container">
        <div className="editor-inner">
          <LexicalRichTextPlugin>
            <template #contentEditable>
              <div class="editor-scroller">
                <div class="editor">
                  <ContentEditable />
                </div>
              </div>
            </template>
            <template #placeholder>
              <div class="editor-placeholder">
                Enter some text...
              </div>
            </template>
        </div>
      </div>
    </template>

vue版本的 playground 地址：

https://github.com/wobsoriano/lexical-vue/tree/main/playground

原生JS

使用原生JS需要自己来完成UI层的所有工作，如果大家在UI上没有定制化需求，不建议使用原生。

这里附上原生接入方式；https://lexical.dev/docs/getting-started/quick-start

扩展

Lexical 的核心在于其插件架构。

每个功能（如自动完成、拼写检查、格式化等）通常都是作为插件存在的。

开发者可以通过创建或修改插件来增加新功能或调整现有行为。

创建自定义插件

定义插件类：首先，你需要创建一个新的插件类，继承自 Lexical 提供的基类，如 LexicalPlugin 。

实现生命周期方法：大多数插件需要实现特定的生命周期方法，如初始化(initialize)、订阅编辑器事件(subscribe)和清理(dispose)。

注册插件：在编辑器实例化时，通过编辑器的配置选项将你的插件注册进去。

这里提供一个官方的React扩展示例：

function MyOnChangePlugin({ onChange }) {
  const [editor] = useLexicalComposerContext();
  useEffect(() => {
    return editor.registerUpdateListener(({editorState}) => {
      onChange(editorState);
    });
  }, [editor, onChange]);
  return null;
}

function Editor() {
  // ...
  const [editorState, setEditorState] = useState();
  function onChange(editorState) {
    const editorStateJSON = editorState.toJSON();
    setEditorState(JSON.stringify(editorStateJSON));
  }

  return (
    <LexicalComposer initialConfig={initialConfig}>
      {/*...*/}
      <MyOnChangePlugin onChange={onChange}/>
    </LexicalComposer>
  );

总结

我们介绍了 lexical 的 React、Vue和原生JS的安装，并按照接入的难易程度推荐了使用方式，然后了解基本的插件扩展流程，相信大家对lexical已经有了一定的了解。

本文是对Lexical的基本介绍，所以文中并未提到lexical中例如核心生命周期、事件的派发与注册、协同扩展等，大家在需要的场景可自行研究。

– 欢迎点赞、关注、转发、收藏【我码玄黄】，gonghao同名