monaco-editor How to disable keyboard shortcuts Keyboard Shortcuts

business background

Because the keyboard shortcuts of monaco-editor will conflict with the keyboard shortcuts of the browser, it is hoped that users can configure and activate/disable the built-in keyboard shortcuts of monaco-editor

train of thought

The official document does not give the API to directly call to disable all keyboard shortcuts, nor does it give a method to disable a single keyboard shortcut. Reading the source code of monaco-editor found that all actions and commands have their registration methods, but there is no unregistering method.

Failed option one:

Directly set the _actions attribute of the editor instance to empty, then editor.getActions() or editor.getSupportedActions() will return an empty array, it seems that the keyboard shortcuts have been successfully disabled, but running "CTRL+F" found that it can still be opened The find component pops up.

<template>
  <div ref="monaco" :style="{'height': height, width: '100%'}"></div>
</template>

data() {
    return {
        editorOptions: {
            contextmenu: true,
            language: 'python',
            theme: 'vs',
            minimap: {
                enabled: false
            },
            glyphMargin: false,  //字形边缘
            fontSize: 14,		//字体大小
            scrollBeyondLastLine: false, // 控制编辑器是否可以滚动到最后一样之后，置否，因为不想要无代码的空白页面
            selectOnLineNumbers: true, // 单击行号时是否应选择相应的行，默认true
            overviewRulerBorder: false, // 滚动条的边框
            roundedSelection: false,
            readOnly: false,		// 只读
            cursorStyle: 'line',		//光标样式
            automaticLayout: true,	//自适应布局，编辑器将设置一个间隔时间来检查其dom节点大小是否已更改
            useTabStops: false,
            autoIndent: true, //自动布局
            quickSuggestions: true,
            lineNumbersMinChars: 5, // 控制行号的宽度，至少呈现一定数量的数字Defaults to 5.
            lineDecorationsWidth: 10
        }
    }
}

mounted() {
    this.editor = monaco.editor.create(this.$refs.monaco, this.editorOptions)
    this.editor.onDidChangeModelContent(event => {
        this.$emit('codeChange', this.editor.getValue())
    })
    this.editor._actions = {}
}

Failed option two:

Listen to the keydown event of the keyboard, list all shortcut key combinations, capture the event, rewrite the callback function of the event, organize event bubbling and default behavior. This solution successfully disables keyboard shortcuts, but at the cost of traversing 143 shortcut key combinations and adapting to the keyboard combinations of different operating systems window/mac, which is time-consuming and labor-intensive. Moreover, the callback function of each registration and deregistration shortcut key is time-consuming and laborious, and it is not convenient to support flexible configuration by users.

mounted() {
    this.editor = monaco.editor.create(this.$refs.monaco, this.editorOptions)
    this.editor.onDidChangeModelContent(event => {
        this.$emit('codeChange', this.editor.getValue())
    })
    this.editor.onKeyDown((listener, thisArgs, disposables) => {
        if (listener.ctrlKey && listener.keyCode === 36) {
            console.log(`按下了 ctrl + f`)
            listener.stopPropagation()
            listener.preventDefault()
        }
    })
}

Successful plan three:

The contextmenu item in the options of the editor needs to be configured. When the context menu is disabled, the keyboard shortcuts of monaco-editor will not be triggered, and the api: updateOptions given in the official document can be flexibly configured to activate/disable keyboard shortcuts

1. When creating the editor, define a

monaco.editor.create(document.getElementById("container"), { 
    value: "function hello() {\n\talert('Hello world!');\n}", 
    language: "javascript", 
    // --------- 
    contextmenu: false, // or set another keyCode here 
})

2. If you want to enable/disable at runtime

monaco.editor.updateOptions({ 
    contextmenu: false; 
});

in the project code to

mounted() {
    this.editor = monaco.editor.create(this.$refs.monaco, this.editorOptions)
    this.editor.onDidChangeModelContent(event => {
        this.$emit('codeChange', this.editor.getValue())
    })
    this.editor.updateOptions({ 
        contextmenu: false; 
    })
}