使用SimpleMDE实现Markdown编辑器时无法注册keyup事件

问题原因 #

SimpleMDE基于CodeMirror构建，初始化实例后，你指定的<textarea id="editable">会被隐藏，用户实际交互的是CodeMirror生成的编辑器元素，因此直接给原textarea绑定keyup事件不会被触发。

修复方案 #

不要监听原textarea的事件，而是通过SimpleMDE实例获取内部的CodeMirror对象，监听对应的事件（change事件更适合实时同步内容的场景，会在编辑器内容变化时触发）：

修改后的核心JavaScript代码 #

var simplemde = new SimpleMDE({
  element: document.getElementById("editable")
})
simplemde.value("This text will appear in the editor")

// 监听CodeMirror的change事件
simplemde.codemirror.on("change", function() {
  console.log(simplemde.value())
  document.getElementById("content").innerHTML = simplemde.value()
})

完整可运行代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
<style>
.editor {
  width: 45%;
  float: left;
}

.content {
  width: 45%;
  float: left;
}
</style>
<div class="editor">
  <textarea id="editable"></textarea>
</div>
<div class="content" id="content"></div>
<script>
var simplemde = new SimpleMDE({
  element: document.getElementById("editable")
})
simplemde.value("This text will appear in the editor")

simplemde.codemirror.on("change", function() {
  console.log(simplemde.value())
  document.getElementById("content").innerHTML = simplemde.value()
})
</script>

补充说明 #

如果需要监听特定键盘按键事件，可改用CodeMirror的keyup事件：

simplemde.codemirror.on("keyup", function(cm, event) {
  console.log("按键触发：", event.key)
  console.log(simplemde.value())
  document.getElementById("content").innerHTML = simplemde.value()
})

内容的提问来源于stack exchange，提问作者AnkurS