16.05.2016: Es gibt ein paar Aktualisierungen auf unserem Blog! Die Underground Suchmaschine mit welcher ihr Seiten wie die Boerse oder Mygully durchsuchen könnt, wurde komplett überarbeitet. Die XXX Stream Liste wurde aktualisiert, tote Links mit neuen ersetzt, das gleiche gilt für die MP3 Suchmaschinen und die Liste mit den Android Apps wurde ebenfalls erweitert.

Tutorial: Mit PHP & Javascript BBCodes erstellen

Hier möchte ich euch anhand eines kompletten Tutorials zeigen, wie ihr mit PHP und Javascript BBCodes erstellt, und wie ihr diese in einer Textarea einsetzen könnt.

Einführung:
So gut wie jedes Forum oder Gästebuch ist heute mit BBCodes ausgestattet. BBCodes ermöglichen die Hervorhebung von Texten. So ist es zum Beispiel möglich, Schrift in Fett oder Kursiv darzustellen.

Tutorial Schritt #1:
Ein wichtiger Teil dieses Tutorials ist der Javascript Code. Dieser wird es uns später ermöglichen die Codes, sprich die BBCodes, mit einem Mausklick in eine Textarea einzufügen. Hier habe ich einfach einen vorhandenen Code aus SELFHTML genommen, welcher in meinen Augen am besten funktioniert.

<script type="text/javascript">
<!--
function insert(aTag, eTag) {
var input = document.forms['formular'].elements['eingabe'];
input.focus();
/* für Internet Explorer */
if(typeof document.selection != 'undefined') {
/* Einfügen des Formatierungscodes */
var range = document.selection.createRange();
var insText = range.text;
range.text = aTag + insText + eTag;
/* Anpassen der Cursorposition */
range = document.selection.createRange();
if (insText.length == 0) {
range.move('character', -eTag.length);
} else {
range.moveStart('character', aTag.length + insText.length + eTag.length);
}
range.select();
}
/* für neuere auf Gecko basierende Browser */
else if(typeof input.selectionStart != 'undefined')
{
/* Einfügen des Formatierungscodes */
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
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;
}
/* für die übrigen Browser */
else
{
/* Abfrage der Einfügeposition */
var pos;
var re = new RegExp('^[0-9]{0,3}$');
while(!re.test(pos)) {
pos = prompt("Einfügen an Position (0.." + input.value.length + "):", "0");
}
if(pos > input.value.length) {
pos = input.value.length;
}
/* Einfügen des Formatierungscodes */
var insText = prompt("Bitte geben Sie den zu formatierenden Text ein:");
input.value = input.value.substr(0, pos) + aTag + insText + eTag + input.value.substr(pos);
}
}
//-->
</script>

Dieser Code kommt bei unserer Seite in den Head Tag, also zwischen <head> und </head>. Der Code kann, bzw. sollte aber besser in eine Externe JS Datei ausgelagert werden! Wie man das macht, erfahrt ihr hier.

Tutorial Schritt #2:
Kommen wir nun zum Formular. Ein komplettes Formular, inklusive Textarea und Button mit welchem man die Codes einfügen kann, sieht in etwa wie folgt aus:

<form name="formular" action="">
<textarea name="eingabe" cols="30" rows="10">Ihre Nachricht</textarea>

<input type="button" value="Einfügen" onClick="insert('[b]', '[/b]')">
</form>

Hier muss der Name des Formulars, sowie der Name der Textarea mit den Daten oben im Script übereinstimmen (siehe dazu rot markierter Bereich)!

Der wichtige Teil ist hier das "onClick" Attribut! Angewendet werden kann dieses auf jedes beliebige Element, zum Beispiel auch auf ein Bild. Die Grün markierten Stellen, zeigen die Codes die eingefügt werden. Würde man hier also einen Text markieren, und auf den Button klicken, käme dabei folgendes raus: [b]Der Text[/b]

Möchtet ihr diesen Teil nun in ein vorhandenes Formular einbauen, braucht ihr natürlich nur den Teil mit dem "onClick", sprich den Button. Alles was ihr dann noch machen müsst ist den Namen eures Formulars, sowie den Namen der Textarea oben im Script anzupassen.

