有没有办法禁用codemirror上的鼠标操作？

Question

如何在 codemirror 中禁用鼠标使用。

我希望它的行为像 vim 编辑器，用户无法使用鼠标移动到任何地方。

提前致谢。

Answer 1

您可以注册鼠标事件的处理程序（主要是

mousedown

），然后简单地

.preventDefault()

它们以防止CodeMirror进一步处理它们。

Answer 2

在编辑器容器上使用

pointer-events: none;

怎么样？

.CodeMirror {
    pointer-events: none;
}

另请参阅

• pointer-events

  MDN 上的参考
• caniuse.com 上的功能兼容性矩阵

Answer 3

经过长时间的搜索，我能够通过阻止

onMouseDownCapture

 事件的默认行为来禁用代码镜像编辑器中的鼠标操作。处理程序。

onMouseDownCapture={(e) => e.preventDefault()}

    <CodeMirror
      ref={(editor) => editorRefCallback(editor, highlightedRange)}
      extensions={[
        EditorView.editable.of(false),
        getLanguageHighlighter(language),
      ]}
      maxHeight={height}
      value={code}
      editable={false}
      onMouseDownCapture={(e) => e.preventDefault()} // prevent default behavior of code mirror
      autoFocus={true}
      basicSetup={{ highlightActiveLine: true }}
      theme={currentTheme}
    />