[saxmachine.de] – Online Marketing, Web & more!

Wer sich einen kleinen BBCode-Editor für sein eigenens CMS schreiben will, der steht manchmal vor dem Problem, wie er dem Nutzer nun schnell und einfach “BBCode-Knöpfe” anbieten kann. Entsprechende Buttons sind schnell erstellt. Hier das Tag [i] für den Kursivknopf (die JavaScript-Funktion für insert befindet sich am Ende dieses Beitrags):

<input value=”I” onclick=”insert(’[i]‘, ‘[/i]‘)” type=”button” />

Will man nun BBCode mit weiteren Argumenten übernehmen, wie beispielsweise die Adresse einer Bild-URL, dann hilft der nachfolgende CodeSchnipsel für das Einfügen eines Bildes:


function insert_img()
{
var FoundErrors = '';
var enterIMG = prompt("Gib die Adresse des Bildes ein", "http://");
if (!enterIMG.replace("http://","")) { FoundErrors += " " + "URL fehlt"; }
if (FoundErrors) { alert("Fehler"+FoundErrors); return; }
insert("[img]"+enterIMG+"[/img]", "");
}

Dieses kleine JavaScript fragt mit einem Fenster wie dem nachfolgenden nach der Url / Internet-Adresse.

Kleines Manko: Die Abfrage if(!enterIMG) gibt nur einen Fehler aus, wenn der Benutzer auch das http:// löscht, also praktisch nie.

JavaScript Insert: Tags einbinden

Das nachfolgende JavaSkript sorgt dafür, dass BBCode-Tags im gerade genutzten Form / Textarea genutzt werden können:

function insert(aTag, eTag)
{
var input = document.forms['formular'].elements['inhalt'];
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);
}
}