make javascript/html/css editor

Question

Im trying to make a html/css/javascript online editor so I create a textarea to write the code and Iframe to display it so this is the html :

 <textarea id="code"></textarea>

 <iframe id="output"></iframe>

 <button id="submit-b">submit</button>

and this is the jquery code :

$("#submit-b").click(function(){
   code = $("#code").val();
   $('#output').contents().find('body').html(code);
});

it works to edit html and Css but not JavaScript, how can I do this?

Why not use an existing editor like [TinyMCE](http://tinymce.com) or something like [JSFiddle](http://jsfiddle.net), depending on your needs? — dtech, Jan 26 '14 at 14:15
I want this editor not for me I want it as Graduation Project to my University so I must make it , I have 3 days — mahmoud sarhan, Jan 26 '14 at 14:22

score 1 · Accepted Answer · answered Jan 26 '14 at 14:24

1

It works for me: JSFiddle example. Enter something like this in the textarea:

<script>alert('Boo!');</script>

And you will be whown a Javascript alert.

That said, why not use an existing editor like TinyMCE or something like JSFiddle, depending on your needs?

answered Jan 26 '14 at 14:24

dtech

no it didn't work with me in your JSFiddle example try to input a full html page like :
My First JavaScript

Click the button to display the date.

this will not work – mahmoud sarhan Jan 26 '14 at 14:30
Try: http://stackoverflow.com/questions/16504816/how-to-set-html-content-into-an-iframe-in-ie8-ie9 – dtech Jan 26 '14 at 14:39

Dalorzo · Answer 2 · 2014-01-26T14:20:09.683

0

Why you don't use code mirror instead?

Here is sample on how this framework does it:

edited Jan 26 '14 at 14:20

answered Jan 26 '14 at 14:14

Dalorzo

I want this editor not for me I want it as Graduation Project to my University so I must make it I have 3 days left thank you – mahmoud sarhan Jan 26 '14 at 14:20

score 0 · Answer 3 · answered Jan 27 '14 at 14:06

the solution is to use a pure javascript code which is it :

function update() 
{
var w = document.getElementById("code").value;
document.getElementById('output').contentWindow.document.write(w);
}

becouse jquery code append the textarea value without <html> and <body> tags

3 Answers3