Okay, I am in the middle of making an RTE (for the hell of it and all) but I have a problem. 5 lines of code make all the difference between which browsers it works in. Here is what I mean.
This version works in IE:
CODE
<style>
.RTE{
width: 500px;
height: 400px;
}
</style>
<script>
onerror=handleErr;
var txt="";
function handleErr(msg,url,l){
txt="There was an error on this page.\n\n";
txt+="Error: " + msg + "\n";
txt+="URL: " + url + "\n";
txt+="Line: " + l + "\n\n";
txt+="Click OK to continue.\n\n";
alert(txt);
return true;
}
var isRichText = false;
var isIE;
var isGecko;
var isSafari;
var isKonqueror;
var cssFile = '';
function initRTE(){
var ua = navigator.userAgent.toLowerCase();
isIE = ((ua.indexOf("msie") != -1) && (ua.indexOf("opera") == -1) && (ua.indexOf("webtv") == -1));
isGecko = (ua.indexOf("gecko") != -1);
isSafari = (ua.indexOf("safari") != -1);
isKonqueror = (ua.indexOf("konqueror") != -1);
if(document.getElementById && document.designMode && !isSafari && !isKonqueror){
isRichText = true;
}
document.write('<iframe id="RTE_0" class="RTE" width="500px" height="400px"></iframe>');
enableDesignMode(RTE_0, "Testing", false);
}
function enableDesignMode(rte, html, readOnly){
var frameHtml = "<html id=\"" + rte + "\">\n";
frameHtml += "<head>\n";
if(cssFile.length > 0){
frameHtml += "<link media=\"all\" type=\"text/css\" href=\"" + cssFile + "\" rel=\"stylesheet\">\n";
}
else{
frameHtml += "<style>\n";
frameHtml += "body {\n";
frameHtml += "background: #FFFFFF;\n";
frameHtml += "margin: 0px;\n";
frameHtml += "padding: 0px;\n";
frameHtml += "}\n";
frameHtml += "</style>\n";
}
frameHtml += "</head>\n";
frameHtml += "<body>\n";
frameHtml += html + "\n";
frameHtml += "</body>\n";
frameHtml += "</html>";
if(document.all){
var oRTE = rte.document;
oRTE.open();
oRTE.write(frameHtml);
oRTE.close();
if(!readOnly){
oRTE.designMode = "On";
}
}
else{
try{
if(!readOnly){
document.getElementById(rte).contentDocument.designMode = "on";
}
try{
var oRTE = document.getElementById(rte).contentWindow.document;
oRTE.open();
oRTE.write(frameHtml);
oRTE.close();
if(isGecko && !readOnly){
oRTE.addEventListener("keypress", kb_handler, true);
}
}
catch(e){
alert("Error preloading content.");
}
}
catch(e){
if(isGecko){
setTimeout("enableDesignMode('" + rte + "', '" + html + "', " + readOnly + ");", 10);
}
else{
return false;
}
}
}
}
function kb_handler(evt){
var rte = evt.target.id;
if(evt.ctrlKey){
var key = String.fromCharCode(evt.charCode).toLowerCase();
var cmd = '';
switch(key){
case 'b': cmd = "bold"; break;
case 'i': cmd = "italic"; break;
case 'u': cmd = "underline"; break;
};
if(cmd){
rteCommand(rte, cmd, null);
evt.preventDefault();
evt.stopPropagation();
}
}
}
function rteCommand(rte, command, option){
var oRTE;
if(document.all){
oRTE = rte;
}
else{
oRTE = document.getElementById(rte).contentWindow;
}
try{
oRTE.focus();
oRTE.document.execCommand(command, false, option);
oRTE.focus();
}
catch(e){
}
}
</script>
<body onload="initRTE()">
And this version works in Mozilla:
CODE
<style>
.RTE{
width: 500px;
height: 400px;
}
</style>
<script>
var isRichText = true;
var isIE;
var isGecko;
var isSafari;
var isKonqueror;
var cssFile = '';
function initRTE(){
var ua = navigator.userAgent.toLowerCase();
isIE = ((ua.indexOf("msie") != -1) && (ua.indexOf("opera") == -1) && (ua.indexOf("webtv") == -1));
isGecko = (ua.indexOf("gecko") != -1);
isSafari = (ua.indexOf("safari") != -1);
isKonqueror = (ua.indexOf("konqueror") != -1);
if(document.getElementById && document.designMode && !isSafari && !isKonqueror){
isRichText = true;
}
}
function writeRTE(){
document.writeln('<iframe id="RTE_0" name="RTE_0" class="RTE"></iframe>');
enableDesignMode('RTE_0', "Testing", false);
}
function enableDesignMode(rte, html, readOnly){
var frameHtml = "<html id=\"" + rte + "\">\n";
frameHtml += "<head>\n";
if(cssFile.length > 0){
frameHtml += "<link media=\"all\" type=\"text/css\" href=\"" + cssFile + "\" rel=\"stylesheet\">\n";
}
else{
frameHtml += "<style>\n";
frameHtml += "body {\n";
frameHtml += "background: #FFFFFF;\n";
frameHtml += "margin: 0px;\n";
frameHtml += "padding: 0px;\n";
frameHtml += "}\n";
frameHtml += "</style>\n";
}
frameHtml += "</head>\n";
frameHtml += "<body>\n";
frameHtml += html + "\n";
frameHtml += "</body>\n";
frameHtml += "</html>";
if(document.all){
var oRTE = rte.document;
oRTE.open();
oRTE.write(frameHtml);
oRTE.close();
if(!readOnly){
oRTE.designMode = "On";
}
}
else{
try{
if(!readOnly){
document.getElementById(rte).contentDocument.designMode = "on";
}
try{
var oRTE = document.getElementById(rte).contentWindow.document;
oRTE.open();
oRTE.write(frameHtml);
oRTE.close();
if(isGecko && !readOnly){
oRTE.addEventListener("keypress", kb_handler, true);
}
}
catch(e){
alert("Error preloading content.");
}
}
catch(e){
if(isGecko){
setTimeout("enableDesignMode('" + rte + "', '" + html + "', " + readOnly + ");", 10);
}
else{
return false;
}
}
}
}
function kb_handler(evt){
var rte = evt.target.id;
if(evt.ctrlKey){
var key = String.fromCharCode(evt.charCode).toLowerCase();
var cmd = '';
switch(key){
case 'b': cmd = "bold"; break;
case 'i': cmd = "italic"; break;
case 'u': cmd = "underline"; break;
};
if(cmd){
rteCommand(rte, cmd, null);
evt.preventDefault();
evt.stopPropagation();
}
}
}
function rteCommand(rte, command, option){
var oRTE;
if(document.all){
oRTE = rte;
}
else{
oRTE = document.getElementById(rte).contentWindow;
}
try{
oRTE.focus();
oRTE.document.execCommand(command, false, option);
oRTE.focus();
}
catch(e){
}
}
</script>
<body onload="initRTE()">
<script>
writeRTE();
</script>
I am looking for a way to make the code work in BOTH IE and Mozilla without having to change which one I am using (because that is just annoying). Can anyone help me out here?
31 Jul, 2008 - 08:52 PM
|