Designing a Simple HTML Code & Preview Tool (Online)

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.

Well what we are going to design today is a scaled down version (say simple)
of these kinds of editors. It’d let you write (or paste) HTML code and
preview how it’d look. What it wouldn’t let you do is to format
or change anything while in the preview mode. We will be using HTML, JavaScript
and a little inline CSS.

Basic Theory

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.

Working

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
code view (textarea) and switch to preview mode, a JavaScript function is called
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.

Code


  <html>
  <head>
  <title>Code & Preview</title>


  <script language="JavaScript" type="text/JavaScript">
  //flag to store current state of view (code or preview)
  var flag=1;

  //var to store code forom the textarea
  var val1='';

  function changeMode()
  {
    //store code from the textarea
    val1=document.form1.code.value;

    //check which view we are in
    if (flag==1)//code view
    {
      //set textarea to be invisible
      //notice how style property is accessed
      document.getElementById('code').style.display = "none";
      document.getElementById('preview').style.display = "block";

      //give the iframe the HTML code to display
      //note how an iframe's properties are accessed
      //is's because an iframe is a seperate window itself
      document.getElementById("preview").contentWindow.document.body.innerHTML=val1;

      //rename the button
      document.getElementById('submit').value = "Code";

      flag=2;
    }
    else
    {
      document.getElementById('preview').style.display ="none";
      document.getElementById('code').style.display ="block";

      document.getElementById('submit').value = "Preview";

      flag=1;
    }
  }
  </script>

  </head>

  <body>
  <form name="form1" method="post" action="">
    <p id="textb">
  <iframe style="display: none" id="preview" width="600px" height="300px" scrolling="auto"></iframe>
      <textarea style="display: block;width:600px; height:300px" name="code" id="code"></textarea>
    </p>
    <p>
      <input id="submit" type="button" name="Submit" onClick="changeMode()" value="Preview">
    </p>
  </form>
  </body>
  </html>