Online HTML editor
This online HTML editor script has been developed here may be used as an add-on device of a CMS script to accept HTML input from user side. The code I use has been tested in all major browsers including Google Chrome. This script has a rich text editor window using iframe. An iframe HTML editor provides user a visual interface of editing of HTML page. Users see the final output what they are doing on the editor screen. So it is more user friendly compared to BBCode or any other online editor.
To develop such an editor our first step is to design an HTML page containing the editor window and few buttons to control HTML formatting. The image of such an editor and the HTML code required to develop it are given below.
HTML editor screenshot
The HTML code required to develop such an editor is given below. You can download and save the text as webpage to preview it.
Code | Download
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
body{margin:0; padding: 0; font-family: arial, serif;}
#fw_addcomment{border-collapse:collapse;}
#fw_addcomment td{padding:2px 0px; vertical-align:middle;font-size:11px;}
#toolbox{width:500px;background:#e2e0dc;border:1px solid #cccccc;border-bottom:none;margin:0;padding:0;clear:both;}
#toolbox table{margin:0 3px;width:99%;}
#toolbox .fw_tool{width:23px;padding:0;border:1px solid #e2e0dc;}
#toolbox .fw_select{width:23px;padding:0;border:1px solid #e2e0dc;}
#toolbox .separator{padding:0;width:10px;}
#toolbox td{height:24px;text-align:center;}
#toolbox td img{border:none;}
#toolbox input:hover{background:#aad5ff;border-top-color:#808080;border-right-color:#808080;}
#colorpalette{border-top:1px solid #eeeeee;border-left:1px solid #eeeeee;border-right:1px solid #808080;border-bottom:1px solid #808080; background:#d4d0c8; z-index:500;position:absolute;}
#color td{padding:0;border:1px inset;cursor:pointer;font-size:1px;}
</style>
</head>
<body>
<form name="frmComment" style="float:left;margin:10px;padding:0;">
<div style="padding:5px 10px;border:1px solid #cccccc;font-family:tahoma;"><big>Online HTML editor:</big></div>
<table id="fw_addcomment">
<tr><td>
<div id="toolbox">
<table>
<tr>
<td class="separator"><img src="images/separator.gif" alt="" /></td>
<td class="fw_tool" id="insertorderedlist"><img src="images/ol.gif" title="Ordered list" alt="Ordered list" /></td>
<td class="fw_tool" id="insertunorderedlist"><img src="images/ul.gif" title="List" alt="List" /></td>
<td class="fw_tool" id="indent"><img src="images/indent.gif" title="Indent" alt="Indent" /></td>
<td class="fw_tool" id="outdent"><img src="images/outdent.gif" title="Outdent" alt="Outdent" /></td>
<td class="separator"><img src="images/separator.gif" alt="" /></td>
<td class="fw_tool" id="undo"><img src="images/undo.gif" title="Undo" alt="Undo" /></td>
<td class="fw_tool" id="redo"><img src="images/redo.gif" title="Redo" alt="Redo" /></td>
<td class="separator"><img src="images/separator.gif" alt="" /></td>
<td class="fw_tool" id="superscript"><img src="images/superscript.gif" title="Superscript" alt="Superscript" /></td>
<td class="fw_tool" id="subscript"><img src="images/subscript.gif" title="Subscript" alt="Subscript" /></td>
<td class="separator"><img src="images/separator.gif" alt="" /></td>
<td class="fw_tool" id="link"><img src="images/link.gif" title="Link" alt="Link" /></td>
<td class="fw_tool" id="unlink"><img src="images/unlink.gif" title="Remove link" alt="Remove link" /></td>
<td class="separator"><img src="images/separator.gif" alt="" /></td>
<td class="fw_tool" id="insertimage"><img src="images/insertimage.gif" title="Image" alt="Image" /></td>
<td class="separator"><img src="images/separator.gif" alt="" /></td>
<td class="fw_tool" id="inserthorizontalrule"><img src="images/hr.gif" title="Horizontal rular" alt="Horizontal rular" /></td>
<td class="separator"><img src="images/separator.gif" alt="" /></td>
<td> </td>
</tr></table><img style="clear:both;margin:0;padding:0;" src="images/toolbacksmall.gif" alt="" /><table cellpadding="1"><tr>
<td class="separator"><img src="images/separator.gif" alt="" /></td>
<td class="fw_tool" id="formated"><img src="images/pre.gif" title="Formated" alt="Pre" /></td>
<td class="separator"><img src="images/separator.gif" alt="" /></td>
<td class="fw_tool" id="bold"><img src="images/b.gif" title="Bold" alt="Bold" /></td>
<td class="fw_tool" id="italic"><img src="images/i.gif" title="Italic" alt="Italic" /></td>
<td class="fw_tool" id="underline"><img src="images/u.gif" title="Underline" alt="Underline" /></td>
<td class="fw_tool" id="strikethrough"><img src="images/strikethrough.gif" title="Strikethrough" alt="Strikethrough" /></td>
<td class="separator"><img src="images/separator.gif" alt="" /></td>
<td class="fw_tool" id="justifyleft"><img src="images/justifyleft.gif" title="Align left" alt="Align left" /></td>
<td class="fw_tool" id="justifycenter"><img src="images/justifycenter.gif" title="Align center" alt="Align center" /></td>
<td class="fw_tool" id="justifyright"><img src="images/justifyright.gif" title="Align right" alt="Align right" /></td>
<td class="fw_tool" id="justifyfull"><img src="images/justifyfull.gif" title="Justify" alt="Justify" /></td>
<td class="separator"><img src="images/separator.gif" alt="" /></td>
<td> </td></tr></table>
</div>
<div style="clear:both; margin:0px;padding:0;border:1px solid #cccccc;">
<iframe src="" id="fw_editor" frameborder="0" marginheight="0" marginwidth="0" style="height:205px; padding:0;width:500px;"></iframe>
</div>
</td>
<td style="vertical-align:top;">
<table id="color" cellpadding="1" cellspacing="3">
<tbody><tr>
<td class="fw_color" id="#FFFFFF" bgcolor="#ffffff"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#FFCCCC" bgcolor="#ffcccc"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#FFCC99" bgcolor="#ffcc99"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#FFFF99" bgcolor="#ffff99"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#FFFFCC" bgcolor="#ffffcc"><img src="images/colorcell.gif" alt="" /></td>
</tr>
<tr>
<td class="fw_color" id="#99FF99" bgcolor="#99ff99"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#99FFFF" bgcolor="#99ffff"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#CCFFFF" bgcolor="#ccffff"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#CCCCFF" bgcolor="#ccccff"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#FFCCFF" bgcolor="#ffccff"><img src="images/colorcell.gif" alt="" /></td>
</tr>
<tr>
<td class="fw_color" id="#CCCCCC" bgcolor="#cccccc"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#FF6666" bgcolor="#ff6666"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#FF9966" bgcolor="#ff9966"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#FFFF66" bgcolor="#ffff66"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#FFFF33" bgcolor="#ffff33"><img src="images/colorcell.gif" alt="" /></td>
</tr>
<tr>
<td class="fw_color" id="#66FF99" bgcolor="#66ff99"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#33FFFF" bgcolor="#33ffff"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#66FFFF" bgcolor="#66ffff"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#9999FF" bgcolor="#9999ff"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#FF99FF" bgcolor="#ff99ff"><img src="images/colorcell.gif" alt="" /></td>
</tr>
<tr>
<td class="fw_color" id="#C0C0C0" bgcolor="#c0c0c0"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#FF0000" bgcolor="#ff0000"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#FF9900" bgcolor="#ff9900"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#FFCC66" bgcolor="#ffcc66"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#FFFF00" bgcolor="#ffff00"><img src="images/colorcell.gif" alt="" /></td>
</tr>
<tr>
<td class="fw_color" id="#33FF33" bgcolor="#33ff33"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#66CCCC" bgcolor="#66cccc"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#33CCFF" bgcolor="#33ccff"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#6666CC" bgcolor="#6666cc"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#CC66CC" bgcolor="#cc66cc"><img src="images/colorcell.gif" alt="" /></td>
</tr>
<tr>
<td class="fw_color" id="#999999" bgcolor="#999999"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#CC0000" bgcolor="#cc0000"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#FF6600" bgcolor="#ff6600"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#FFCC33" bgcolor="#ffcc33"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#FFCC00" bgcolor="#ffcc00"><img src="images/colorcell.gif" alt="" /></td>
</tr>
<tr>
<td class="fw_color" id="#33CC00" bgcolor="#33cc00"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#00CCCC" bgcolor="#00cccc"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#3366FF" bgcolor="#3366ff"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#6633FF" bgcolor="#6633ff"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#CC33CC" bgcolor="#cc33cc"><img src="images/colorcell.gif" alt="" /></td>
</tr>
<tr>
<td class="fw_color" id="#666666" bgcolor="#666666"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#990000" bgcolor="#990000"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#CC6600" bgcolor="#cc6600"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#CC9933" bgcolor="#cc9933"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#999900" bgcolor="#999900"><img src="images/colorcell.gif" alt="" /></td>
</tr>
<tr>
<td class="fw_color" id="#009900" bgcolor="#009900"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#339999" bgcolor="#339999"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#3333FF" bgcolor="#3333ff"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#6600CC" bgcolor="#6600cc"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#993399" bgcolor="#993399"><img src="images/colorcell.gif" alt="" /></td>
</tr>
<tr>
<td class="fw_color" id="#333333" bgcolor="#333333"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#660000" bgcolor="#660000"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#993300" bgcolor="#993300"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#996633" bgcolor="#996633"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#666600" bgcolor="#666600"><img src="images/colorcell.gif" alt="" /></td>
</tr>
<tr>
<td class="fw_color" id="#006600" bgcolor="#006600"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#336666" bgcolor="#336666"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#000099" bgcolor="#000099"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#333399" bgcolor="#333399"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#663366" bgcolor="#663366"><img src="images/colorcell.gif" alt="" /></td>
</tr>
<tr>
<td class="fw_color" id="#000000" bgcolor="#000000"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#330000" bgcolor="#330000"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#663300" bgcolor="#663300"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#663333" bgcolor="#663333"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#333300" bgcolor="#333300"><img src="images/colorcell.gif" alt="" /></td>
</tr>
<tr>
<td class="fw_color" id="#003300" bgcolor="#003300"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#003333" bgcolor="#003333"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#000066" bgcolor="#000066"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#330099" bgcolor="#330099"><img src="images/colorcell.gif" alt="" /></td>
<td class="fw_color" id="#330033" bgcolor="#330033"><img src="images/colorcell.gif" alt="" /></td>
</tbody></table>
</td>
</tr></table>
<p style="color:#c0c0c0; margin:0px 0 5px 0px;padding:0;">
___________________________</p>
<span style="color:#808080; font-size:10px; margin-left:5px;"><a target="_blank" href="http://ramui.com/">Ramui HTML editor</a> copyright © ramui.com</span>
</form>
</body></html>
Iframe designMode property
Before we proceed further we must discuss about the designMode property of an iframe document object. By default designMode property value is "off" and the document inside the iframe window displays content as normal HTML document object. But when the designMode property is set "on" then still the document shows the HTML content but allow user to edit its content just as a rich text editor. So to use iframe as an online HTML editor we must set its designMode property "on". The following JavaScript statement will do this for us.
iframeObject.contentWindow.document.designMode = "on";
We add this statement with the onload event of the page.
Add events with the HTML elements
The HTML page I represent above is a static page and do nothing unless we activate it, i.e. unless we add required event driven functions with the page elements to perform their allocated job. This activation should be done when the page is loading on the browser window. Here I use JavaScript window.onload() function to schedule the jobs of the buttons when mouse pointer move over or click on them.
Code | Download
window.onload=function(){
document.getElementById('fw_editor').contentWindow.document.designMode = "on";
initialButtons();}
function initialButtons(){
var td = document.getElementsByTagName('TD');
for(var i in td){
if (td[i].className == "fw_tool"){
td[i].onmouseover = btnOver;
td[i].onmouseout = btnOut;
td[i].onmousedown = btnDown;
td[i].onmouseup = btnOver;
td[i].onclick = btnClick;}
else if(td[i].className=="fw_color"){
td[i].onmouseover=colorOver;
td[i].onmouseout=colorOut;
td[i].onclick=colorClick;}}
}
function btnClick(){
var id=this.id;
switch(id){
case "insertimage":
var imageurl = prompt("Enter image URL:", "http://");
if((imageurl!= null) && (fw_trim(imageurl)!= "")){document.getElementById('fw_editor').contentWindow.document.execCommand("InsertImage", false, imageurl);}
return;
break;
case "formated":
document.getElementById('fw_editor').contentWindow.document.execCommand("formatblock", false, "<pre>");
return;
break;
case "link":
var url = prompt("Enter link URL:", "http://");
if((url!= null) && (fw_trim(url)!= "")){document.getElementById('fw_editor').contentWindow.document.execCommand("CreateLink", false, url);}
return;
break;}
document.getElementById('fw_editor').contentWindow.document.execCommand(id, false, null);}
function colorOver(){this.style.border="1px outset";}
function colorOut(){this.style.border="1px inset";}
function colorClick(){document.getElementById("fw_editor").contentWindow.focus();document.getElementById('fw_editor').contentWindow.document.execCommand("forecolor", false, this.id);}
function btnOver(){var id=this.id;this.style.border="1px solid #0a246a";this.style.background="#b6bdaa";}
function btnOut(){var id=this.id;if((id=="source")&&(fw_sourceMode)){this.style.background="#aad5ff";}else{this.style.background="none";this.style.border="1px solid #e2e0dc";}}
function btnDown(){var id=this.id;this.style.background="#aad5ff";}
function fw_trim(str){return str.replace(/^ss*/, '').replace(/ss*$/, '');}
Please download the above code; save it as JavaScript file (*.js), and put a link with the HTML page to make the editor active. Now our HTML editor is ready to work.
Transfer data to the web server
Our next job is to transfer the HTML source code of the iframe editor to the web server. The easiest way is to use Ajax technology to transfer data to the server. Here I write a JavaScript function to extract the HTML data from the editor.
Code | Download
function getHTML(){
return document.getElementById('fw_editor').contentWindow.document.body.innerHTML;}
If you have any confusion about Ajax data transfer then please the article: Ajax post data example.
Server security
When receiving and processing data from the user or client side the security of the server is probably the most important consideration. Bad user may past harmful JavaScript code which may damage other user when displayed over their computer. So server must suitably measure and filter the received data before they publish.
