"[code]" automatisch ins textfeld einfuegen

[Forumsgast]

hi,

ich moechte ein texteingabefeld machen neben einem pulldownmenu und wenn ich aus dem pulldownmenu etwas auswaehle soll es automatisch ins textfeld eingetragen werden, ganz so wie hier im board wenn man einen beitrag editiert und auf den "code" button klickt und dadurch automatisch "[code]" ins textfeld an der cursorposition eingetragen wird.

danke fuer tips,
andreas

[Forumsgast]

zur Info: BBCode der nicht umgewandelt werden soll vom Forum hab ich mit ner Leertaste gemacht z.B. [ b][/b]

Soar hier mal nen Auszug aus meinem BBCode. In dem Beispiel wäre es für die Schriftgröße also der BBCode [ size=12]Text in 12px[/size].

bbcode_dropdown braucht als ersten Parameter den Namen vom Textfeld also <textarea name="text_feld_name"></textarea> z.B. dass hat den Sinn das ich die Funktion auch theoretisch zwei mal pro Seite hernehmen könnte und halt zwei verschiedene Textareas mit unterschiedlichen Namen.
Der zweite Parameter ist die ID vom <select> damit später auch die richtigen Werte ausgelesen werden. und dann eben der Anfangstag bis dahin wo der Value vom <select> hingehört dann vom Value bis dahin wo der Courser sitzen soll und dann noch das Endtag also [/size] in dem Falle.

Dat ist eigentlich schon alles. bbcode_dropdown liest dann des Value vom Dropdown aus und schreibt es per bbcode() in die Textarea. bbcode() setzt den BBCode dort hin wo der Courser ist und setzt den Courser genau zwischen hier also dazwischen.

Da gibts dann noch andere Funktionen die ich habe die auch auf bbcode() zugreifen also z.B. von nem normalen Button.

<select id="bbcode_size" size="1" onchange="bbcode_dropdown('text_feld_name', 'bbcode_size', '', '')" style="width: 100px; margin-bottom: 5px">
    <option value="11">11px</option>
    <option value="12">12px</option>
</select>

Und das JS Zeugs:

function bbcode_dropdown(textarea_name, dropdown_name, aTag1, aTag2, eTag) {
	var aTag = aTag1 + document.getElementById(dropdown_name).value + aTag2;
	bbcode(textarea_name, aTag, eTag);
}

function bbcode(textarea_name, aTag, eTag) {
	var input = document.getElementById(textarea_name);
	input.focus();
	 
	if(typeof document.selection != 'undefined') {
		var range = document.selection.createRange();
		var insText = range.text;
		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);
		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 {
		var pos = input.value.length;
		input.value +=  aTag + eTag;
	}
}

Und wenn du noch nen normalen Button haben möchtest als BBCode hier das HTML z.B. für [ b]courser[/b]

[Forumsgast]

Schau dir doch einfach mal den (JS-)Code vom phpbb an und schau, wie das gemacht wurde.
Ansonsten gibt es jede Menge Tutorials zu diesem Thema.. einfach mal Forensuche/Google benutzen.

[Forumsgast]

@RaZoR:
Im letzten else Zweig: Wozu die strpos Geschichte, statt gleich:

} else {
      input.value += aTag + eTag;
   }

Oder hab ich da was falsch verstanden?

[Forumsgast]

Da magst du wohl recht haben ^^

[Forumsgast]

ich sehe ich sehe. aber bei mir kommt das "[code]" zb nicht an die cursorposition sondern immer nur an das textende. liegt das am browser?

[Forumsgast]

liegt das am browser

Nein. Wider erstem Eindruck ist das sogar ein Vorteil. Der Schreibende muss sich nämlich vorher überlegen, was er schreibt und an welche Stellen Jeweiliges kommt.

[Forumsgast]

Welchen Browser verwendest du?? Also beim Firefox 2.0 und IE 7.0 funktionierts bei mir dass der BBCode beim Courser eingefügt wird.

[Forumsgast]

firefox 1.5.0.4

ich glaube, diese zeile im "else" ist überfluessig:

var pos = input.value.length;

und hmmmm.... ich brauche keine zwei einfuegedinger (code start und code end) sondern eins langt (zb name aus liste ausgewaehlt). mal sehn...

wenns mir nix aus macht dass die einfuegung immer am ende des textes geschieht, lang wohl allein schon das:

input.value +=  name;

oder?

[Forumsgast]

wenn in name schon die tags mit drin sind ja. RaZoR's code-posting fügt schon an der curser-position/selection in der textarea ein. allerdings ist selection nicht mit jedem browser kompatibel, hier kocht jeder sein eigenes süppchen. daher auch die drei verschiedenen if-zweige.

ich sehe das schon als vorteil. weil es meinem schreibverhalten entspricht, erst zu formulieren, dann zu formatieren. alles andere stört nur den schreibfluß. mich störst hier z.b. auch, wenn ich einen code einfügen will, dass nur die auswahl, nicht aber die curserposition von meinem FF verarbeitet wird.

[Forumsgast]

Joa da bin ich einer Meinung mit nikosch77. Also wenn man nachträglich noch etwas hervorheben möchte oder ändern möchte ist es schon sehr hilfreich dass ein selektierter Text von den Tags umrandet wird oder halt der BBCode beim Curser eingefügt wird.

*Curser nich Courser wie ich immer geschrieben hab ^^*

[Forumsgast]

btw, >>cursor<< ist richtig

[Forumsgast]

jetzt mache ich es so, einfuegen am textende:

(es ist sehr viel anders als diese bbcode geschichte geworden)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>change textarea content</title>
<script type="text/javascript">

function insertwhat(textarea_id, menu_id) {
   var menu = document.getElementById(menu_id);
   var num = menu.value;
   menu.value = 0;
   if (num != 0) {
     var what = '('+num+')';
     var input = document.getElementById(textarea_id);
     input.focus();
     input.value += what;
   }
}
</script>
</head>
<body>

<textarea cols="70" rows="5" id="sometext">12345</textarea>


<select id="crunchers" onchange="insertwhat('sometext', 'crunchers');">
<option value = "0">please select packer here</option>
<option value = "1">Tetragon</option>
<option value = "2">Titanics</option>
</select>

</body>
</html> 

was brauche ich noch, um das (1) oder (2) ... an der cursorposition einzufuegen?, bzw markierten text mit dem einzufuegenden wort zu ersetzen?

außerdem sollte das pulldownmenu auf option null zurueckspringen nachdem aus ihn ein eintrag gewaehlt wurde und ins textfeld übertragen wurde. das mache ich so:

document.getElementById(menu_id).value = 0;

ist das gut?

[Forumsgast]

'selectedIndex' heisst das Zauberwort...

[Forumsgast]

sollte ich selectedIndex = 0 machen anstelle value = 0? warum? das value = 0 stellt das select-dings ebenfalls auf den ersten eintrag (den mit value = 0) zurueck und ist weniger zu tippen .