Javascript Updating div with HTML from Code Mirror

StackOverflow https://stackoverflow.com/questions/19749330

Question

So I'm using jQuery to make it so when you click run button it will take the text from a textarea and put it inside the divider called drawing.

I will put the code and link to test it below and then describe the issue.

Code:

<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>

Link: http://codeeplus.net/test.php

So, basically when you click run it doesn't update with the text that you input, it updates with the text that was put inside the actually HTML of the webpage. For example if I edit <p> to <h1> it will run it as <p> not <h1> because the core text that was put in is <p>.

Not sure how else to describe it, change the text in the textarea then view the page source if you don't understand what I mean.

If you need more information please let me know!

Was it helpful?

Solution

Try

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

And it's not a great idea to start putting extra html and body tags and such in that div. Consider using an iframe instead.

OTHER TIPS

The reason it doesn't work is that CodeMirror doesn't continually update the textarea. Since you used fromTextArea() you can call editor.save() to update the textarea's value.
(See http://codemirror.net/doc/manual.html#fromTextArea)

Paul's solution with editor.doc.getValue() is the more efficient way to do it.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top