<span style= "FONT-SIZE:14PX;" ><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" >
<title> Rich Text editor </title>
<body>
<fieldset>
<legend> Edit Area </legend>
<div>
<form>
Font Color:
<select onchange= "Setfontcolor (This)" >
<option value= "BLACK" >black </option>
<option value= "Red" >red </option>
<option value= "Green" >green </option>
<option value= "Blue" >blue </option>
</select>
Font style:
<select onchange= "Setfontstyle (This)" >
<option value= "Bold" >bold </option>
<option value= "Italic" >italic </option>
<option value= "Underline" >underline </option>
<option value= "Striketthrough" >striketthrough </option>
</select>
Font Name:
<select onchange= "setfontfamily (This)" >
<option value= "serif" >serif </option>
<option value= "Sans-serif" >sans-serif </option>
<option value= "monospace" >monospace </option>
<option value= "Comic Sans MS" >comic sans </option>
</select>
</form>
</div>
<br/>
<div id= "Editabletext" contenteditable= "true" style= "width:400px;min-height:100px;border:2px dashed #ccc" > </div>
</fieldset>
<script type= "Text/javascript" >
function Setfontcolor (obj)
{
Document.execcommand ("ForeColor", False,obj.value);
}
function Setfontstyle (obj)
{
Document.execcommand (Obj.value,false,null);
}
function setfontfamily (obj)
{
Document.execcommand ("FontName", False,obj.value);
}
</script>
</body>
On-line Demo: http://jsfiddle.net/Web_Code/nPNv3/embedded/result/deficiencies also please understand, and put forward correct methods
