如何在 CodeMirror 中通过单击按钮来模拟按键？答案

【问题标题】：How to simulate a keypress with button click in CodeMirror?如何在 CodeMirror 中通过单击按钮来模拟按键？
【发布时间】：2020-05-14 09:29:30
【问题描述】：

我制作了一个基于 CodeMirror 的编辑器，但我遇到了一些问题。

<textarea id="code"></textarea>
<script>
  var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    mode: "htmlmixed",
    lineWrapping: true,
    matchBrackets: true,
    styleActiveLine: true
  });
</script>

我正在尝试通过单击按钮来模拟一些按键操作。

<button onclick="add '<' to textarea"> &lt; </button>
<button onclick="add '</' to textarea"> &lt;/ </button>
<button onclick="trigger ctrl-space in textarea"> ctrl-space </button>
<button onclick="trigger ctrl-f in textarea"> ctrl-f </button>

【问题讨论】：

嗨 Rajmani，我的回答对您有帮助吗？
是的，你的回答成功了，非常感谢你
好的。您能否将答案标记为“已接受”？

标签： javascript html jquery editor codemirror

【解决方案1】：

这是您所问内容的简单 sn-p。要模拟快捷键的触发，您必须手动调用此快捷键调用的所有方法，如 sn-p JS 中所述。代码中有解释。如果你实现起来有一些困难，你可以在下面分享。

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  mode: "htmlmixed",
  lineWrapping: true,
  lineNumbers: true,
  matchBrackets: true,
  styleActiveLine: true,
  extraKeys     : {
    "Ctrl-Space": "YOUR FUNCTIONS",
    // ...
  }
});

editor.getDoc().setValue("<p>2020</p>");

function add(str) {
  var cm = editor.getDoc();
  var cursor = cm.getCursor();
  cm.replaceSelection(str)
  cm.setCursor(cursor.line, cursor.ch + str.length);
  console.log("Added " + str + " at line " + (cursor.line + 1) + " col " + cursor.ch);
}

function triggerCTRLSPACE() {
  // ...What <Ctrl + Space> is supposed to do.
  console.log("Ctrl + Space triggered");
}

function triggerCTRLF() {
  // ...What <Ctrl + F> is supposed to do.
  console.log("Ctrl + F triggered");
}

.CodeMirror {
  height: 70px !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.54.0/codemirror.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.54.0/theme/tomorrow-night-eighties.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.54.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.54.0/mode/htmlmixed/htmlmixed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.54.0/mode/xml/xml.min.js"></script>

<textarea id="code"></textarea>

<button onclick="add('<')"> &lt; </button>
<button onclick="add('</')"> &lt;/ </button>
<button onclick="triggerCTRLSPACE()"> Ctrl-Space </button>
<button onclick="triggerCTRLF()"> Ctrl-F </button>

【讨论】：