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:
-
Creating a Simple Countdown Timer Using JavaScript II
-
Creating a Simple Countdown Timer Using JavaScript
-
Evaluating/Executing PHP Code at Run-Time Using eval() Function
-
Blogger: Changing Templates without Loosing Widgets
-
How Do I Color-Highlight PHP Source Codes
