Lexical 编辑器使用心得

站长

2024年08月01日 17:09 · 阅读数 55

前言

第一次接触这个框架也是因为公司业务需求，在使用之前，我调研了五款编辑器，最终选择lexical，不过开发过程也是很艰辛，刚好这两天有点空闲时间，记录下，希望可以帮准备使用lexical的同学。

调研的几款编辑器对比

wangeditor

文档地址

优点

中文文档，文档比较友好
功能强大支持节点自定义
社区活跃度不错

缺点

不支持移动端编辑，仅支持查看（我们需要支持移动端）
不再维护更新（社区）

slatejs

文档

优点：

文档写的还不错
功能强大，可拓展性强
社区活跃度也可以
由社区维护
对react友好，对现代浏览器支持友好

缺点：

不是开箱即用，需要二次开发
中文输入支持很差（亲身体验不友好的中文支持）

draft

文档

优点：

功能强大，可拓展性强
文档也可以

缺点：

不再维护
社区不在活跃
官方推荐了新的库（lexical）

lexical

文档

优点：

官方维护中
文档健全
社区活跃高（社区）
浏览器兼容性好（兼容性）
对react友好，支持react17+

缺点：

更新迭代很快，也不能完全算是缺点
浏览器兼容版本
1. Firefox 52+
2. Chrome 49+
3. Edge 79+ (when Edge switched to Chromium)
4. Safari 11+
5. iOS 11+ (Safari)
6. iPad OS 13+ (Safari)
7. Android Chrome 72+

Lexical

定义与背景

Lexical 是由Meta（Facebook的母公司）开发的一个现代化、高性能的文本编辑器框架。作为一个富文本编辑器，Lexical 被设计来优化性能和可扩展能力。这个编辑器框架是为了解决现有文本编辑工具中的通用问题而开发的，诸如性能低下、难以扩展、复杂的交互逻辑处理等。

Lexical的开发背景源于对现有文本编辑技术的局限性的认识。常见的如ContentEditable API存在多样化的兼容性问题和性能瓶颈。为了提供一个更加健壯和灵活的解决方案，Meta创造了Lexical，它不依赖于标准的ContentEditable特性，而是基于自己的架构构建，允许开发者更好地控制编辑器的行为和性能。

核心特性

1. 高性能： Lexical在设计时就将性能视为核心目标之一。通过智能的差异渲染算法和优化的数据结构，Lexical提供了极为流畅的用户体验。它能够快速响应用户输入，即使是在处理大量文本或复杂格式时也不会出现延迟。

2. 可扩展性： Lexical提供了一个灵活的插件系统，允许开发者按照自己的需求添加新的功能。这包括但不限于自定义键绑定、文本样式、组件插入等特性。这种设计使得Lexical不仅限于富文本编辑，甚至可以扩展到代码编辑器等更多场景。

3. 易于集成：尽管Lexical具有复杂的内部实现，但它提供了简洁的API和丰富的文档，使得集成过程相对简单。它支持React框架，并通过提供钩子和组件来与React应用无缝集成，同时也支持非React环境的集成。

4. 功能丰富：除了基本的文本编辑功能外，Lexical还内建了撤销/重做功能、拼写检查、Markdown支持等高级功能。它的架构允许开发者以插件的形式扩展其功能，以适应不同的使用场景。

核心概念

详细文档查看官方文档lexical

1. 编辑器实例（Editor Instance）

编辑器实例是Lexical编辑器的主要接口，它是编辑环境的核心，负责管理编辑器的状态和提供编辑操作的API。每个编辑器实例都独立管理其自己的文档状态。

import { createEditor } from 'lexical';

// 创建一个编辑器实例
const editor = createEditor();

2. 编辑器状态（Editor State）

编辑器状态是一个不可变的数据结构，代表编辑器在特定时间点的完整状态，包括所有文本节点、选择范围、历史记录等信息。状态的不可变性可以方便地实现功能如撤销/重做。

// 获取当前编辑器状态
const state = editor.getState();

// 通过状态可以查询和操作文档数据
const textContent = state.read(() => {
    return $getRoot().getTextContent();
});

3. 编辑器更新（Editor Update）

编辑器更新是对当前编辑器状态的一系列变更，这些变更在更新函数中执行，并且可以一起应用到状态中，确保变更的原子性。

editor.update(() => {
    // 在这个函数内部执行的操作会被合并为一个原子操作
    $getRoot().appendNode($createTextNode("Hello, Lexical!"));
});

4. DOM 协调器（DOM Reconciler）

DOM协调器是负责将编辑器状态的变更高效地反映到DOM上的组件。它使用高效的算法来最小化DOM操作，提高性能。

