Question

我做了一个基于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>

Answer 1

这是您所要询问的简单片段。要模拟快捷键的触发，您必须手动调用此快捷方式调用的所有方法，如代码片段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>

如何在CodeMirror中模拟带有按钮单击的按键？

1 个答案: