nicht angemeldet
Einfügen von Code in Textarea an Curserpoition/Markierung
Hallo,
habe gestern schon mal danach gefragt ([pref:t=45515&m=248283]), und die Antwort erhalten, ich solle doch im Archiv danach suchen. OK, das hab ich nun getan.
Nochmal das Problem: für ein Forum (http://alex.ilosuna.org/forum/forum.php) möchte ich, dass man beim Eintragen eines Postings in die Textarea Befehle zum Formatieren der Schrift sowie Smilies an der Curserposition bzw. um markierten Text per Link/Button einfügen kann.
Im Archiv war nun immer wieder eine Lösung in dieser Art zu finden: http://www.oreillynet.com/pub/a/javascript/2001/12/21/js_toolbar.html?page=1
Das Problem dabei ist nun, dass dies nur im IE funktioniert, scheinbar geht das mit JavaScript gar nicht, da Javascript keine Informationen über die Cursorposition in der Textarea hat.
Ich habe mir jetzt mal das phpBB heruntergeladen (http://www.iuw-darmstadt.de/phpBB2/index.php) und da funktioniert das auch im Mozilla. Leider durchschaue ich den Code nicht wirklich.
Hat vielleicht jemand eine Ahnung, wie die das gemacht haben?
Danke und Grüße, Alex
-
Hallo Alex,
Das Problem dabei ist nun, dass dies nur im IE funktioniert, scheinbar geht das mit JavaScript gar nicht, da Javascript keine Informationen über die Cursorposition in der Textarea hat.
Richtig.
Ich habe mir jetzt mal das phpBB heruntergeladen (http://www.iuw-darmstadt.de/phpBB2/index.php) und da funktioniert das auch im Mozilla.
Aber nur, wenn eine Auswahl existiert: phpBB verwendet folgende Funktion für den Mozilla:
// From http://www.massless.org/mozedit/
function mozWrap(txtarea, open, close)
{
var selLength = txtarea.textLength;
var selStart = txtarea.selectionStart;
var selEnd = txtarea.selectionEnd;
if (selEnd == 1 || selEnd == 2)
selEnd = selLength;var s1 = (txtarea.value).substring(0,selStart);
var s2 = (txtarea.value).substring(selStart, selEnd)
var s3 = (txtarea.value).substring(selEnd, selLength);
txtarea.value = s1 + open + s2 + close + s3;
return;
}"Smilies" direkt an die Cursorposition einzufügen geht AFAIK nicht.
(Hmmm. Die Seite, die da bei phpBB als Link angegeben worden ist, existiert anscheinend nicht...)
Viele Grüße,
Christian-
Hallo Alex nochmal,
"Smilies" direkt an die Cursorposition einzufügen geht AFAIK nicht.
Korrektur: ich habe ein bisschen rumgespielt und es geht auch:
function mozInsertText (tarea, txt2insert) {
var selEnd = tarea.selectionEnd;
var txtLen = tarea.value.length;
var txtbefore = tarea.value.substring(0,selEnd);
var txtafter = tarea.value.substring(selEnd, txtLen);
tarea.value = txtbefore + txt2insert + txtafter;
}selectionEnd ist beim Mozilla die Cursorposition, falls gar nichts ausgewählt wurde. Und wenn die Textarea nicht aktiv ist, dann nimmt er die letzte bekannte Position, falls die Seite frisch geladen ist, nimmt der das Ende.
Viele Grüße,
Christian-
Hallo,
vielen Dank! Ich probiere das jetzt auch mal aus...
Grüße, Alex
-
Hallo,
hab das mal ausprobiert, funktioniert aber leider nicht:
http://alex.ilosuna.org/test/textarea.html
...oder hab ich da was falsch gemacht?
Grüße, Alex
-
Hallo Alex,
http://alex.ilosuna.org/test/textarea.html
...oder hab ich da was falsch gemacht?[ <a href="javascript:mozWrap('textarea_name','[Mozilla]','[/Mozilla]');">mozWrap</a> ]
[ <a href="javascript:mozInsertText('textarea_name','Mozilla');">mozInsertText</a> ]Beide Funktionen erwarten ein Objekt als Paramter:
javascript:mozWrap(document.forms['form_name'].elements['textarea_name'],'[Mozilla]','[/Mozilla]');
javascript:mozInsertText(document.forms['form_name'].elements['textarea_name'],'Mozilla');Viele Grüße,
Christian-
Hallo,
Beide Funktionen erwarten ein Objekt als Paramter:
javascript:mozWrap(document.forms['form_name'].elements['textarea_name'],'[Mozilla]','[/Mozilla]');
javascript:mozInsertText(document.forms['form_name'].elements['textarea_name'],'Mozilla');...OK, klar, so geht's besser - vielen Dank! :-)
Grüße, Alex
-
-
-
-
-
Nochmal hallo,
bevor der Thread im Archiv verschwindet, hier meine Lösung (funktioniert mit Netscape/Mozilla, IE):
http://alex.ilosuna.org/test/textarea.html
Grüße, Alex
P.S.: falls der Link mal nicht mehr existieren sollte:
<html>
<head>
<script type="text/javascript">
<!--
function bbcode(v)
{
if (document.selection) // für IE
{
var str = document.selection.createRange().text;
document.form_name.textarea_name.focus();
var sel = document.selection.createRange();
sel.text = "[" + v + "]" + str + "[/" + v + "]";
return;
}
else if (document.getElementById && !document.all) // für Mozilla
{
var txtarea = document.forms['form_name'].elements['textarea_name'];
var selLength = txtarea.textLength;
var selStart = txtarea.selectionStart;
var selEnd = txtarea.selectionEnd;
if (selEnd == 1 || selEnd == 2)
selEnd = selLength;
var s1 = (txtarea.value).substring(0,selStart);
var s2 = (txtarea.value).substring(selStart, selEnd)
var s3 = (txtarea.value).substring(selEnd, selLength);
txtarea.value = s1 + '[' + v + ']' + s2 + '[/' + v + ']' + s3;
return;
}
else input('[' + v + '][/' + v + '] ');
}function input(what)
{
if (document.form_name.textarea_name.createTextRange)
{
document.form_name.textarea_name.focus();
document.selection.createRange().duplicate().text = what;
}
else if (document.getElementById && !document.all) // Mozilla
{
var tarea = document.forms['form_name'].elements['textarea_name'];
var selEnd = tarea.selectionEnd;
var txtLen = tarea.value.length;
var txtbefore = tarea.value.substring(0,selEnd);
var txtafter = tarea.value.substring(selEnd, txtLen);
tarea.value = txtbefore + what + txtafter;
}
else
{
document.entryform.text.value += what;
}
}
//-->
</script>
<title>Textarea-Test</title>
</head>
<body>
<h1>Einfügen von BB-Code und Smilies mit JavaScript</h1>
<p>Funktionoert mit Netscape/Mozilla und IE. Hier werden die BB-Codes um
markierten Text eingefügt und die Smilies an der Curserposition. Mit anderen
Browsern werden die Befehle am Ende eingefügt.</p>
<form name="form_name" action="" method="">
BB-Code:
[ <a href="javascript:bbcode('b');">fett</a> ]
[ <a href="javascript:bbcode('i');">kursiv</a> ]
[ <a href="javascript:bbcode('url');">URL</a> ]
[ <a href="javascript:bbcode('img');">Bild</a> ]
Smilies:
[ <a href="javascript:input(':-) ');">smile</a> ]
[ <a href="javascript:input(';-) ');">wink</a> ]
[ <a href="javascript:input(':-( ');">frown</a> ]<br>
<textarea rows="20" cols="80" name="textarea_name"></textarea><br>
<input type="reset">
</form>
</body>
</html>