该机制通常内置于Lexical中，无需开发者直接交互。

5. 监听器（Listener）

监听器用于订阅编辑器事件，如状态变更、用户操作等。通过监听器，可以执行自定义逻辑，如响应文档的更改。

// 注册一个监听器到编辑器
editor.registerUpdateListener(({ editorState }) => {
    console.log("Editor state updated!", editorState);
});

6. 节点转换（Node Transformation）

节点转换是指对文档树中的节点进行操作的方法，这包括添加、删除、修改节点等。节点操作是通过操作函数来实现的，这些函数定义了如何转换节点。

editor.update(() => {
    const root = $getRoot();
    const node = $createTextNode("new text");
    root.append(node);
});

7. 命令（Command）

命令是预定义的操作，它们封装了编辑器操作的逻辑，可以被调用来修改编辑器的状态。命令使得操作逻辑更清晰，易于管理和重用。

import { $insertTextAtSelection } from 'lexical';

// 在当前选择区域插入文本
editor.update(() => {
    $insertTextAtSelection("Inserted text");
});

也可以自定义命令，先注册命令，在进行触发，比如：

import { createCommand } from 'lexical';

// 定义一个自定义命令
export const CREATE_ALIAS_NODE = createCommand('CREATE_ALIAS_NODE');
export default function AliasPlugin() {
    const [editor] = useLexicalComposerContext();

    useEffect(() => {
        editor.registerCommand(
                CREATE_ALIAS_NODE,
                (options) => {
                    console.log('触发到CREATE_ALIAS_NODE命令')
                    return true;
                },
                COMMAND_PRIORITY_EDITOR,
            )
    }, [editor]);
}

// 触发这个命令
editor.dispatchCommand(CREATE_ALIAS_NODE, null);

Lexical节点介绍

LexicalNode

这个节点是整个Lexical的核心节点，也是最底层的节点，其他的节点都是在这个节点之上二次封装，但是这个节点是不对外开放的，所以只能使用定义的类型，而无法自己基于这个节点自定义新的节点 Class: LexicalNode | Lexical

DecoratorNode

装饰器节点，这个节点是基于LexicalNode节点开发出来的节点，类型是不可编辑节点，凡是使用DecoratorNode包裹的内容都是一个整体并且不可编辑，下边是一个基于DecoratorNode实现的一个自定义节点 Class: DecoratorNode

import { $applyNodeReplacement, $isParagraphNode, DecoratorNode } from 'lexical';
// 可以直接引用css，可以当做这就是一个react组件
import './CustomDecoratorNode.scss';

export class CustomDecoratorNode extends DecoratorNode {
    options = {};

    static getType() {
        return 'custom-decorator';
    }

    static clone(node) {
        return new CustomDecoratorNode(node.options, node.__key);
    }

    static importJSON(serializedNode) {
        const node = $createCustomDecoratorNode(serializedNode.options);
        return node;
    }
    static importDOM() {
        return {
            img: node => ({
                conversion: domNode => {
                    const node = $createCustomDecoratorNode(domNode.options);
                    return { node };
                },
                priority: 0,
            }),
        };
    }

    exportDOM() {
        const element = document.createElement('img');
        element.setAttribute('src', this.options.src);
        element.setAttribute('alt', this.options.alt);
        return { element };
    }

    exportJSON() {
        return {
            options: this.options,
            type: this.getType(),
            version: 1,
        };
    }

    constructor(options, key) {
        super(key);
        this.options = Object.assign({}, this.options, options);
    }

    createDOM(config, editor) {
        const span = document.createElement('span');
        return span;
    }

    updateDOM(prev, dom, config) {
        return false;
    }

    decorate() {
        return (
            <span>我是DecoratorNode</span>
        );
    }
}

export function $createCustomDecoratorNode(options) {
    const node = new CustomDecoratorNode(options);
    return $applyNodeReplacement(node);
}

export function $isCustomDecoratorNode(node) {
    return node instanceof CustomDecoratorNode;
}

ElementNode

元素节点，也可以称之为容器节点，所有的div、p标签都属于ElementNode节点，所以ElementNode节点可以包裹其他节点，下边是一个基于ElementNode节点的自定义节点

import { $applyNodeReplacement, ElementNode } from 'lexical';

export class CustomElementNode extends ElementNode {
    options = {};

    static getType() {
        return 'custom-element-node';
    }

    static clone(node) {
        return new CustomElementNode(node.options, node.__key);
    }

    constructor(options, key) {
        super(key);
        this.options = Object.assign({}, this.options, options);
    }

    static importJSON(serializedNode) {
        const node = $createCustomElementNode(serializedNode.options);
        node.setFormat(serializedNode.format);
        node.setIndent(serializedNode.indent);
        node.setDirection(serializedNode.direction);
        return node;
    }

