Lexical 常见问题集合

Created 2/15/2023

Updated 8/26/2023

Lexical 常见问题集合

节点

查询与获取节点

如果已知节点的 NodeKey 唯一标识符可以使用 $getNodeByKey(key) 方法获取该节点实例
要查看范围选区的某个端点位于哪个节点中，可以调用 Point.getNode() 方法（其中 Point 是端点的实例，可以是 RangeSelection 的范围选区 anchor 锚点，也可以是 focus 焦点）
基于 DOM 元素获取相应的节点，可以使用方法 $getNearestNodeFromDOMNode(startingDOM, editorState?) 第一个参数是 DOM 元素，第二个（可选）参数是编辑器状态

节点内容

要获取节点纯文本内容，可以调用 LexicalNode.getTextContent() 方法；如果要查看纯文本的内容的长度（字符的多少），可以调用 LexicalNode.getTextContentSize() 方法

节点样式

使用 addClassNamesToElement(element, config.theme.propertyName) 方法将该类名添加到 DOM 元素上（该方法从 @lexical/utils 模块导出）

选区

调用方法 $setSelection(selection) 以编程式的方法为编辑器设置选区
调用方法 selection.anchor.getNode() 或 selection.focus.getNode() 获取选区的端点所在的节点

指令

如果要监听任意按键，可以通过为（内置）指令 KEY_DOWN_COMMAND 设置处理函数来实现

ts

import { KEY_DOWN_COMMAND, COMMAND_PRIORITY_LOW } from 'lexical';

editor.registerCommand(KEY_DOWN_COMMAND, (event: KeyboardEvent) => {
    // Handle event here
    return false;
  },
  COMMAND_PRIORITY_LOW // 相当于 1
)

其他

清空内容：可以在根节点调用 clear() 方法

ts

editor.update(() => {
  $getRoot().clear();
})

Copyright © 2025 Ben

Theme BlogiNote

Icons from Icônes