Skip to main content

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:

Labels:

Popular posts from this blog

Fix For Toshiba Satellite "RTC Battery is Low" Error (with Pictures)

RTC Battery is Low Error on a Toshiba Satellite laptop "RTC Battery is Low..." An error message flashing while you try to boot your laptop is enough to panic many people. But worry not! "RTC Battery" stands for Real-Time Clock battery which almost all laptops and PCs have on their motherboard to power the clock and sometimes to also keep the CMOS settings from getting erased while the system is switched off.  It is not uncommon for these batteries to last for years before requiring a replacement as the clock consumes very less power. And contrary to what some people tell you - they are not rechargeable or getting charged while your computer or laptop is running. In this article, we'll learn everything about RTC batteries and how to fix the error on your Toshiba Satellite laptop. What is an RTC Battery? RTC or CMOS batteries are small coin-shaped lithium batteries with a 3-volts output. Most laptops use
Read more

The Best Way(s) to Comment out PHP/HTML Code

PHP supports various styles of comments. Please check the following example: <?php // Single line comment code (); # Single line Comment code2 (); /* Multi Line comment code(); The code inside doesn't run */ // /* This doesn NOT start a multi-line comment block /* Multi line comment block The following line still ends the multi-line comment block //*/ The " # " comment style, though, is rarely used. Do note, in the example, that anything (even a multi-block comment /* ) after a " // " or " # " is a comment, and /* */ around any single-line comment overrides it. This information will come in handy when we learn about some neat tricks next. Comment out PHP Code Blocks Check the following code <?php //* Toggle line if ( 1 ) {      // } else {      // } //*/ //* Toggle line if ( 2 ) {      // } else {      // } //*/ Now see how easy it is to toggle a part of PHP code by just removing or adding a single " / " from th
Read more

How to Create an HTML Form Linked with MySQL Database in PHP

If you're looking for example code and detailed discussion on how to create an HTML form that stores data in a MySQL database using PHP then this post might be what you're looking for. I assume that you're familiar with basic HTML, CSS, PHP coding, and  MySQL. I am going to divide this small project into two parts: The HTML form itself that takes input from the user and the PHP script that saves it into the database A table that displays the user-added data that has been saved in the database. We'll be dealing with the first part in this tutorial. Again I'd like to break this problem into a few parts so that it's easier for you to understand and probably gives you an insight into how breaking up a problem into smaller chunks can help make things clearer in your mind. Let's think about it, there is an HTML form (that is HTML code), then there is the PHP code that deals with the user-input data, and the MySQL database itself. For this tutorial, we'll b
Read more