Javascript ist Toll!

BB Code Buttons

Ich hatte in der Vergangenheit ja schon einmal ein Skript vorgestellt, mit dessen Hilfe es möglich ist BB-Code in eine Textarea einzufügen. Um es einsetzen zu können, werden entsprechende Buttons benötigt, die z.b. über einer Textarea angezeigt werden und mit denen dann der Text entsprechend formatiert wird. Dazu habe ich das Skript erweitert und verbessert, sodass sich automatisch und leicht konfigurierbar, über eine Textarea, JS Buttons einfügen lassen.

Ich nutze den Code als Basis für Greasemonkey-Skripte, für einige Foren, die keine entsprechenden Buttons anbieten (z.b. das Forum auf Perlunity)

Das Skript ist relativ kompakt (knapp über 100 Zeilen mit Kommentaren) und funktioniert bei meinen Tests unter Windows XP, in allen gängigen Browser.

Anwendung

Das Skript ist leicht zu benutzen, erfordert aber Grundkenntnisse in der literalen Schreibweise von Javascript. Um die Buttons einzufügen darf das Skript erst ausgeführt werden, wenn die Textarea dargestellt ist, sinnvoll ist der Aufruf im HTML Code hinter Textarea, respektive hinter dem Formular (wenn man document.forms.textarea verwenden möchte).

Der Aufruf erfolgt so: BB_Code( param ) , wobei der Parameter ein Objekt ist, dass folgende Eigenschaften besitzen kann bzw. muss:

• element: Referenz auf das Textfeld
• buttons: Array auf die Objekte

Die Eigenschaft parameter.element dürfte klar sein. Das ist eine Referenz wie sie z.b mit document.getElementById() o.ä ermittelt wird.
Das Array buttons ist etwas komplexer. Die einzelnen Einträge des Arrays, müssen Objekte sein, mit deren Eigenschaften die Buttons gesteuert werden können. Jedes Objekt kann folgende Eigenschaften haben:

• tag - Bezeichnung des BB Code Tags, der eingefügt werden soll
• text - Text der auf dem Button stehen soll (Optional)
• help - Text im title Attribut (Optional)
• func - Funktionsreferenz, die aufgerufen wird, wenn der Button gedrückt wird. (Optional)

Beispiel

Quellcode

function add() {

	var url = new RegExp('^(http://|https://|www.|ftp://|mailto:)');

	var findLink = function(tag, text, button) {

		var new_text = text;

		if( url.test(text)  ) {

			// Der Text ist ein Link

			href = text;

			new_text = window.prompt('Linktext eingeben:', '');

			if(new_text == null) return text; // Abbruch

			if(!new_text) new_text = text;

		} else {

			// Der Text ist der Titel oder muss eingegeben werden

			new_text = text || window.prompt('Linktext eingeben:', '');

			if(new_text == null) return text;

			href = window.prompt('URL eingeben:', 'http://');

			if(href == 'http://' || href == null)return text;

			if (!url.test(href)) href = 'http://' + href;

		}

		// Aufruf der default Funktion, die [tags] um den Text platziert.

		return this.def('url', new_text, button, '=' + href);

	};

	var param = 	{

		// die Textarea vor der die Buttons eingefügt werden soll

		element: document.getElementsByTagName('textarea')[0],

		// Die Buttons

		buttons: [

			{tag: 'b'},

			{tag: 'i'},

			{tag: 'strike', text: 's', help:"Durchstreichen"},

			{tag: 'b'},

			'-',

			{tag: 'link', text: 'Link', func: findLink}

		]

	};

	BB_Code(param);

}

Erläuterungen

Das Beispiel zeigt eine Funktion, die oberhalb der ersten Textarea auf einer Seite, mehrere Buttons zum einfügen von BB-Code einbaut. Ausserdem ist exemplarisch eine Funktion integriert, die den markierten Text prüft, ob dieser ein Link ist und dann den BB Tag [url=link]text[/url] einfügt.

Dazu wird zuerst ein Regulärer Ausdruck definiert, der prüft ob eine Zeichenkette mit http://, https://, ftp:// oder mailto: beginnt. Die Variabel findLink zeigt auf eine Funktion, die beim drücken des Buttons link aufgerufen wird. Eine sogenannte Callbackfunktion. Diese wird der Eigenschaft func in dem entsprechenden Eintrag zugewiesen.
Den Callbackfunktionen werden immer die gleichen Parameter übergeben. Die Bezeichnung des Tags, der markierte Text und die Referenz auf den Button. Der Rückgabewert ist der Text, der statt des Markierten eingesetzt wird.
In dem Beispiel wird dazu die default Funktion this.def() aufgerufen.

this.def(tag, text, button, attribut)

Diese erzeugt das typische BB Code Muster [tag]text[/tag]. Optional kann noch ein Attribut übergeben werden - in dem Beispiel '=' + href, das direkt hinter dem Starttag eingefügt wird.

Download

BB_code.js

weiterführende Links

Und noch ein paar informative Links

• BB-Code - Wikipedia
• Organisation von JavaScripten - selfhtml
• Text an Cursorposition einfügen - selfhtml