I have craeted a HTML editor using asp.net and javscript . But redo and undo is not working in IE while same is working in chrome.Kindly suggest what i can do ?
<%----%>
<img class="dvd" src="../../Images/tool_devid.gif" alt="" />
<a onclick="javascript:fontEdit('justifyleft')" title="Justify Left" class="tip" id="justifyleft">
<img src="../../Images/left.png" alt="" title="Justify Left" /></a>
<a onclick="javascript:fontEdit('justifycenter')" id="justifycenter" class="tip" title="Justify Center">
<img src="../../Images/center.png" alt="" /></a>
<a onclick="javascript:fontEdit('justifyright')" id="justifyright" title="Justify Right" class="tip">
<img src="../../Images/right.png" alt="" /></a>
<img class="dvd" src="../../Images/tool_devid.gif" alt="" />
<a onclick="javascript:fontEdit('insertorderedlist')" id="insertorderedlist" title="Order List" class="tip">
<img src="../../Images/numlist.png" alt="" /></a>
<a onclick="javascript:fontEdit('insertunorderedlist')" id="insertunorderedlist" title="Bullets List" class="tip">
<img src="../../Images/bullist.png" alt="" /></a>
<a onclick="javascript:fontEdit('outdent')" class="tip" id="outdent" title="Indent Less">
<img src="../../Images/outdent.png" alt="" /></a>
<a onclick="javascript:fontEdit('indent')" class="tip" id="indent" title="Indent More">
<img src="../../Images/indent.png" alt="" /></a>
<%--</a><a onclick="ChangeMode()">
<img id="mode" src="images/mode.design.gif" alt="" title="Design View" style="height: 20px; width: 21px; border: none;" />--%>
<a onclick="javascript:fontEdit('undo')" class="tip" id="insertundo" title="Undo">
<img src="../../Images/undo.png" alt="undo" />
</a>
<a onclick="javascript:fontEdit('redo')" class="tip" title="Redo" id="insertredo">
<img src="../../Images/redo.png" alt="redo" />
</a>
<a onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){javascript:fontEdit('createlink',sLnk)} " class="tip" id="insertLink" title="Insert Link">
<img src="../../Images/Link.png" alt="hyperlink" />
</a>
<img class="dvd" src="../../Images/tool_devid.gif" alt="" />
<select id="fonts" class="select" onchange="fontEdit('fontname',this[this.selectedIndex].value)">
<option value="Arial">Font</option>
<option value="Antiqua">Antiqua</option>
<option value="Arial">Arial</option>
<option value="Blackletter">Blackletter</option>
<option value="Calibri">Calibri</option>
<option value="Courier New">Courier New</option>
<option value="Monotype Corsiva">Monotype</option>
<option value="Tahoma">Tahoma</option>
<option value="Times">Times</option>
</select>
<select id="size" class="select" onchange="fontEdit('fontsize',this[this.selectedIndex].value)">
<option value="0">Size</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select id="color" class="select" onchange="fontEdit('forecolor',this[this.selectedIndex].value)">
<option value="color">Color</option>
<option style="color: black;" value="black">Black</option>
<option style="color: red;" value="red">Red</option>
<option style="color: blue;" value="blue">Blue</option>
<option style="color: green;" value="green">Green</option>
<option style="color: #3b3b3b;" value="pink">Pink</option>
</select>
<a onclick="javascript:AddPageBreak1()" class="tip" title="pagebreak" id="pagebreak">
<img src="../../Images/pagebreak.jpg" alt="" />
</a>
</div>
<iframe id="textEditor" ondrop="drop(event);" ondragover="allowDrop(event);" class="txtArea">
</iframe>
</div>
<!--htmlEditor End -->
<!--Letter Clients Start -->
<div class="letterClient" id="divAllimagesContainer" style="display: none;">
<!--Tabs area Start-->
<ul class="tabMenu" id="letterTab">
<li><a href="#panel-1" data-toggle="tab">Logos</a></li>
<li><a href="#panel-2" data-toggle="tab">Signature</a></li>
<li><a href="#panel-3" data-toggle="tab">Bookmarks</a></li>
</ul>
<!--tab end -->
<div class="clear"></div>
<div class="tab-content">
<!--tab panel 1 -->
<div class="tab-pane" id="panel-1">
<div id="divImageLogo" style="display: block;"></div>
</div>
<!--tab panel 2 -->
<div class="tab-pane" id="panel-2">
<div id="divImageSig" style="display: block; margin-bottom: 20px;"></div>
<div id="divImageOthrs" style="display: block;"></div>
</div>
<!--tab panel 3 -->
<div class="tab-pane" id="panel-3">
<div id="dragList" contenteditable="false">
<ul id="divBookMarkContainer" contenteditable="false" class="bookMark"></ul>
</div>
</div>
</div>
<!--tab content end-->
</div>
<!--Letter Clients End -->
<%-- <div id="textEditor" contenteditable="true" style="width: 800px; height: 400px; border: #777 solid 1px;"></div>--%>
<div class="clear"></div>
</div>
I function fontEdit(command, y) {
switch (command) {
case 'bold':
if (document.getElementById('bold').onclick.toString().indexOf("over") != -1) {
document.getElementById('bold').src = "../../Images/bold.png";
}
else {
document.getElementById('bold').src = "../../Images/bold.png";
$("#bold").toggleClass("active");
}
break;
case 'italic':
if (document.getElementById('italic').onclick.toString().indexOf('over') != -1)
document.getElementById('italic').src = '../../Images/italic.png';
else
document.getElementById('italic').src = '../../Images/italic.png';
$("#italic").toggleClass("active");
break;
case 'underline':
if (document.getElementById('underline').onclick.toString().indexOf('over') != -1)
document.getElementById('underline').src = '../../Images/under.png';
else
document.getElementById('underline').src = '../../Images/under.png';
$("#underline").toggleClass("active");
break;
case 'justifyleft':
if (document.getElementById('justifyleft').onclick.toString().indexOf('over') != -1)
document.getElementById('justifyleft').src = '../../Images/left.png';
else
document.getElementById('justifyleft').src = '../../Images/left.png';
break;
case 'justifycenter':
if (document.getElementById('justifycenter').onclick.toString().indexOf('over') != -1)
document.getElementById('justifycenter').src = '../../Images/center.png';
else
document.getElementById('justifycenter').src = '../../Images/center.png';
break;
case 'justifyright':
if (document.getElementById('justifyright').onclick.toString().indexOf('over') != -1)
document.getElementById('justifyright').src = '../../Images/right.png';
else
document.getElementById('justifyright').src = '../../Images/right.png';
break;
case 'insertorderedlist':
if (document.getElementById('insertorderedlist').onclick.toString().indexOf('over') != -1)
document.getElementById('insertorderedlist').src = '../../Images/numlist.png';
else
document.getElementById('insertorderedlist').src = '../../Images/numlist.png';
$("#insertorderedlist").toggleClass("active");
break;
case 'insertunorderedlist':
if (document.getElementById('insertunorderedlist').onclick.toString().indexOf('over') != -1)
document.getElementById('insertunorderedlist').src = '../../Images/bullist.png';
else
document.getElementById('insertunorderedlist').src = '../../Images/bullist.png';
$("#insertunorderedlist").toggleClass("active");
break;
case 'outdent':
if (document.getElementById('outdent').onclick.toString().indexOf('over') != -1)
document.getElementById('outdent').src = '../../Images/outdent.png';
else
document.getElementById('outdent').src = '../../Images/outdent.png';
break;
case 'indent':
if (document.getElementById('indent').onclick.toString().indexOf('over') != -1)
document.getElementById('indent').src = '../../Images/indent.png';
else
document.getElementById('indent').src = '../../Images/indent.png';
break;
case 'default':
break;
}
//getIFrameDocument("textEditor").execCommand(command, "", y);
document.getElementById("textEditor").contentWindow.focus();
document.getElementById("textEditor").contentWindow.document.execCommand(command, "", y);
document.getElementById("textEditor").contentWindow.focus();
}