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(editdiv.isConte
ntEditable==true) document.execCommand("undo");'><img src="/images/editor/undo.gif" align="absmiddle" width="25" height="24" border="0" title="<?=msg("Undo")?>" onmouseover="javascript:toggleHighLight(this);return false;" onmouseout="javascript:toggleHighLight(this);return false;" class="highlighthidden"></a>


<a href="javascript:void(0);" onclick='document.getElementById("editdiv").focus();if(editdiv.isConte
ntEditable==true) document.execCommand("redo");'><img src="/images/editor/redo.gif" align="absmiddle" width="25" height="24" border="0" title="<?=msg("Redo")?>" onmouseover="javascript:toggleHighLight(this);return false;" onmouseout="javascript:toggleHighLight(this);return false;" class="highlighthidden"></a>


For non IE:


<a href="javascript:void(0);" onclick="javascript:document.getElementById('editdiv').focus();documen
t.getElementById('editdiv').contentWindow.document.execCommand('undo',
false,null);"><img src="/images/editor/undo.gif" align="absmiddle" width="25" height="24" border="0" title="<?=msg("Undo")?>" onmouseover="javascript:toggleHighLight(this);return false;" onmouseout="javascript:toggleHighLight(this);return false;" class="highlighthidden"></a>


<a href="javascript:void(0);" onclick="javascript:document.getElementById('editdiv').focus();documen
t.getElementById('editdiv').contentWindow.document.execCommand('redo',
false,null);"><img src="/images/editor/redo.gif" align="absmiddle" width="25" height="24" border="0" title="<?=msg("Redo")?>" onmouseover="javascript:toggleHighLight(this);return false;" onmouseout="javascript:toggleHighLight(this);return false;" class="highlighthidden"></a>




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>