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
– keyboardSmasher, Commented Nov 3, 2013 at 2: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
– WannaCSharp, Commented Nov 3, 2013 at 3:02
@keyboardSmasher I don't think you understand whats going on here, that <html> tag and below basically everything in the textarea is text.. — user2812028
– user2812028, Commented Nov 3, 2013 at 3:11

Paul Draper · Accepted Answer · 2013-11-03 02:55:48Z

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 3, 2013 at 2:55

Paul Draper

84.2k53 gold badges216 silver badges303 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2812028 Over a year ago

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

Paul Draper Over a year ago

Try stackoverflow.com/questions/8814411/…, but set the html instead of getting it.

user2812028 Over a year ago

Hmm...whats wrong with this? $('#drawing').contents().html(editor.doc.getValue());

Beni Cherniavsky-Paskin · Accepted Answer · 2013-11-03 10:06:03Z

0

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.

answered Nov 3, 2013 at 10:06

Beni Cherniavsky-Paskin

10.2k2 gold badges56 silver badges67 bronze badges

Collectives™ on Stack Overflow

Javascript Updating div with HTML from Code Mirror

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related