Javascript Updating div with HTML from Code Mirror

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!

Why is your form tag above your html tag? And you textarea tag is malformed. *edit* Nevermind, it's just all mangled. — keyboardSmasher, Nov 03 '13 at 02:55
I can't event type in the textarea with id of "demotext" since is not even visible. It has its `display` set to `none`. — WannaCSharp, Nov 03 '13 at 03:02
@keyboardSmasher I don't think you understand whats going on here, that tag and below basically everything in the textarea is text.. — user2812028, Nov 03 '13 at 03:11

score 2 · Accepted Answer · answered Nov 03 '13 at 02:55

2

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.

answered Nov 03 '13 at 02:55

Paul Draper

78,542
46
206
285

How would I set it up as an iFrame? I had it as that before but it wasn't working. By the way this worked! Thankyou! I will accept your answer :) – user2812028 Nov 03 '13 at 03:12
Try http://stackoverflow.com/questions/8814411/getting-the-html-content-of-an-iframe-using-jquery, but set the html instead of getting it. – Paul Draper Nov 03 '13 at 03:18
Hmm...whats wrong with this? $('#drawing').contents().html(editor.doc.getValue()); – user2812028 Nov 03 '13 at 03:21

score 0 · Answer 2 · answered Nov 03 '13 at 10:06

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.

Javascript Updating div with HTML from Code Mirror

2 Answers2