    exportJSON() {
        return {
            ...super.exportJSON(),
            type: this.getType(),
            version: 1,
            options: this.options,
        };
    }

    // 创建节点，只能使用document.createElement
    createDOM() {
        const element = document.createElement('span');

        element.className = this.getClassName();

        return element;
    }

    // element node不用update
    updateDOM(prev, dom) {
        dom.className = this.getClassName();
        return false;
    }

    canMergeWith() {
        return false;
    }

    canInsertAfter() {
        return false;
    }

    canInsertTextBefore() {
        return false;
    }

    canInsertTextAfter() {
        return false;
    }
    canBeEmpty() {
        return false;
    }

    isInline() {
        return true;
    }
}

export const $createCustomElementNode = options => {
    const equationNode = new CustomElementNode(options);
    return $applyNodeReplacement(equationNode);
};

export const $isCustomElementNode = node => {
    return node instanceof CustomElementNode;
};

TextNode

文本节点，也是整个lexical的最小更新单位，所有的文字都应该包裹在TextNode节点中，下边这段是基于TextNode的自定义节点

import { $applyNodeReplacement, TextNode } from 'lexical';

export class CustomTextNode extends TextNode {
    options = {};

    static getType() {
        return 'custom-text-node';
    }

    static clone(node) {
        return new CustomTextNode(node.options, node.__key);
    }

    static importJSON(serializedNode) {
        const node = $createCustomTextNode(serializedNode.options);
        return node;
    }

    static importDOM() {
        return {
            span: () => {
                return {
                    conversion: null,
                    priority: 1,
                };
            },
        };
    }

    constructor(options, key) {
        super(options.text, key);
        this.options = Object.assign({}, this.options, options);
    }

    exportJSON() {
        return {
            text: this.getTextContent(),
            options: this.options,
            type: this.getType(),
            version: 1,
        };
    }

    createDOM(config) {
        const dom = document.createElement('span');
        const child = super.createDOM(config);
        dom.appendChild(child);
        return dom;
    }

    updateDOM(prevNode, dom, config) {
        if (this.getFuncType() === FUNS_TYPE_CURSOR) {
            return true;
        }

        const inner = dom.firstChild;
        if (inner === null) {
            return true;
        }
        super.updateDOM(prevNode, inner, config);

        return false;
    }

    exportDOM() {
        const element = document.createElement('span');
        return { element };
    }
}

export function $createCustomTextNode(options) {
    if (options.text.length > 1) {
        console.error('CustomTextNode 只支持单个字符');
        return null;
    }
    const equationNode = new CustomTextNode(options);
    return $applyNodeReplacement(equationNode);
}

export function $isCustomTextNode(node) {
    return node instanceof CustomTextNode;
}

export function $isCursorNode(node) {
    return $isCustomTextNode(node) && node.getFuncType() === FUNS_TYPE_CURSOR;
}

案例

如果我们想实现一个功能怎么实现呢？比如，就是引入一个编辑器什么都不需要

import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
import CustomDecoratorNode from './nodes/CustomDecoratorNode';
import CustomElementNode from './nodes/CustomElementNode';
import CustomTextNode from './nodes/CustomTextNode';

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

const initialConfig = {
    namespace: 'MyEditor',
    theme: {},
    nodes: [CustomDecoratorNode, CustomElementNode, CustomTextNode], // 这个数组存放的就是刚才咱们自定义的节点，使用前需要先注册
    onError,
};

export default () => {
    return (
        <LexicalComposer initialConfig={initialConfig}>
            <PlainTextPlugin
                // 给这个编辑器设置一个class
                contentEditable={<ContentEditable className='editor-box' />}
                placeholder={
                    <span>请输入输入文本内容</span>
                }
                // 全局错误监听
                ErrorBoundary={LexicalErrorBoundary}
            />

            // 历史记录插件
            <HistoryPlugin />
            // 挂载编辑器实例插件
            <RefPlugin editorRef={editorRef} />
        </LexicalComposer>
    )
}

什么是Lexical插件

Lexical 插件是用于 Lexical 编辑器的扩展，它允许开发者在保持核心包轻量的同时，添加额外的功能和自定义行为。这类插件系统设计的目的主要是为了增加编辑器的可扩展性和可定制性，从而让开发者能够根据具体需求调整编辑器的功能。业务的核心功能以及UI等，都可以使用插件实现，每一个功能都是一个插件；

插件的特点

