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:

4 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".