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 or something like JSFiddle, depending on your needs? — dtech
– dtech, Commented Jan 26, 2014 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
– mahmoud sarhan, Commented Jan 26, 2014 at 14:22

dtech · Accepted Answer · 2014-01-26 14:24:12Z

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, 2014 at 14:24

dtech

14.2k11 gold badges52 silver badges73 bronze badges

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

2 Comments

mahmoud sarhan Over a year ago

no it didn't work with me in your JSFiddle example try to input a full html page like : <!DOCTYPE html> <html> <body> <h1>My First JavaScript</h1> <p>Click the button to display the date.</p> <p id="demo"></p> <button type="button" onclick="myFunction()">Try it</button> <script> function myFunction() { document.getElementById("demo").innerHTML = Date(); } </script> </body> </html> this will not work

dtech Over a year ago

Try: stackoverflow.com/questions/16504816/…

Dalorzo · Accepted Answer · 2014-01-26 14:20:09Z

0

Why you don't use code mirror instead?

http://codemirror.net/

Here is sample on how this framework does it:

http://codemirror.net/mode/htmlembedded/index.html

edited Jan 26, 2014 at 14:20

answered Jan 26, 2014 at 14:14

Dalorzo

20k7 gold badges57 silver badges102 bronze badges

1 Comment

mahmoud sarhan Over a year ago

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 · Accepted Answer · 2014-01-27 14:06:15Z

0

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

answered Jan 27, 2014 at 14:06

mahmoud sarhan

334 bronze badges

Collectives™ on Stack Overflow

make javascript/html/css editor

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related