分离核心与扩展功能：在Lexical中，插件承担所有非核心的编辑功能，比如特定格式的输入支持（如Markdown）、复杂的节点操作，甚至集成第三方服务等。核心库因此可以保持轻量和专注于基础编辑任务。
高度自定义：开发者可以通过创建插件来实现特定的功能，这些功能可以涵盖从简单的格式调整到复杂的交互式元素。例如，一个插件可能允许用户插入和配置图表，而另一个插件则可能增加拼写检查的功能。
易于集成：插件被设计为易于在Lexical环境中添加和配置。开发者可以通过简单的API调用将插件集成到编辑器实例中，而无需对核心代码进行大量修改或重写。
社区共享：由于其模块化自然，插件可以被社区开发，共享和再利用。这样不仅可以减少重复工作，还可以利用社区的力量来增强编辑器的功能并快速适应新的需求。
独立更新和维护：插件可以独立于Lexical核心库进行更新和维护。这意味着添加的新功能或对现有插件的改进可以快速发布，而无需等待编辑器本身的更新。

实现一个简单的插件

以上边的RefPlugin 为例子

import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';

export default function RefPlugin({ editorRef }) {
    const [editor] = useLexicalComposerContext();
    editorRef.current = editor;
    return null;
}

点击复制内容

实现一个点击时将编辑器内容复制出来还是先注册一个插件，然后将这个插件引入刚才的组件内即可使用

import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { useEffect } from 'react';
import { createCommand, COMMAND_PRIORITY_EDITOR, $getRoot } from 'lexical';

// 注册一个命令
export const CLICK_COPY = createCommand('CLICK_COPY');

export default function ClickCopy() {
    const [editor] = useLexicalComposerContext();
    
    useEffect(() => {
        editor.registerCommand(
            CLICK_COPY,
            () => {
                const text = $getRoot().getTextContent();
                console.log('编辑器内容', text);
                return true;
            },
            // 事件注册，优先级
            COMMAND_PRIORITY_EDITOR,
        ),
    });
    
    return (
        <button onClick={() => {
            editor.dispatchCommand(CLICK_COPY)
        }}>点击复制</button>
    )
}

上述是一个简单的编辑器示例，其实所有的功能的实现核心流程都是差不多的，上边介绍了自定义节点，但是没有用到，下边写个简单的案例，现在有个需求，就是我在点击的时候需要把选中的内容做个样式的修改，比如要实现下边的功能：

Lexical 编辑器使用心得

这个功能应该怎么实现呢，先做个拆分，实际上这个功能是将选中的一段文案做了更换，两边增加了两个icon，上边增加了一个按钮，中间的内容不变，这个时候就可以使用我们上边的自定义节点实现

import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { useEffect } from 'react';
import { createCommand, COMMAND_PRIORITY_EDITOR, $getTextContent } from 'lexical';
// 将自定义节点引入
import { $createCustomDecoratorNode, $isCustomDecoratorNode } from '../nodes/CustomDecoratorNode';
import { $createCustomElementNode, $isCustomElementNode } from '../nodes/CustomElementNode';
import { $createCustomTextNode, $isCustomTextNode } from '../nodes/CustomTextNode';

// 注册一个命令
export const CLICK_UPDATE = createCommand('CLICK_UPDATE');

export default function ClickCopy() {
    const [editor] = useLexicalComposerContext();
    
    useEffect(() => {
        editor.registerCommand(
            CLICK_UPDATE,
            () => {
                const text = $getTextContent(); // 获取到选中的内容
                /**
                * 上边介绍了，ElementNode 相当于是一个容器，DecoratorNode是一个整体，TextNode包裹文本
                * 那么这个需求也是，两边有icon中间是内容，上边是一个按钮，内容还可以编辑，而且还是一个整体，所以就是ElementNode，包裹其他两个节点就可以实现
                **/
                
                // 先创建一个容器节点
                const Container = $createCustomTextNode();
                // 创建一个btn
                const btn = $createCustomDecoratorNode();
                // 创建一个文本节点
                // 其实简单的没有其他的要求用lexical提供的TextNode节点也是可以的，这里为了演示
                const text = $createCustomTextNode(text);
                
                // 直接将两个节点添加到这个容器中，这样一个功能就完成了
                Container.append(btn, text);
                
                console.log('编辑器内容', text);
                return true;
            },
            // 事件注册，优先级
            COMMAND_PRIORITY_EDITOR,
        ),
    });
    
    return (
        <button onClick={() => {
            editor.dispatchCommand(CLICK_UPDATE)
        }}>点击替换文本</button>
    )
}

强烈建议开发之前可以多看几次Lexical文档，还有示例，对开发有很大的帮助，我这个也是经历了三次优化才达到的效果，好了今天的分享就到这里了，如果哪位小伙伴有相关的问题可以留言，看到了会及时回复。

转载自:https://juejin.cn/post/7361943620931797044