0

以下の方法を使用して、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>

4

2 に答える 2

0

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/

于 2013-01-31T04:42:02.507 に答える