如何使用Lexical.js监听Ctrl/Cmd+S这类快捷键组合？

你之前的代码问题在于只注册了自定义命令，但没有将其与按键触发逻辑关联起来。Lexical不会自动把按键事件绑定到自定义命令上，需要通过以下两种方式实现：

方法一：使用useLexicalKeyboardListener钩子（React环境） #

这是React项目中最便捷的方式，通过Lexical提供的钩子直接监听键盘事件：

import { useLexicalEditor, useLexicalKeyboardListener } from '@lexical/react';

function SaveableEditor() {
  const editor = useLexicalEditor();

  // 定义保存逻辑
  const saveData = () => {
    // 这里写你的保存代码
    console.log('触发保存操作');
  };

  useLexicalKeyboardListener((event) => {
    // 检测Ctrl/Cmd + S组合键
    if ((event.ctrlKey || event.metaKey) && event.key === 's') {
      event.preventDefault(); // 阻止浏览器默认的页面保存行为
      saveData();
    }
  });

  return (
    <LexicalComposer initialConfig={/* 你的编辑器配置 */}>
      {/* 编辑器的其他组件（如RichTextPlugin等） */}
    </LexicalComposer>
  );
}

方法二：通过KEY_DOWN_COMMAND注册命令 #

利用Lexical内置的KEY_DOWN_COMMAND，在全局按键事件流中处理快捷键：

import { KEY_DOWN_COMMAND, COMMAND_PRIORITY_HIGH } from 'lexical';
import { useLexicalEditor } from '@lexical/react';
import { useEffect } from 'react';

function SaveableEditor() {
  const editor = useLexicalEditor();

  const saveData = () => {
    // 执行保存逻辑
    console.log('触发保存操作');
  };

  // 在编辑器挂载时注册命令
  useEffect(() => {
    const unregister = editor.registerCommand(
      KEY_DOWN_COMMAND,
      (event) => {
        if ((event.ctrlKey || event.metaKey) && event.key === 's') {
          event.preventDefault();
          saveData();
          return true; // 返回true表示拦截后续命令处理
        }
        return false; // 返回false让其他命令继续执行
      },
      COMMAND_PRIORITY_HIGH // 高优先级确保先处理你的保存逻辑
    );

    return unregister; // 组件卸载时取消注册
  }, [editor]);

  return (
    <LexicalComposer initialConfig={/* 你的编辑器配置 */}>
      {/* 编辑器组件 */}
    </LexicalComposer>
  );
}

关键注意事项 #

• 必须调用event.preventDefault()：否则浏览器会触发默认的页面保存行为，干扰你的自定义逻辑。
• 优先级设置：使用COMMAND_PRIORITY_HIGH可以确保你的快捷键逻辑优先于Lexical内置的其他按键处理逻辑。

内容的提问来源于stack exchange，提问作者caweidmann