0

所以我使用 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 中的文本然后查看页面源代码。

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

4

2 回答 2

2

尝试

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

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

于 2013-11-03T02:55:48.197 回答
0

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

保罗的解决方案editor.doc.getValue()是更有效的方法。

于 2013-11-03T10:06:03.120 回答