Reputation: 33

make javascript/html/css editor

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?

Upvotes: 0

Answers (3)

Reputation: 33

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

Upvotes: 0

Reputation: 14060

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?

Upvotes: 1

Reputation: 20014

Why you don't use code mirror instead?

Here is sample on how this framework does it:

Upvotes: 0