Somit wäre der Javascript/HTML Teil fertig, und wir gehen zum PHP Teil über.

Tutorial Schritt #3:
Jetzt nachdem der Javascript/HTML Teil fertig ist, müssen die Codes noch umgewandelt werden. Aus [b]Der Text[/b] muss also <span style="font-weight:bold;">Der Text</span> gemacht werden. Dazu bedienen wir uns der PHP Funktion preg_replace. Der Code dazu sieht so aus:

$text = preg_replace('#\[b\](.*?)\[/b\]#si', '<span style="font-weight: bold;">\1</span>', $text);

Hier wird also der Teil der mit unserem Javascript in die Textarea eingefügt wird, in echten HTML Code umgewandelt. Was passiert? Der Text wird wie erwartet in Fett dargestellt.

Dasselbe kann man auch mit Smilies machen. Wobei hier mit str_replace gearbeitet wird. Das würde dann so aussehen:

$text = str_replace(':)','<img style="border:0" alt=":)" src="smilie.gif" />', $text);

Eingefügt werden kann dieser Code dann wie folgt:

<img alt=":)" src="images/1.gif" onClick="insert(':) ', '')">

Fassen wir das ganze mal zusammen:
1. Wir haben also den JS Code der dafür sorgt dass wir etwas in die Textarea einfügen können.
2. Der Button der das für uns erledigt.
3. Und der PHP Code der für uns die BBCodes in HTML Code umwandelt.

Möchte man das ganze jetzt in ein vorhandenes Gästebuch oder ähnliches einbauen, ist es sinnvoll eine Function zu erstellen, welche dann auch beliebig mit anderen Codes erweitert werden kann.

function parsetxt($text) {
$text = preg_replace('#\[b\](.*?)\[/b\]#si', '<span style="font-weight: bold;">\1</span>', $text);

return $text;
}

Angewendet auf die Variable, die in eurem Script für die Textausgabe sorgt, sieht das dann so aus: parsetxt($inhalt); Wobei hier "$inhalt" wie gesagt die Variable ist, die bei euch für die Textausgabe sorgt.

Nachtrag: Wenn ihr ein Auswahlfeld für die Schriftfarbe machen wollt, oder für die Schriftgröße, da sieht das ganze dann so aus (wer es etwas aufwendiger haben möchte, der kann auch meinen Color-Picker einsetzen).

<select style="width:100px;" onchange="insert(this.value, '[/color]')">
<option value="">Color</option>
<option style="color:#800000;" value="[color=#800000]">Red</option>
<option style="color:#0000FF;" value="[color=#0000FF]">Blue</option>
<option style="color:#005E00;" value="[color=#005E00]">Green</option>
<option style="color:#FFCC00;" value="[color=#FFCC00]">Yellow</option>
</select>

Zum umwandeln dann:
$text = preg_replace('#\[color=(.*?)\](.*?)\[/color\]#si', '<span style="color:\1;">\2</span>', $text);

Hier kann jetzt der vorgegebe Farbwert im Select Feld oben ausgewählt werden, oder auch jeder andere beliebige Farbwert. Das heißt, im Forum, oder im Gästebuch, wird so jeder Farbwert angenommen (nicht nur der vorgegebene).

Viel Spaß, und sollte etwas unklar sein, einfach fragen!

Tags: javascript bbcodes, bbcodes erstellen, bbcodes einfügen, bbcodes tutorial

Kommentare:

  1. Super! Danke! Das ist echt Hilfreich! :]
    Nach sowas (möglichst einfach und verständlich) habe ich schon ein weilchen gesucht.

    AntwortenLöschen
  2. Stimmt! Wirklich gelungen das Tut. Weiter so!

    echo "Gruß Tarzan";

    AntwortenLöschen
  3. Schönes gut erklärtes Tutorial von dir! :)

    AntwortenLöschen

ACHTUNG: Anonyme Kommentare werden nicht freigeschaltet! Bitte wählt aus der Dropdown-Liste "Name/URL" anstatt "Anonym". Mit "Name/URL" bleibt ihr ebenfalls anonym, jedoch kann so zwischen User A und User B unterschieden werden.

Gültige HTML-Tags: <a href="LINK">LINK TITEL</a> | <b>BOLD</b> | <i>KURSIV</i>