Sunday, January 13, 2013

Make an HTML editor like W3schools "Try it yourself" feature

Hey there!  Long time no see right?  I come with gifts!!!

One of the things I love to do is code.  HTML is something that I started playing around with much too long ago to give a date.  I prefer to write my HTML/CSS/Javascript using plain text.  This way I know that I have total control over what I'm getting as opposed to an editor which allows for quick and easy editing but may not always be as flexible as you want it to be.

The problem with coding in plain text via a program like Notepad or Textedit is that you have to save the file, switch to your browser and refresh the page every time you make an edit to see the result.  If any of you have ever visited W3schools and gone through their tutorials you will have come across a rather awesome feature to their pages: the Try it yourself editor.  This is an in-browser tool that lets you write code in a box on the left side of the page and then see the resulting page in a box on the right side.  Every time you edit the code on the left, all you need to do to see the updated change is click the Submit button which refreshes the box on the right.  It's an amazing little tool.

I decided that it would be cool to have one of my own, right on my desktop, that I could use to do my coding without having to run two separate programs and keep going back and forth, saving and refreshing.  It seemed simple enough... but after a lengthy Google-ing spree and combing through many forum pages I came up empty handed.  So I did what any good code-monkey would do.  I wrote it myself.  And now I will share it with you so perhaps your Google-fu wont fail you as mine did.

First, I add a textarea and an iframe. The ids are mycode and display respectively.  I also add the button that will make the magic happen and link it to the function I'm about to show you.



Next, I add a function called "display" in the Head of the page that takes the text from the textarea, converts it to a variable named "x" and then sets the innerHTML of the iframe equal to "x".


Finally (though I won't go into the details of it here), I spice it all up with some CSS styling to make it all look pretty.

Throw in your html, body, head tags and some CSS in the right places and the code will create a page that looks a little like this:

11 comments:

Avdhut Sonpethkar said...

This is a nice article. I have also written on this topic on my blog
http://techisquest.blogspot.com/2012/06/create-try-it-yourself-online-editor.html

zabi said...

very useful stuff.

However I'm not able to run this in IE and FF browser...

zabi said...

to make this code work in FF we need to use

window.frames['display'].document.documentElement.innerHTML = x;

frames[] is not a collection of document; it's a collection of window.

Ev said...

Sorry for the long delay on posting those last two comments zabi. But yes, I should have specified that the code was written specifically with webkit based browsers in mind. Chrome is usually my browser of choice and I sometimes forget that code doesn't always "just work".

Khalid Bhyan said...

thank you so much, it's a perfect thing to place in the blog .

Arabic Programming Lessons

Super Humanoid said...

A good article. There is a small suggestion from me.

Code below wont work.

script alert(123); script





You should use

document.getElementById('display').contentDocument.write(x);

mahmoud sarhan said...

hellow my name is mohammed
thank you for this interesting "gift"
but why this try it online don't run javascripts ????!!!!!

Hamid Feizabadi said...

Is it secure to use this code? Maybe user inputs something to crash server!

Oj Obasi said...

This doesn't output php. Any idea on how to go about that?
Thanks

Joseph John said...

can you give me the code nd the instruction im just a beginer and i need this for a project

Tim Wijma said...

Very nice it helps me a lot of
thx