Javascript 使用来自 Code Mirror 的 HTML 更新 div

Question

所以我使用 jQuery 来制作它，所以当你点击运行按钮时，它会从 textarea 中获取文本并将其放在名为绘图的分隔符内。

我会把代码和链接放在下面测试它，然后描述问题。

代码：

<link rel=stylesheet href="codemirror/lib/codemirror.css">
<link rel=stylesheet href="codemirror/doc/docs.css">
<script src="codemirror/lib/codemirror.js"></script>
<script src="codemirror/mode/xml/xml.js"></script>
<script src="codemirror/mode/javascript/javascript.js"></script>
<script src="codemirror/mode/css/css.js"></script>
<script src="codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script src="codemirror/addon/edit/matchbrackets.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
  .CodeMirror { height: auto; border: 1px solid #ddd; }
  .CodeMirror-scroll { max-height: 200px; }
  .CodeMirror pre { padding-left: 7px; line-height: 1.25; }
  #drawing { left:550px; top:10px; border: 1px solid #555555; width:500px; height: 400px; }
</style>
  <form style="position: relative; margin-top: .5em;">
    <textarea id=demotext name="textarea">
<html>
    <head>
        <title>Learning HTML</title>
    </head>
    <body>
        <p>I'm learning HTML! This is my first line of code!</p>
    </body>
</html>
    </textarea>
<input type="button" id="run" value="Run" />
<center>
<br />
<div id="drawing">
</div>
</center>

</form>
<script>
$(document).ready(function(){
    $("#run").click(function(){
        $('#drawing').html($("#demotext").val());
    });
});
</script>
  <script>
    var editor = CodeMirror.fromTextArea(document.getElementById("demotext"), {
      lineNumbers: true,
      mode: "text/html",
      matchBrackets: true
    });
  </script>

链接：http://codeeplus.net/test.php

因此，基本上，当您单击运行时，它不会随着您输入的文本而更新，它会随着放置在网页实际 HTML 中的文本而更新。例如，如果我将<p> 编辑为<h1>，它将以<p> 而不是<h1> 运行，因为输入的核心文本是<p>。

不知道如何描述它，如果你不明白我的意思，请更改 textarea 中的文本然后查看页面源代码。

如果您需要更多信息，请告诉我！

Answer 1

它不起作用的原因是 CodeMirror 不会不断更新文本区域。由于您使用了fromTextArea()，您可以调用editor.save() 来更新文本区域的值。
（见http://codemirror.net/doc/manual.html#fromTextArea）

Paul 使用editor.doc.getValue() 的解决方案是更有效的方法。

Answer 2

试试

$(document).ready(function(){
    $("#run").click(function(){
        $('#drawing').html(editor.doc.getValue());
    });
});

开始在该 div 中添加额外的 html 和 body 标记等并不是一个好主意。考虑改用 iframe。