引言

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}><RichTextPlugincontentEditable={<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同名