With online CMSs everywhere and craze of blogging like never before, we see some sort of online HTML editors everywhere. Ever blogged or posted in some forum? Most of them have it! These editors let you write, format, preview and tinker with the HTML code before publishing anything. Most of them have a nice UI to format everything much like the desktop applications like NVu, Dreamweaver etc. these online editors also let you manually change or write HTML code that can be previewed without leaving the page.
If you look at the HTML editors used by Blogger and Wordpress, they have two modes, Code and Compose. In code mode HTML code is displayed which can also be edited. On the other hand in compose mode, preview of the code is displayed which can be edited/formatted using its GUI. Interesting thing here is that both the mode displays in the same place, giving a feeling that the same code box is changing to the Compose box.
For our purpose, we can use a HTML textarea for code view and an iframe for preview. Iframe is the simplest way of showing HTML preview that could also be made to work in edit mode, therefore letting us format things using the UI and see the code in code view.
From the staring both the textarea and the iframe are placed in the page. Textarea
is be styled to be visible (
display: block;) and the iframe to
be invisible (
display:none;). When you type in some code in the
that makes the textarea invisible an the iframe visible. It also places the
code (form the textarea) as HTML for the iframe, which in turn displays the
code as it’d in a browser. Again when you switch back to code view, textarea
is made visible again and the iframe invisible. If we give both the textarea
and iframe the same look, it’d give the feeling that the same box is being
used to show code as well as preview.
The button’s value is also changed to reflect which mode we are in and clicking it would result in which view.