I am working on this WYSIWYG Editor. I am getting stuck on browser compatibility. It works as it is designed to in Internet Explorer, yet some of the functions do not work in FireFox (toggle mode and headings). I think the problem with both have to do with the hierarchy of nodes. Here is the toggle function code:
javascript Code:
function doToggleView( )
{
if ( viewMode == 1 )
{
if ( browser == "Netscape" )
{
iHTML = document.getElementById ( 'iView' ) .innerHTML ;
document.getElementById ( 'iView' ) .innerText = iHTML;
// Hide all controls
tblCtrls.style .display = 'none' ;
selFont.style .display = 'none' ;
selSize.style .display = 'none' ;
selHeading.style .display = 'none' ;
document.getElementById ( 'iView' ) .focus ( ) ;
viewMode = 2 ; // Code
}
else if ( browser == "Microsoft Internet Explorer" )
{
iHTML = iView.document .body .innerHTML ;
iView.document .body .innerText = iHTML;
// Hide all controls
tblCtrls.style .display = 'none' ;
selFont.style .display = 'none' ;
selSize.style .display = 'none' ;
selHeading.style .display = 'none' ;
iView.focus ( ) ;
viewMode = 2 ; // Code
}
}
else
{
if ( browser == "Netscape" )
{
iText = document.getElementById ( 'iView' ) .innerText ;
document.getElementById ( 'iView' ) .innerText = iText;
// Show all controls
tblCtrls.style .display = 'inline' ;
selFont.style .display = 'inline' ;
selSize.style .display = 'inline' ;
selHeading.style .display = 'inline' ;
document.getElementById ( 'iView' ) .focus ( ) ;
viewMode = 1 ; // WYSIWYG
}
else if ( browser == "Microsoft Internet Explorer" )
{
iText = iView.document .body .innerText ;
iView.document .body .innerHTML = iText;
// Show all controls
tblCtrls.style .display = 'inline' ;
selFont.style .display = 'inline' ;
selSize.style .display = 'inline' ;
selHeading.style .display = 'inline' ;
iView.focus ( ) ;
viewMode = 1 ; // WYSIWYG
}
}
Now my fireFox Error Console doesn't come up with any errors, like object doesn't exist, it doesn't display the HTML. What it displays is not code, but what it looks like from a WYSIWYG. I don't know the problem. If you want to try the script on your computer to get a better understanding, below is the entire source code:
HTML Code:
<html>
<head>
<title> Browser Based HTML Editor </title>
<script language="JavaScript" >
var viewMode = 1; // WYSIWYG
var broswer;
browser = navigator.appName;
function Init()
{
if(browser == "Netscape")
{
document.getElementById('iView').contentDocument.designMode = "on";
}
else if(browser == "Microsoft Internet Explorer")
{
iView.document.designMode = 'On';
}
}
function selOn(ctrl)
{
ctrl.style.borderColor = '#000000';
ctrl.style.backgroundColor = '#B5BED6';
ctrl.style.cursor = 'hand';
}
function selOff(ctrl)
{
ctrl.style.borderColor = '#D6D3CE';
ctrl.style.backgroundColor = '#D6D3CE';
}
function selDown(ctrl)
{
ctrl.style.backgroundColor = '#8492B5';
}
function selUp(ctrl)
{
ctrl.style.backgroundColor = '#B5BED6';
}
function doBold()
{
if(browser == "Netscape")
{
document.getElementById('iView').contentDocument.execCommand('bold', false, null);
}
else if(browser == "Microsoft Internet Explorer")
{
iView.document.execCommand('bold', false, null);
}
}
function doItalic()
{
if(browser == "Netscape")
{
document.getElementById('iView').contentDocument.execCommand('italic', false, null);
}
else if(browser == "Microsoft Internet Explorer")
{
iView.document.execCommand('italic', false, null);
}
}
function doUnderline()
{
if(browser == "Netscape")
{
document.getElementById('iView').contentDocument.execCommand('underline', false, null);
}
else if(browser == "Microsoft Internet Explorer")
{
iView.document.execCommand('underline', false, null);
}
}
function doLeft()
{
if(browser == "Netscape")
{
document.getElementById('iView').contentDocument.execCommand('justifyleft', false, null);
}
else if(browser == "Microsoft Internet Explorer")
{
iView.document.execCommand('justifyleft', false, null);
}
}
function doCenter()
{
if(browser == "Netscape")
{
document.getElementById('iView').contentDocument.execCommand('justifycenter', false, null);
}
else if(browser == "Microsoft Internet Explorer")
{
iView.document.execCommand('justifycenter', false, null);
}
}
function doRight()
{
if(browser == "Netscape")
{
document.getElementById('iView').contentDocument.execCommand('justifyright', false, null);
}
else if(browser == "Microsoft Internet Explorer")
{
iView.document.execCommand('justifyright', false, null);
}
}
function doOrdList()
{
if(browser == "Netscape")
{
document.getElementById('iView').contentDocument.execCommand('insertorderedlist', false, null);
}
else if(browser == "Microsoft Internet Explorer")
{
iView.document.execCommand('insertorderedlist', false, null);
}
}
function doBulList()
{
if(browser == "Netscape")
{
document.getElementById('iView').contentDocument.execCommand('insertunorderedlist', false, null);
}
else if(browser == "Microsoft Internet Explorer")
{
iView.document.execCommand('insertunorderedlist', false, null);
}
}
function doForeCol()
{
var fCol = prompt('Enter foreground color', '');
if(browser == "Netscape")
{
if(fCol != null)
document.getElementById('iView').contentDocument.execCommand('forecolor', false, fCol);
}
else if(browser == "Microsoft Internet Explorer")
{
if(fCol != null)
iView.document.execCommand('forecolor', false, fCol);
}
}
function doBackCol()
{
var bCol = prompt('Enter background color', '');
if(browser == "Netscape")
{
if(bCol != null)
document.getElementById('iView').contentDocument.execCommand('backcolor', false, bCol);
}
else if(browser == "Microsoft Internet Explorer")
{
if(bCol != null)
iView.document.execCommand('backcolor', false, bCol);
}
}
function doLink()
{
if(browser == "Netscape")
{
document.getElementById('iView').contentDocument.execCommand('createlink');
}
else if(browser == "Microsoft Internet Explorer")
{
iView.document.execCommand('createlink');
}
}
function doImage()
{
var imgSrc = prompt('Enter image location', '');
if(browser == "Netscape")
{
if(imgSrc != null)
document.getElementById('iView').contentDocument.execCommand('insertimage', false, imgSrc);
}
else if(browser == "Microsoft Internet Explorer")
{
if(imgSrc != null)
iView.document.execCommand('insertimage', false, imgSrc);
}
}
function doRule()
{
if(browser == "Netscape")
{
document.getElementById('iView').contentDocument.execCommand('inserthorizontalrule', false, null);
}
else if(browser == "Microsoft Internet Explorer")
{
iView.document.execCommand('inserthorizontalrule', false, null);
}
}
function doFont(fName)
{
if(browser == "Netscape")
{
if(fName != '')
document.getElementById('iView').contentDocument.execCommand('fontname', false, fName);
}
else if(browser == "Microsoft Internet Explorer")
{
if(fName != '')
iView.document.execCommand('fontname', false, fName);
}
}
function doSize(fSize)
{
if(browser == "Netscape")
{
if(fSize != '')
document.getElementById('iView').contentDocument.execCommand('fontsize', false, fSize);
}
else if(browser == "Microsoft Internet Explorer")
{
if(fSize != '')
iView.document.execCommand('fontsize', false, fSize);
}
}
function doHead(hType)
{
if(browser == "Netscape")
{
if(hType != '')
{
document.getElementById('iView').contentDocument.execCommand('formatblock', false, hType);
doFont(selFont.options[selFont.selectedIndex].value);
}
}
else if(browser == "Microsoft Internet Explorer")
{
if(hType != '')
{
iView.document.execCommand('formatblock', false, hType);
doFont(selFont.options[selFont.selectedIndex].value);
}
}
}
function doToggleView()
{
if(viewMode == 1)
{
if(browser == "Netscape")
{
iHTML = document.getElementById('iView').innerHTML;
document.getElementById('iView').innerText = iHTML;
// Hide all controls
tblCtrls.style.display = 'none';
selFont.style.display = 'none';
selSize.style.display = 'none';
selHeading.style.display = 'none';
document.getElementById('iView').focus();
viewMode = 2; // Code
}
else if(browser == "Microsoft Internet Explorer")
{
iHTML = iView.document.body.innerHTML;
iView.document.body.innerText = iHTML;
// Hide all controls
tblCtrls.style.display = 'none';
selFont.style.display = 'none';
selSize.style.display = 'none';
selHeading.style.display = 'none';
iView.focus();
viewMode = 2; // Code
}
}
else
{
if(browser == "Netscape")
{
iText = document.getElementById('iView').innerText;
document.getElementById('iView').innerText = iText;
// Show all controls
tblCtrls.style.display = 'inline';
selFont.style.display = 'inline';
selSize.style.display = 'inline';
selHeading.style.display = 'inline';
document.getElementById('iView').focus();
viewMode = 1; // WYSIWYG
}
else if(browser == "Microsoft Internet Explorer")
{
iText = iView.document.body.innerText;
iView.document.body.innerHTML = iText;
// Show all controls
tblCtrls.style.display = 'inline';
selFont.style.display = 'inline';
selSize.style.display = 'inline';
selHeading.style.display = 'inline';
iView.focus();
viewMode = 1; // WYSIWYG
}
}
}
</script>
<style>
.butClass
{
border: 1px solid;
border-color: #D6D3CE;
}
.tdClass
{
padding-left: 3px;
padding-top:3px;
}
</style>
<body onLoad="Init()" >
<table id="tblCtrls" width="415px" height="30px" border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE" >
<tr>
<td class="tdClass" >
<img alt="Bold" class="butClass" src="bold.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doBold()" >
<img alt="Italic" class="butClass" src="italic.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doItalic()" >
<img alt="Underline" class="butClass" src="underline.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doUnderline()" >
<img alt="Left" class="butClass" src="left.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doLeft()" >
<img alt="Center" class="butClass" src="center.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doCenter()" >
<img alt="Right" class="butClass" src="right.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doRight()" >
<img alt="Ordered List" class="butClass" src="ordlist.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doOrdList()" >
<img alt="Bulleted List" class="butClass" src="bullist.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doBulList()" >
<img alt="Text Color" class="butClass" src="forecol.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doForeCol()" >
<img alt="Background Color" class="butClass" src="bgcol.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doBackCol()" >
<img alt="Hyperlink" class="butClass" src="link.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doLink()" >
<img alt="Image" class="butClass" src="image.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doImage()" >
<img alt="Horizontal Rule" class="butClass" src="rule.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doRule()" >
</td>
</tr>
</table>
<iframe id="iView" style="width: 415px; height:205px; display: block;" >
</iframe>
<table width="415px" height="30px" border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE" >
<tr>
<td class="tdClass" colspan="1" width="80%" >
<select name="selFont" onChange="doFont(this.options[this.selectedIndex].value)" >
<option value="" > -- Font --</option>
<option value="Arial" > Arial</option>
<option value="Courier" > Courier</option>
<option value="Sans Serif" > Sans Serif</option>
<option value="Tahoma" > Tahoma</option>
<option value="Verdana" > Verdana</option>
<option value="Wingdings" > Wingdings</option>
</select>
<select name="selSize" onChange="doSize(this.options[this.selectedIndex].value)" >
<option value="" > -- Size --</option>
<option value="1" > Very Small</option>
<option value="2" > Small</option>
<option value="3" > Medium</option>
<option value="4" > Large</option>
<option value="5" > Larger</option>
<option value="6" > Very Large</option>
</select>
<select name="selHeading" onChange="doHead(this.options[this.selectedIndex].value)" >
<option value="" > -- Heading --</option>
<option value="Heading 1" > H1</option>
<option value="Heading 2" > H2</option>
<option value="Heading 3" > H3</option>
<option value="Heading 4" > H4</option>
<option value="Heading 5" > H5</option>
<option value="Heading 6" > H6</option>
</select>
</td>
<td class="tdClass" colspan="1" width="20%" align="right" > <img alt="Toggle Mode" class="butClass" src="mode.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doToggleView()" > </td>
</tr>
</table>
</body>
</html> Any help would be most appreciated.
Linear Mode
