Ad

Thursday, September 04, 2008

Designing a Simple HTML Code & Preview Tool (Online)

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>

Previous Posts:

8 comments:

  1. i am a blogger and i really liked this post. thanks

    ReplyDelete
  2. very informative article.

    ReplyDelete
  3. @ Joy, Lynford,

    Thanks very much.

    Enjoy!

    ReplyDelete
  4. very useful article

    thanx

    ReplyDelete
  5. @ Guru,
    It's my pleasure.

    ReplyDelete
  6. I've just started blogging and am new to all this but I liked your post. I'm currently writing on Prague hotels and places to visit and wanted to create something nice. Thanks once again.

    ReplyDelete
  7. Anonymous10:37 PM

    THANK YOU!!!

    ReplyDelete
  8. Hi Anonymous,

    It's my pleasure!

    ReplyDelete

You are free to comment anything, although you can comment as 'Anonymous' it is strongly recommended that you supply your name. Thank You.

Please don't use abusive language.