"[code]" automatisch ins textfeld einfuegen

Dilandau · 21.01.2007, 10:53

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

Flor1an · 21.01.2007, 12:04

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 [size=xx] hier [/size] also dazwischen.

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

Code:

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

Und das JS Zeugs:

Code:

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]

Corvin · 21.01.2007, 12:04

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.

nikosch · 21.01.2007, 14:39

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

Code:

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

Oder hab ich da was falsch verstanden?

Flor1an · 21.01.2007, 14:55

Da magst du wohl recht haben ^^

Dilandau · 21.01.2007, 16:31

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?

pepe24 · 21.01.2007, 16:46

Zitat:

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.

Flor1an · 21.01.2007, 16:53

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

Dilandau · 21.01.2007, 21:39

firefox 1.5.0.4

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

Code:

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:

Code:

input.value +=  name;

oder?

nikosch · 22.01.2007, 19:21

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.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Formatierung im Textfeld per Formular mit übergeben	PlanLos23	PHP Tipps 2008	2	25.06.2008 09:05
WÄhrend schreiben in Textfeld value ändern	max-dhom	HTML, Usability und Barrierefreiheit	2	31.05.2008 19:05
Wert aus Textfeld in neues Formular übernehmen (kein Submit)	PsychoEagle	HTML, Usability und Barrierefreiheit	9	02.01.2007 14:51
Gleich im Textfeld losschreiben	dsx	HTML, Usability und Barrierefreiheit	3	30.06.2006 16:19
JS: Inhalt von Hiddenfeld in Textfeld kopieren.	Bronks	HTML, Usability und Barrierefreiheit	5	23.05.2006 14:50
automatisches Setzen des Cursors in Textfeld	bexxta	HTML, Usability und Barrierefreiheit	2	20.04.2006 12:48
Textfeld überprüfen...	arcor	HTML, Usability und Barrierefreiheit	2	07.06.2005 20:31
[Erledigt] Eingabe in Textfeld A, Ausgabe Textfeld B wie?		HTML, Usability und Barrierefreiheit	2	01.06.2005 18:09
wie kann ich mit php in einem textfeld reinschreiben		PHP Tipps 2005	2	09.03.2005 19:19
Courser automatisch im ersten Textfeld	imported_dex	HTML, Usability und Barrierefreiheit	5	23.02.2005 12:13
[b]text automatisch bei submit in textfeld einfügen[/b]		PHP Tipps 2004-2	10	05.12.2004 13:44
Textfeld um eine varchar oder Textfeld ergänzen		Datenbanken	0	06.10.2004 15:32
[Erledigt] Von textfeld in .txt Datei		HTML, Usability und Barrierefreiheit	4	22.09.2004 22:33
bei ändern des wertes in textfeld --> automatisch summe ?		PHP Tipps 2004	4	13.07.2004 14:09
Zeilenumbruch in Textfeld!	Broadcast	PHP Tipps 2004	2	03.06.2004 12:38

21.01.2007, 10:53
Dilandau Erfahrener Benutzer Registriert seit: 15.10.2005 Beiträge: 231	"[code]" automatisch ins textfeld einfuegen 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 __________________ mobilis in mobili


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

21.01.2007, 12:04
Flor1an da schreibt der ElePHPant Registriert seit: 18.06.2008 Beiträge: 8.903 PHP-Kenntnisse: Fortgeschritten	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 [size=xx] hier [/size] also dazwischen. Da gibts dann noch andere Funktionen die ich habe die auch auf bbcode() zugreifen also z.B. von nem normalen Button. Code: <select id="bbcode_size" size="1" onchange="bbcode_dropdown('text_feld_name', 'bbcode_size', '[size=', ']', '[/size]')" style="width: 100px; margin-bottom: 5px"> <option value="11">11px</option> <option value="12">12px</option> </select> Und das JS Zeugs: Code: 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]

21.01.2007, 12:04
Corvin Erfahrener Benutzer Registriert seit: 02.04.2008 Beiträge: 2.603	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.

21.01.2007, 14:39
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	@RaZoR: Im letzten else Zweig: Wozu die strpos Geschichte, statt gleich: Code: } else { input.value += aTag + eTag; } Oder hab ich da was falsch verstanden?

21.01.2007, 14:55
Flor1an da schreibt der ElePHPant Registriert seit: 18.06.2008 Beiträge: 8.903 PHP-Kenntnisse: Fortgeschritten	Da magst du wohl recht haben ^^

21.01.2007, 16:31
Dilandau Erfahrener Benutzer Registriert seit: 15.10.2005 Beiträge: 231	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? __________________ mobilis in mobili

21.01.2007, 16:53
Flor1an da schreibt der ElePHPant Registriert seit: 18.06.2008 Beiträge: 8.903 PHP-Kenntnisse: Fortgeschritten	Welchen Browser verwendest du?? Also beim Firefox 2.0 und IE 7.0 funktionierts bei mir dass der BBCode beim Courser eingefügt wird.

21.01.2007, 21:39
Dilandau Erfahrener Benutzer Registriert seit: 15.10.2005 Beiträge: 231	firefox 1.5.0.4 ich glaube, diese zeile im "else" ist überfluessig: Code: 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: Code: input.value += name; oder? __________________ mobilis in mobili

22.01.2007, 19:21
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	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.