Javascript: Mini-Editor für Websites

Wer HTML-Felder mit Formatierungskomfort ausstatten will, muss nicht gleich einen aufwändigen Editor-Aufsatz verwenden. Oft genügt es schon, wenn der Benutzer per Button Textteile mit einfachen HTML-Tags auszeichnen kann, etwa für “fett” oder “kursiv”. Wir zeigen Ihnen zwei Javascript-Funktionen, die den markierten Textteil eines Feldes entsprechend verändern:

<script language=”JavaScript”><!–

function getSelection(sFeld) {

oFeld = document.getElementsByName(sFeld).item(0);

// Gecko-basierter Browser?

if(oFeld.selectionStart){

nStart = oFeld.selectionStart;

nEnde = oFeld.selectionEnd;

strRetval = oFeld.value.substr(nStart, nEnde-nStart);

}

// Test auf Internet Explorer

else if (document.selection)

strRetval = document.selection.createRange().text;

else

alert(“Ihr Browser kann das nicht”);

return(strRetval);

}

function setSelection(sFeld, sNeueSel) {

// Gecko-basierter Browser?

if(oFeld.selectionStart){

oFeld = document.getElementsByName(sFeld).item(0);

nStart = oFeld.selectionStart;

nEnde = oFeld.selectionEnd;

sVorText = oFeld.value.substr(0,nStart);

sNachText = oFeld.value.substr(nEnde);

oFeld.value = sVorText + sNeueSel + sNachText;

}

// Test auf Internet Explorer

else if (document.selection ){

oRange = document.selection.createRange();

oRange.text = sNeueSel;

document.selection.empty()

}

else

alert(“Ihr Browser kann das nicht”);

}

function kursiv() {

strTmp = getSelection(‘meinfeld’);

if (strTmp.length>0)

setSelection(‘meinfeld’, ‘<i>’+strTmp+'</i>’);

}

function link() {

strTmp = getSelection(‘meinfeld’);

strLink = prompt(“URL eingeben”, “http://”);

if (strTmp.length>0 && strLink.length>0)

setSelection(‘meinfeld’, ‘<a href=”‘+strLink+'”>’+

strTmp+'</a>’);

}

//–></script>

Die Funktionen im Listing

Die Funktion getSelection() gibt den Inhalt der Markierung eines Feldes zurück und setSelection() ersetzt die Selektion mit dem übergebenen Wert. Die notwendige Logik ist im Internet Explorer und Netscape/Firefox vollkommen anders gelöst, so dass man jeweils andere Wege gehen muss. Während der IE ein Selection-Objekt für das ganze Dokument kennt, gibt es in der Netscape-Fraktion Eigenschaften eines Feldes, die anzeigen, wo die Markierung beginnt und wo sie endet. Der Browser Safari unter Mac OS X basiert zwar auf der Gecko-Engine, wie Netscape und Firefox, kennt aber erst in der aktuellen Version 2.0.3 die Behandlung der Feldselektion per Javascript.

Die Funktion kursiv() im Listing zeigt beispielhaft, wie man die beiden Funktionen zum Behandeln des selektierten Textes einsetzt. Sie holt sich den Inhalt der Selektion, umgibt den Textausschnitt mit den Tags

<i>…</i>

für kursive Schrift und ersetzt den markierten Textteil damit. Die Funktion kursiv() würde man am besten über den onClick-Event durch einen Button aufrufen lassen. link() schließlich fordert zur Eingabe einer URL auf und macht den markierten Teil zu einem Link, das zur jeweiligen URL springt.

Ähnliche Beiträge