Javascript ist Toll!

»» ««
30. März 2009 - 13:45

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. oberhalb einer Textarea angezeigt werden und mit denen dann der Text entsprechend formatiert wird. Dazu habe ich das Skript erweitert und verbessert, so dass 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 der Textarea, respektive hinter dem Formular (wenn man document.forms.textarea verwenden möchte).

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

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 sind Objekte, mit deren Eigenschaften die Buttons gesteuert werden können. Jedes Objekt kann folgende Eigenschaften haben:

Beispiel


Quellcode

js/bb_code_example.js
 

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

ähnliche Artikel

Comments (6)
6827 mal gelesen.
»» ««

6 Kommentare

Leave a comment »

Seiten:

1. Pingback von: Text in Textarea einfügen [Javascript ist Toll!]
26. August 2010: 14:09

[…] Dieser Text ist etwas veraltet, zeigt aber das grundprinzip, wie ein Text in eine Textarea eingefügt werden kann. Für BB Code, habe ich mittlerweile eine andere Funktion geschrieben, diese findet ihr hier. […]

2. Kommentar von: klaus
10. Oktober 2010: 23:05

Also erstmal das script ist klasse.
die standart mäßigen tags funktionieren auch gut.
aber:
möchte ich eine weitere function hinzufügen, geht das ganze script nicht mehr.
als beispiel [bgimg=url] [/bgimg]
oder per button gleich [table][bgimg=url] [/bgimg] [/table]
noch idealer wäre natürlich die möglichkeit das bgimg mit width und height zu 100% an den table anzupassen.

3. Kommentar von: Struppi
11. Oktober 2010: 8:28

Da kann ich nur sagen: Dann machst du etwas falsch. Natürlich kannst du eigene Buttons benutzen.

Verschachtelte Tags funktionieren aber tatsächlich nicht.

4. Kommentar von: Alexander Bombis
11. Mai 2012: 17:00

Hej … keine Ahnung ob du das hier noch lesen wirst, da wir es schon 2012 haben, aber ich mag dieses Skript( also das neue von dir)…nur an einer Sache hänge ich mich auf, folgendes Problem:

Ich versuche Buttons zu erstellen, welche mir das Grundgerüst, Attribute und Elemente in eine Textarea liefern. Wenn ich es so mache wie du, kann ich aber leider kein script /script Bereich im head definieren – also keinen Button, also habe ich eine Funktion daran angepasst, doch leider lässt sich darin keine if – Bedingung einbauen, welche es mir erlaubt jeweils ein Button für CSS und für Javascript zu benutzen – Klicke ich den Javascript-Button, dann schreibt er das was ich will in die Textarea, doch klicke ich den CSS-Button, dann schreibt er mir das Value von Javascript in die Textarea????? Ich komme da echt nicht weiter. Kannst du mir da weiterhelfen, das ganze soll eine browser basierende Editor-html/javascript/php werden, damit ich nicht immer Notepad aufrufen muss, nur so, aus reiner Lust am verstehen, wie es funktioniert. Wie ich mit html/javascript und php umgehen muss das weiß ich, sicher das ganze liese sich vielleicht auch einfacher über php erstellen, aber dann muss auch immer der Server ansein… ach ja…wie kann ich dir mein test – script zu kommen lassen?

Vielleicht über kopieren???

function insert(aTag, eTag) {
var input = document.forms[‚formular‘].elements[‚eingabe‘];
input.focus();

if(typeof input.selectionStart != ‚undefined‘)
{

/* Einfügen des Formatierungscodes */
var start = input.selectionStart; /*Input Anfang*/
var end = input.selectionEnd; /*Input Ende*/
var insText = input.value.substring(start, end); /*Input zwischen start und ende – substring=*/
input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
/* Anpassen der Cursorposition */
var pos;
if (insText.length == 0) {
pos = start + aTag.length;
} else {
pos = start + aTag.length + insText.length + eTag.length;
}
input.selectionStart = pos;
input.selectionEnd = pos;
}

}

function eingeben() {
var feld = document.formular.eingabe;
feld.focus();

if(typeof feld.selectionStart != ‚undefined‘){

//if (feld.selectionStart){

var feldjvs = document.formular.test.value; //Werte aus Input holen
//var feldcss = document.formular.test1.value;

if (feldjvs)//Bedingung
{
var scriptstart = ’n‘;}

if (typeof feldjvs === ‚css‘) {
var scriptstart = ‚ type=“text/css“>n‘;}

var scriptende = ’n‘;

var aTag = scriptstart + scriptstart1;
var eTag = scriptende + scriptende1 + scriptende2;
}

/* if (feldcss)
{
var scriptstartcss = ’n‘;
var scriptendecss = ’n‘;

var aTag = scriptstartcss + scriptstartcss1;
var eTag = scriptendecss + scriptende1css + scriptende2css;
}*/

/* Einfügen des Formatierungscodes */
var start = feld.selectionStart; /*Input Anfang*/
var end = feld.selectionEnd; /*Input Ende*/
var insText = feld.value.substring(start, end); /*Input zwischen start und ende – substring=*/
feld.value = feld.value.substr(0, start) + aTag + insText + eTag + feld.value.substr(end);
/* Anpassen der Cursorposition */
var pos;
if (insText.length == 0) {
pos = start + aTag.length;
} else {
pos = start + aTag.length + insText.length + eTag.length;
}
feld.selectionStart = pos;
feld.selectionEnd = pos;
}

}

<input name="html" id="html" type="button" value="html" onClick="insert('n‘ , ’n‘)“>
<input name="head" type="button" value="head-tag" onClick="insert('n‘ , ’nn‘)“>
<input name="body" id="body" type="button" value="body" onClick="insert('n‘ , ’n‘)“>
<input type="button" value="input-tag" onClick="insert('‘)“>

5. Kommentar von: Alexander Bombis
11. Mai 2012: 17:06

aha … den html code will er nicht drucken…hmm aber ich kann dir sagen, das da nicht mehr viel folgt, nur noch die Button, für javascript und css, die ohne (“ , “ ) definiert sind nur mit function()
weil die muss er sich aus der function holen, geht sonst nicht anders. muss den aTag und den eTag splitten…..ich hänge ganz schön :(

Danke im Voraus, und falls du auch keine Lösung kennst, dann muss ich eben für jeden script Button ne eigene Funktion bauen, samt der ersten Funktion, aber das ist so viel Stoff…für die kleine Datei…

Grüße Alexander

6. Kommentar von: Struppi
14. Mai 2012: 9:59

Ich seh irgendwie nicht den zusammenhang mit meinem Code im Artikel. Natürlich kannst du mit meinem Code ein „script /script Bereich im head definieren“.

Ansonsten kann ich dir leider nicht anhand deiner Beschreibung weiterhelfen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot
marketing-bankruptcy
marketing-bankruptcy
marketing-bankruptcy
marketing-bankruptcy