0

だから私はそれを作るためにjQueryを使っているので、実行ボタンをクリックすると、テキストエリアからテキストを取得し、描画と呼ばれる仕切りの中に入れます。

以下にコードとリンクを置いてテストし、問題について説明します。

コード：

<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

したがって、基本的に実行をクリックしても、入力したテキストでは更新されず、Web ページの実際の HTML 内に配置されたテキストで更新されます。たとえば、編集<p>する<h1>と、挿入され<p>た<h1>コアテキストが<p>.

他にどのように説明すればよいかわからない場合は、テキストエリアのテキストを変更してから、私の意味がわからない場合はページのソースを表示してください。

さらに情報が必要な場合は、お知らせください。

4

2 に答える 2

2

試す

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

htmlそして、余分なbodyタグなどをその div に入れ始めるのは良い考えではありません。代わりに iframe の使用を検討してください。

于 2013-11-03T02:55:48.197 に答える
0

これが機能しない理由は、CodeMirror がテキストエリアを継続的に更新しないためです。使用したので、テキストエリアの値を更新するためにfromTextArea()呼び出すことができます。 ( http://codemirror.net/doc/manual.html#fromTextAreaを参照)editor.save()

ポールのソリューションeditor.doc.getValue()は、より効率的な方法です。

于 2013-11-03T10:06:03.120 に答える