Question

我使用下面的方法来查看textarea区域被修改时的输出，它工作正常。但我想使用Codemirror作为textarea，当我在codemirror textarea中插入任何数据时，输出应该出现div。

<script type="text/javascript">
function updateDisplay() {
document.getElementById("code").innerHTML =      document.getElementById("entry").value;
}
</script>

<textarea onkeyup="updateDisplay();" name="entry" id="entry" cols="1000" rows="500"></textarea>
<div name="code" id="code" ></div>

CodeMirror

 <link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/mode/xml/xml.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<script src="http://codemirror.net/mode/css/css.js"></script>
<script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>



<textarea id="code" name="code">
<html style="color: green">
  <!-- this is a comment -->

<style type="text/css">
  h1 {font-family: comic sans; color: #f0f;}
  div {background: yellow !important;}
  body {
    max-width: 50em;
    margin: 1em 2em 1em 5em;
  }
</style>
</head>
 <body>

<script>
  function jsFunc(arg1, arg2) {
    if (arg1 && arg2) document.body.innerHTML = "achoo";
  }
 </script>
 </body>
</html>
</textarea></form>
<script>
  var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "text/html", tabMode: "indent"});
</script>

Answer 1

您需要将onChange传递给CodeMirror，请尝试以下代码：

<script>
    var editor = CodeMirror.fromTextArea(document.getElementById("entry"), {
        mode: "text/html",
        lineNumbers: true,
        onKeyEvent: function(editor) {
              document.getElementById("code").innerHTML = editor.getValue();
        }
    });
</script>

演示：http://jsfiddle.net/ZbHGY/

Answer 2

以下使用Codemirror v5.x

聆听编辑＆＃34;改变＆＃34; event，然后调用save（）方法将编辑器的值传送到原始文本区域。

<script>
  var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "text/html", tabMode: "indent"});
  editor.on("change", function(cm){ cm.save() })
</script>

如何在修改textarea时获取div中的输出？

2 个答案: