We create a div which should be specified by "CONTENTEDITABLE" and set its id to editdiv as follows:


<div CONTENTEDITABLE id="editdiv" name="editdiv" style="background-color:BACKGROUNDCOLOR;overflow:auto;width:WIDTH;heig
ht:HEIGHT;border:1px solid BORDERCOLOR;font-family:FONTFAMILY;font-size:FONTSIZE;color:FONTCOLOR;
padding:5px;"></div>


BACKGROUNDCOLOR, BORDERCOLOR, FONTCOLOR, FONTFAMILY, FONTCOLOR, WIDTH, and HEIGHT are up to the developers choice.


We have two versions of code, because parameters of execCommand for IE are differ from those of non IE browsers such as Firefox, Chrome, Safari, etc.


For IE:


<a href="javascript:void(0);" onclick="document.getElementById('editdiv').focus();if(document.getEle
mentById('editdiv').isContentEditable==true) document.execCommand('bold');"><img src="/images/editor/bold.gif" align="absmiddle" width="25" height="24" border="0" title="Bold (Ctrl+B)" onmouseover="javascript:showHighLight(this);return false;" onmouseout="javascript:showHighLight(this);return false;" class="highlighthidden"></a>

<a href="javascript:void(0);" onclick="document.getElementById('editdiv').focus();if(document.getEle
mentById('editdiv').isContentEditable==true) document.execCommand('italic');"><img src="/images/editor/italic.gif" align="absmiddle" width="25" height="24" border="0" title="Italic (Ctrl+I)" onmouseover="javascript:showHighLight(this);return false;" onmouseout="javascript:showHighLight(this);return false;" class="highlighthidden"></a>

<a href="javascript:void(0);" onclick="document.getElementById('editdiv').focus();if(document.getEle
mentById('editdiv').isContentEditable==true) document.execCommand('underline');"><img src="/images/editor/underline.gif" align="absmiddle" width="25" height="24" border="0" title="Underline (Ctrl+U)" onmouseover="javascript:showHighLight(this);return false;" onmouseout="javascript:showHighLight(this);return false;" class="highlighthidden"></a>&nbsp;<img src="/images/editor/vbar.gif" align="absmiddle" width="2" height="16" border="0" title="">




For non IE:


<a href="javascript:void(0);" onclick="javascript:document.getElementById('editdiv').focus();if(docu
ment.getElementById('editdiv').isContentEditable==true) document.execCommand('bold',false,null);"><img src="/images/editor/bold.gif" align="absmiddle" width="25" height="24" border="0" title="Bold (Ctrl+B)" onmouseover="javascript:showHighLight(this);return false;" onmouseout="javascript:showHighLight(this);return false;" class="highlighthidden"></a>

<a href="javascript:void(0);" onclick="document.getElementById('editdiv').focus();if(document.getEle
mentById('editdiv').isContentEditable==true) document.execCommand('italic',false,null);"><img src="/images/editor/italic.gif" align="absmiddle" width="25" height="24" border="0" title="Italic (Ctrl+I)" onmouseover="javascript:showHighLight(this);return false;" onmouseout="javascript:showHighLight(this);return false;" class="highlighthidden"></a>

<a href="javascript:void(0);" onclick="javascript:document.getElementById('editdiv').focus();if(docu
ment.getElementById('editdiv').isContentEditable==true) document.execCommand('underline',false,null);"><img src="/images/editor/underline.gif" align="absmiddle" width="25" height="24" border="0" title="Underline (Ctrl+U)" onmouseover="javascript:showHighLight(this);return false;" onmouseout="javascript:showHighLight(this);return false;" class="highlighthidden"></a>&nbsp;<img src="/images/editor/vbar.gif" align="absmiddle" width="2" height="16" border="0" title="">




We use a showHighLight javascript function to make image highlight on mouse over or out.


<script language="javascript" type="text/javascript" charset="utf-8">
function showHighLight(div) {
if (div) {
curclass = div.className;
curclass = curclass == 'highlightvisible' ? 'highlighthidden' : 'highlightvisible';
div.className = curclass;
}
}
</script>