Hej, har fået hjælp af ham som lavede artiklen, men han har ikke tid til at hjælpe mere lidt pt. så ville høre om der er nogle af jer, som kan hjælpe med at finde denne fejl: uncaught exception: null
som den kommer med i Firefox, men ikke i Internet exploere.
Koden kommer her:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<script type="text/javascript">
function RichEdit(sEditor)
{
// For at editoren skal virke, er det nødvendigt at document.designMode
// og document.getElementById er tilgængelige
if(document.designMode && document.getElementById)
this.bEditable = true;
else
this.bEditable = false;
// Hvis vi alligevel ikke kan redigere dokumentet, kan resten af koden
// være ligegyldig.
if(!this.bEditable)
{
alert('Din browser understøtter ikke WYSIWYG-editoren!');
return false;
}
// Opret en variabel til at håndtere iframet, via ID'et angivet i sEditor
this.richEdit = document.getElementById(sEditor).contentWindow;
this.richEdit.document.write("Standard tekst!");
// Line tilbage til dette objekt
document.getElementById(sEditor).oEditor = this;
// Tjek browser-typen
if(navigator.userAgent.toLowerCase().indexOf("msie") != -1)
{
// Skift designMode til on (i IE)
this.richEdit.document.designMode = "on";
}
else
{
// I FF bruger vi en lidt anderledes fremgangsmåde
document.getElementById(sEditor).contentDocument.designMode = "on";
}
// Tilføj events
if(document.attachEvent)
{
this.richEdit.document.attachEvent('onclick', function(){RichEdit.prototype.indicateStyle(sEditor);});
this.richEdit.document.attachEvent('onkeydown', function(){RichEdit.prototype.indicateStyle(sEditor);});
}
else if(document.addEventListener)
{
this.richEdit.document.addEventListener('click', function(){RichEdit.prototype.indicateStyle(sEditor);}, false);
this.richEdit.document.addEventListener('keydown', function(){RichEdit.prototype.indicateStyle(sEditor);}, false);
}
// Vis menuen
this.richEdit.document.oMenu = new Menu("EditorMenu", sEditor, [["bold.gif", "Bold"], ["italic.gif", "Italic"], ["underline.gif", "Underline"]]);
}
RichEdit.prototype.applyStyle = function(sEditor, sCommand, sOption) {
// Vi sikrer os, at editoren er i fokus, når vi tilføjer layoutet,
// da browseren ellers kan blive forvirret over hvor den skal tilføje
// layoutet.
this.richEdit.focus();
// Tilføj det ønskede layout
this.richEdit.document.execCommand(sCommand, false, sOption);
// Og slut af med igen at fokusere editoren, så brugeren kan
// skrive uforstyrret videre.
this.richEdit.focus();
RichEdit.prototype.indicateStyle(sEditor);
}
RichEdit.prototype.indicateStyle = function(sEditor)
{
// Lav en variabel, som kan håndtere editoren
var oEditor = document.getElementById(sEditor).contentWindow.document;
// Lav et array, som indeholder de former for formatering, som editoren understøtter
// Denne gang laver vi det to-dimensionelt. Det første felt angiver hvilken
// Formateringstype vi snakker om (Bold, Italic, Underline osv.), og den
// Næste angiver hvilket nummer i rækken af knapper, den pågældende
// knap er (starter med 0!).
var aStyles = [["Bold", 0], ["Italic", 1], ["Underline", 2]];
// Løb arrayet igennem, og find ud af hvilke af formateringerne der er hhv. til/fra.
var sRes = "";
for(var i = 0; i < aStyles.length; i++)
{
if(oEditor.queryCommandState(aStyles[i][0]))
{
// Den pågældende formatering er slået til
oEditor.oMenu.aButtons[aStyles[i][1]].aStandard = oEditor.oMenu.oActive;
oEditor.oMenu.aButtons[aStyles[i][1]].aOver = oEditor.oMenu.oDown;
oEditor.oMenu.aButtons[aStyles[i][1]].aDown = oEditor.oMenu.oDown;
}
else
{
// Den pågældende formatering er ikke slået til
oEditor.oMenu.aButtons[aStyles[i][1]].aStandard = oEditor.oMenu.oStandard;
oEditor.oMenu.aButtons[aStyles[i][1]].aOver = oEditor.oMenu.oOver;
oEditor.oMenu.aButtons[aStyles[i][1]].aDown = oEditor.oMenu.oDown;
}
}
}
function Menu(sParent, sEditor, aButtons)
{
// Lav en variabel til at håndtere det div-tag, som knapperne skal "puttes ind i"
var oParent = document.getElementById(sParent);
// Opret et array, som senere kan bruges til at håndtere knapperne med
this.aButtons = new Array();
// De styles, som knapperne skal have ved de forskellige stadier
this.aStandard = {"background":"none"}
this.aOver = {"backgroundColor":"#0000FF"}
this.aDown = {"backgroundColor":"#00FF00"}
this.aActive = {"backgroundColor":"#FF0000"}
// Lav en knap for hvert felt i aButtons arrayet
for(var i = 0; i < aButtons.length; i++)
{
// Lav knappen
var oBtn = document.createElement('img');
oBtn.src = aButtons[i][0];
// Gem den handling, som knappen skal udføre
oBtn.sAction = aButtons[i][1];
// Tilføj styles, som knappen benytter ved de forskellige stadier
// - Hvis denne aktiveres, så bliver aActive sat som aStandard og
// aDown sat som aOver & aDown.
oBtn.aStandard = this.aStandard;
oBtn.aOver = this.aOver;
oBtn.aDown = this.aDown;
// Indiker det aktive stadie (aStandard)
oBtn.sActive = "aStandard";
// Line-back til denne klasse, så vi kan kontakte den igen,
// når knappen aktiveres, og kan hente de nye styles
oBtn.oOwner = this;
// Tilføj events
if(document.attachEvent)
{
oBtn.attachEvent('onmouseover', Menu.prototype.mouseOver);
oBtn.attachEvent('onmouseout', Menu.prototype.mouseOut);
oBtn.attachEvent('onmousedown', Menu.prototype.mouseDown);
oBtn.attachEvent('onmouseup', Menu.prototype.mouseUp);
oBtn.attachEvent('onclick', function(e){Menu.prototype.click(e, sEditor);});
}
else if(document.addEventListener)
{
oBtn.addEventListener('onmouseover', Menu.prototype.mouseOver);
oBtn.addEventListener('onmouseout', Menu.prototype.mouseOut);
oBtn.addEventListener('onmousedown', Menu.prototype.mouseDown);
oBtn.addEventListener('onmouseup', Menu.prototype.mouseUp);
oBtn.addEventListener('onclick', function(e){Menu.prototype.click(e, sEditor);});
}
// Tilføj en variabel til at håndtere knappen med i this.aButtons
this.aButtons.push(oBtn);
// Vis knappen
oParent.appendChild(oBtn);
}
}
Menu.prototype.mouseOver = function(e)
{
// Sørg for at e (event) er defineret
if(!e) var e = window.event;
// Lav en variabel, som kan håndtere den knap, som udløste eventet
if(e.srcElement) var oSrc = e.srcElement;
else if(e.target) var oSrc = e.target;
// Opdater layoutet af knappen
for(var s in oSrc.aOver) oSrc.style[s] = oSrc.aOver[s];
}
Menu.prototype.mouseOut = function(e) {
// Sørg for at e (event) er defineret
if(!e) var e = window.event;
// Lav en variabel, som kan håndtere den knap, som udløste eventet
if(e.srcElement) var oSrc = e.srcElement;
else if(e.target) var oSrc = e.target;
// Opdater layoutet af knappen
for(var s in oSrc.aStandard) oSrc.style[s] = oSrc.aStandard[s];
}
Menu.prototype.mouseDown = function(e) {
// Sørg for at e (event) er defineret
if(!e) var e = window.event;
// Lav en variabel, som kan håndtere den knap, som udløste eventet
if(e.srcElement) var oSrc = e.srcElement;
else if(e.target) var oSrc = e.target;
// Opdater layoutet af knappen
for(var s in oSrc.aDown) oSrc.style[s] = oSrc.aDown[s];
}
Menu.prototype.mouseUp = function(e) {
// Sørg for at e (event) er defineret
if(!e) var e = window.event;
// Lav en variabel, som kan håndtere den knap, som udløste eventet
if(e.srcElement) var oSrc = e.srcElement;
else if(e.target) var oSrc = e.target;
// Opdater layoutet af knappen
for(var s in oSrc.aOver) oSrc.style[s] = oSrc.aOver[s];
}
Menu.prototype.click = function(e, sEditor) {
// Sørg for at e (event) er defineret
if(!e) var e = window.event;
// Lav en variabel, som kan håndtere den knap, som udløste eventet
if(e.srcElement) var oSrc = e.srcElement;
else if(e.target) var oSrc = e.target;
// Kald funktionen til at opdatere layoutet af teksten
document.getElementById(sEditor).oEditor.applyStyle(sEditor, oSrc.sAction, null);
}
function initialize() {
// Husk at angive ID'et på den iframe, som skal indeholde editoren her
richEdit = new RichEdit('Editor');
}
</script>
</head>
<body onload="initialize();">
<div id="EditorMenu"></div>
<iframe id="Editor"></iframe>
</body>
</html>
Håber i kan hjælpe!