30. März 2009 - 13:45
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.
[... weiterlesen]
11. Oktober 2005 - 10:03
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.
Text an der Cursorposition einfügen können nur der IE ab Version 5 und Mozilla Browser. Opera bleibt aussen vor. Wie es bei Mac und Linux Browsern aussieht, weiß ich nicht.
Mit dem Skript, können z.b. BBCode Tags eingefügt werden oder Smilies. Das Skript sieht so aus:
function insert(input, aTag, eTag) {
input.focus();
if(!aTag) return;
if(!eTag) eTag = '';
if(typeof document.selection != 'undefined') {
var range = document.selection.createRange();
var insText = range.text;
if(!insText && eTag) return alert('Nichts markiert!');
range.text = aTag + insText + eTag;
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();
} else if(typeof input.selectionStart != 'undefined') {
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
if(!insText && eTag) return alert('Nichts markiert!');
input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
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;
} else {
alert('Du kannst nach Hause gehen!nnLeider unterstützt dein Browser nicht die notwendige Funktion!');
}
} |
function insert(input, aTag, eTag) {
input.focus();
if(!aTag) return;
if(!eTag) eTag = '';
if(typeof document.selection != 'undefined') {
var range = document.selection.createRange();
var insText = range.text;
if(!insText && eTag) return alert('Nichts markiert!');
range.text = aTag + insText + eTag;
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();
} else if(typeof input.selectionStart != 'undefined') {
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
if(!insText && eTag) return alert('Nichts markiert!');
input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
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;
} else {
alert('Du kannst nach Hause gehen!nnLeider unterstützt dein Browser nicht die notwendige Funktion!');
}
}
Das Skript ist eine leicht abgewandelte Form von dem Beispiel bei selfhtml
Beispiel
