时间戳

首页 > 解决方案 > 在 Monaco Editor 中使用热键？

reactjs - 在 Monaco Editor 中使用热键？

问题描述

我试图在摩纳哥编辑器中使用热键来运行一个函数，当使用'react-hotkeys-hook' npm 包按下cmd + enter时。

当我从 monaco 编辑器中单击时，它就可以工作了。似乎当光标聚焦在编辑器中时，热键不起作用。

有没有办法让热键工作，同时在 monaco 编辑器中输入，而不是手动单击另一个 div？

这是我正在处理的一些代码：

import React from "react";
import Editor from "@monaco-editor/react";
import { useHotkeys } from "react-hotkeys-hook";

export default function codeEditor(props) {
useHotkeys("cmd+enter", () => runCode());

function runCode() {
  alert('Running code...')
}

return (
    <div className="editor-container">
      <Editor
        defaultValue={`Hello World`}
        onMount={handleEditorDidMount}
        width="100%"
        height="80vh"
        theme="vs-dark"
        fontSize='20px'
        defaultLanguage="javascript"
        options={{
          fontSize: '18px'
        }}  
      />
    </div>
  )
}

标签： reactjsmonaco-editor

解决方案

我从来没有使用过 react-hotkeys-hook，但是我在编辑器中注册了多个快捷键，包括cmd/ ctrl+ enter：

            editor.addAction({
                id: "executeCurrentAndAdvance",
                label: "Execute Block and Advance",
                keybindings: [KeyMod.CtrlCmd | KeyCode.Enter],
                contextMenuGroupId: "2_execution",
                precondition: blockContext,
                run: () => {
                    this.executeCurrentContext(false, true);
                },
            });

有前提：

        const blockContext = "editorTextFocus && !suggestWidgetVisible && !renameInputVisible && !inSnippetMode " +
            "&& !quickFixWidgetVisible";

推荐阅读