Følgende kode til FF skulle i kunne gøre nogenlunde det samme som IE koden. Men der er nogle forskelle:
window.getSelection() returnerer ikke tekst der valgt i INPUT eller TEXTAREA, men gerne fra DIV tags (jeg ved ikke hvorfor, jeg er lidt på ubetrådt grund lige her).
Derfor har jeg valg at man kan indsætte sin tekst i en TEXTAREA tag, hvorefter teksten bliver kopieret til DIV tag'en når man klikker udenfor TEXAREA tag'en (men kun hvis teksten man har kopieret ind er forskellig fra den tekst der er der i forvejen).
Indrømmet, det er besværligt, men jeg har ikke kunne finde anden løsning. Men jeg er sikker på man kan gøre det på en eller anden måde.
<html><head><style>
button {
font:bold 12pt sans-serif;
}
textarea, div {
width:400px;
height:100px;
font:8pt verdana;
overflow:auto;
border:2px black solid;
padding:5px;
}
</style><script>
function doChange() {
// Fjern < og > tegn for ikke at ødelægge layoutet og indsæt teksten fra textarea i DIV'en
document.getElementById("EDITTEXT").innerHTML =
document.getElementById("TXT").value.replace(/</g,"<").replace(/>/g,">");
}
var range, newnode;
function getRange() {
// Hent den valgte tekst til et Range objekt
selection = window.getSelection();
range = selection.getRangeAt(0);
}
function insertRange() {
// Erstat den valgte tekst med BBCode tekst
range.deleteContents();
range.insertNode(newnode);
}
function insideDiv() {
// Hent DIV tag'en til et Range objekt
range2 = document.createRange();
range2.selectNodeContents(document.getElementById("EDITTEXT"));
// Check om der er valgt en tekst og om teksten er inden for DIV tag'en
return (range.startContainer==range.endContainer) &&
(range2.compareBoundaryPoints(Range.START_TO_END, range)==1) &&
(range2.compareBoundaryPoints(Range.END_TO_START, range)==-1);
}
function decorateText(tag) {
getRange();
if(insideDiv()) {
newnode = document.createTextNode("["+tag+"]"+range+"[/"+tag+"]");
insertRange();
}
}
</script></head>
<div id="EDITTEXT"></div>
<button onclick="decorateText('b')">[ b ]</button>
<button onclick="decorateText('i')">[ i ]</button>
<textarea id="TXT" onchange="doChange()"></textarea>
</html>