Advitum.de auf Google+

BBCode-Buttons und jCaret

BBCode-Buttons und jCaret
VN:F [1.9.22_1171]
Bewertung: 3.0/5 (1 Stimme abgegeben)
Von am
Kategorien: jQuery, Tipps

Bei vielen Foren gibt es über dem Textfeld, in dem man einen Beitrag verfasst, eine Buttonbar, mit der automatisch BBCodes in den Text eingefügt werden können. Ich habe lange gesucht, wie man so etwas am Besten machen kann. Und bis vor kurzem war das Beste, was ging, den Code an das Ende des Textfeldes zu hängen. Sehr unpraktisch! Ich wollte eigentlich, dass sich zum Beispiel der BBCode [b] direkt um den Text legt, der in dem Textfeld ausgewählt ist. Aber das schien unmöglich.

Doch das Wunderwerkzeug jQuery lieferte mir, wie immer, alle Werkzeuge an die Hand, die ich dafür brauchte. Ich stieß per Zufall auf das Plugin jCaret. Was macht dieses Plugin? Im Grunde kann man, einfach gesagt, die Auswahlposition in einem Textfeld auslesen. Naja, jCaret kann noch ein bisschen mehr, aber dies war für mich das Wichtigste.

BBCode-Buttons und jCaret, 3.0 out of 5 based on 1 rating

Beginnen wir mit folgendem HTML-Code:

<button id="bold">F</button>
<textarea id="field"></textarea>

Um jetzt bei einem Klick auf den F-Button den in dem Textfeld markierten Text mit [b] und [/b] zu umschließen, muss ich als erstes ein Click-Event an den Button binden:

$("#bold").click(function() {

}

In dieser Funktion frage ich als erstes die Auswahl in dem Textfeld ab:

var range = $("#field").caret();

Als nächstes speichere ich in zwei Variablen meine gewünschten Tags:

var starttag = "[b]";
var endtag = "[/b]";

Nun umschließe ich den Text mit den Tags. Dazu benutze ich substr():

var text = $("#field").val();
$("#field").val(text.substr(0, range.start) + starttag + text.substr(range.start, range.end-range.start) + endtag + text.substr(range.end));

Die Eigenschaften range.start und range.end liefern mir die Nummer des Zeichens, bei dem die Auswahl startet beziehungsweise endet. So kann ich bequem den Text vor, in und nach der Auswahl ermitteln.

Doch wo soll jetzt der Textcursor des Users platziert werden? Für mich schien die Regelung am sinnvollsten, das wenn Text ausgewählt war, der Textcursor hinter den Endtag gesetzt wird. So kann der Nutzer sofort weiter schreiben. Wenn aber kein Text ausgewählt war, muss der BBCode noch mit Inhalt gefüllt werden. Der Textcursor sollte zwischen Start- und Endtag gesetzt werden.

Um festzustellen, ob Text markiert war, müssen nur range.start und range.end verglichen werden. Ist range.end größer als range.start, war etwas markiert, wenn nicht, was der Cursor bloß an einer Position im Text. So setzte ich jetzt, nach der Fallunterscheidung, den Textcursor an die richtige Stelle im Textfeld:

if(range.start < range.end)
{
	$("#field").caret(range.end + starttag.length + endtag.length, range.end + starttag.length + endtag.length);
}
else
{
	$("#field").caret(range.start + starttag.length, range.start + starttag.length);
}

So einfach kann man mit dem jCaret-Plugin Zeichen in ein Textfeld an die Cursorposition einfügen.

Wie findet ihr dieses Plugin? Standet ihr schon einmal vor einem ähnlichen Problem? Teilt uns eure Erfahrungen in den Kommentaren mit!

BBCode-Buttons und jCaret, 3.0 out of 5 based on 1 rating

Links zum Thema

Jetzt seid ihr dran!

Teilt eure Meinung mit uns in den Kommentaren, gebt eine Bewertung für diesen Artikel ab und teilt ihn in Social Networks!

Über

Ich bin ein junger Webdesigner und Programmierer aus Siegen und blogge auf Advitum.de über meine Erfahrungen im Web. Meine Themenschwerpunkte liegen im Bereich der Web-Entwicklung mit PHP, JavaScript, HTML und anderen Script-, Programmier- und Markup-Sprachen, der Nutzung von Content Management System wie Typo3, Wordpress etc. und der Effekt-Hascherei mit Photoshop. Seit 2008 blogge ich auf Advitum.de – mal mehr, mal weniger regelmäßig – über alles, was mich so interessiert. Wenn dir mein Blog gefällt, freue ich mich immer sehr über Feedback in Form von Kommentaren und E-Mails.

Kommentare zu diese Artikel

Schreibe jetzt einen Kommentar!

Steffen schrieb am Antworten

Danke für den Beitrag! Genau, was ich gebraucht habe! Hatte zwar leichte Startschwierigkeiten mit jQuery (wie meistens), aber Letztenendes funktioniert es perfekt! Scheint nicht mehr aktiv weiterentwickelt zu werden. Kennst du vielleicht eine Alternative, wenn das Plugin mal nicht mehr funktioniert?
BTW: Nutze es nicht mit bb-codes, sondern it html, was genausogut funktioniert.

Diese Artikel könnten dir auch gefallen