Buttons wie [B] oder [I] die den BBcode in eine Textarea eintragen

reaLInsanity · Mai 1, 2007

Moinsn =)
Also ich habe mal ne frage, ich bin schon seit längerem auf der suche nach so einem "einfachen Editor" wir hier in dem Forum. Jedoch finde ich nur die "großen" WWYSIWYG-Editoren die mir zu komplex sind. Also ich denke ich benötige JS damit ich, wenn ich den Button (Fettdruck bsp.) betätige der den BBcode in eine Textarea einträgt.

Jedoch fehlen mir die nötigen Kenntnisse über JS. Ich wäre um ein paar denk anstöße sehr dankbar =)

Cyberm@ster · Mai 2, 2007

Schau dir doch einfach mal den Code dieses Forums an ...

Code:

 <tr>
  <td align="center" colspan="2">
<img src="images/bbcode_bold.gif" alt="fettgedruckter Text" title="fettgedruckter Text" border="0" onclick="bbcode(document.bbform,'B','')" onmouseover="this.style.cursor='hand';" /><img
src="images/bbcode_italic.gif" alt="kursiver Text" title="kursiver Text" border="0" onclick="bbcode(document.bbform,'I','')" onmouseover="this.style.cursor='hand';" /><img
src="images/bbcode_underline.gif" alt="unterstrichener Text" title="unterstrichener Text" border="0" onclick="bbcode(document.bbform,'U','')" onmouseover="this.style.cursor='hand';" />
<img src="images/bbcode_center.gif" alt="zentrierter Text" title="zentrierter Text" border="0" onclick="bbcode(document.bbform,'CENTER','')" onmouseover="this.style.cursor='hand';" />
<img src="images/bbcode_url.gif" alt="Hyperlink einfügen" title="Hyperlink einfügen" border="0" onclick="namedlink(document.bbform,'URL')" onmouseover="this.style.cursor='hand';" /><img
src="images/bbcode_email.gif" alt="E-Mail-Adresse einfügen" title="E-Mail-Adresse einfügen" border="0" onclick="namedlink(document.bbform,'EMAIL')" onmouseover="this.style.cursor='hand';" /><img
src="images/bbcode_image.gif" alt="Bild einfügen" title="Bild einfügen" border="0" onclick="bbcode(document.bbform,'IMG','http://')" onmouseover="this.style.cursor='hand';" />
<img src="images/bbcode_quote.gif" alt="Zitat einfügen" title="Zitat einfügen" border="0" onclick="bbcode(document.bbform,'QUOTE','')" onmouseover="this.style.cursor='hand';" /><img
src="images/bbcode_list.gif" alt="Liste erstellen" title="Liste erstellen" border="0" onclick="dolist(document.bbform)" onmouseover="this.style.cursor='hand';" />
<img src="images/bbcode_code.gif" alt="CODE einfügen" title="CODE einfügen" border="0" onclick="bbcode(document.bbform,'CODE','')" onmouseover="this.style.cursor='hand';" /><img
src="images/bbcode_php.gif" alt="PHP CODE farbig hervorheben" title="PHP CODE farbig hervorheben" border="0" onclick="bbcode(document.bbform,'PHP','')" onmouseover="this.style.cursor='hand';" />
  </td>
 </tr>

Und die JavaScript-Datei in der die aufgerufenen Funktionen stehen findest du hier: http://www.hackerboard.de/js/bbcode.js

reaLInsanity · Mai 2, 2007

habe das jetzt wie folgt eingebunden:

Code:

<html> <head> <title>JavaScript-Test</title> <script type="text/javascript" src="bbcode.js"></script></head> <body> 

<table>
<tr>
  <td align="center" colspan="2">
<img src="images/bbcode_bold.gif" alt="fettgedruckter Text" title="fettgedruckter Text" border="0" onclick="bbcode(document.bbform,'B','')" onmouseover="this.style.cursor='hand';" />
<img src="images/bbcode_italic.gif" alt="kursiver Text" title="kursiver Text" border="0" onclick="bbcode(document.bbform,'I','')" onmouseover="this.style.cursor='hand';" />
<img src="images/bbcode_underline.gif" alt="unterstrichener Text" title="unterstrichener Text" border="0" onclick="bbcode(document.bbform,'U','')" onmouseover="this.style.cursor='hand';" />
<img src="images/bbcode_center.gif" alt="zentrierter Text" title="zentrierter Text" border="0" onclick="bbcode(document.bbform,'CENTER','')" onmouseover="this.style.cursor='hand';" />
<img src="images/bbcode_url.gif" alt="Hyperlink einfügen" title="Hyperlink einfügen" border="0" onclick="namedlink(document.bbform,'URL')" onmouseover="this.style.cursor='hand';" />
<img src="images/bbcode_email.gif" alt="E-Mail-Adresse einfügen" title="E-Mail-Adresse einfügen" border="0" onclick="namedlink(document.bbform,'EMAIL')" onmouseover="this.style.cursor='hand';" /><img
src="images/bbcode_image.gif" alt="Bild einfügen" title="Bild einfügen" border="0" onclick="bbcode(document.bbform,'IMG','http://')" onmouseover="this.style.cursor='hand';" />
<img src="images/bbcode_quote.gif" alt="Zitat einfügen" title="Zitat einfügen" border="0" onclick="bbcode(document.bbform,'QUOTE','')" onmouseover="this.style.cursor='hand';" />
<img src="images/bbcode_list.gif" alt="Liste erstellen" title="Liste erstellen" border="0" onclick="dolist(document.bbform)" onmouseover="this.style.cursor='hand';" />
<img src="images/bbcode_code.gif" alt="CODE einfügen" title="CODE einfügen" border="0" onclick="bbcode(document.bbform,'CODE','')" onmouseover="this.style.cursor='hand';" />
<img src="images/bbcode_php.gif" alt="PHP CODE farbig hervorheben" title="PHP CODE farbig hervorheben" border="0" onclick="bbcode(document.bbform,'PHP','')" onmouseover="this.style.cursor='hand';" />
  </td>
 </tr>
</table>
	<br><form><textarea cols=35 rows=3 style="background-color:white;border:1px dashed black;"> </textarea></form>
</body>
</html>

jedoch lassen sich die Knöpfe nicht drücken... und aus der reinen addreply.php werde ich nicht schlau... ich denke man muss dem Formular, wohl eher der Textarea etwas zuweisen damit sie als Destination für das JS gefunden wird oder?

Eydeet · Mai 2, 2007

Du könntest mal versuchen, aus dem <form> ein <form name="bbform"> zu machen.

reaLInsanity · Mai 2, 2007

jo jezz klappts =)
ähm kann man das vllt in JS so machen dass der das Formular automatisch erkennt?! Das würde mir einiges an Arbeit abnehmen

Cyberm@ster · Mai 2, 2007

Ja das geht mit

Code:

document.forms[0]

Dadurch erreichst du, dass dein Script das erste Form im Dokument anspricht. Les dir mal kurz folgende Seite durch (Schema 1 / Beispiel 1): http://de.selfhtml.org/javascript/objekte/forms.htm

Kartoffel · Jun 10, 2007

Hallo,

ich habe gerade versucht die buttons für BBCode in mein eigenes zu implementieren nur leider funktioniert das nicht so wie erhofft. eigentlich gar nicht. Ich kenn mich mit Java nicht aus und konnte auch bisher keine Lösung finden.
mein Script sieht momentan wie folgt aus:

Code:

<html><head>
<script type='text/javascript' src='bbcode.js'></script>
</script></head><body>
<table border=\"0\">
<tr><td colspan='2'>
<span class='titel'>News</span><p>
<span class='inhalt'>
</td></tr>
<tr><td>
<form method=\"POST\" form='bbform>'>
Titel:
</td><td colspan='2'>
<input type=\"text\" name=\"titel\">
</td></tr>
[...]
<tr>
  			<td align='center' colspan='2'>
	<img src='../images/bbcode_bold.gif' alt='fettgedruckter Text' title='fettgedruckter Text' border='0' onclick='bbcode(document.bbform,'B','')' onmouseover='this.style.cursor='hand';' />
	<img src='../images/bbcode_italic.gif' alt='kursiver Text' title='kursiver Text' border='0' onclick='bbcode(document.bbform,'I','')' onmouseover='this.style.cursor='hand';' />
	<img src='../images/bbcode_underline.gif' alt='unterstrichener Text' title='unterstrichener Text' border='0' onclick='bbcode(document.bbform,'U','')' onmouseover='this.style.cursor='hand';' />
	<img src='../images/bbcode_center.gif' alt='zentrierter Text' title='zentrierter Text' border='0' onclick='bbcode(document.bbform,'CENTER','')' onmouseover='this.style.cursor='hand';' />
	<img src='../images/bbcode_url.gif' alt='Hyperlink einfügen' title='Hyperlink einfügen' border='0' onclick='namedlink(document.bbform,'URL')' onmouseover='this.style.cursor='hand';' />
	<img src='../images/bbcode_email.gif' alt='E-Mail-Adresse einfügen' title='E-Mail-Adresse einfügen' border='0' onclick='namedlink(document.bbform,'EMAIL')' onmouseover='this.style.cursor='hand';' />
	<img src='../images/bbcode_image.gif' alt='Bild einfügen' title='Bild einfügen' border='0' onclick='bbcode(document.bbform,'IMG','http://')' onmouseover='this.style.cursor='hand';' />
	<img src='../images/bbcode_quote.gif' alt='Zitat einfügen' title='Zitat einfügen' border='0' onclick='bbcode(document.bbform,'QUOTE','')' onmouseover='this.style.cursor='hand';' />
	<img src='../images/bbcode_list.gif' alt='Liste erstellen' title='Liste erstellen' border='0' onclick='dolist(document.bbform)' onmouseover='this.style.cursor='hand';' />
	<img src='../images/bbcode_code.gif' alt='CODE einfügen' title='CODE einfügen' border='0' onclick='bbcode(document.bbform,'CODE','')' onmouseover='this.style.cursor='hand';' />
	<img src='../images/bbcode_php.gif' alt='PHP CODE farbig hervorheben' title='PHP CODE farbig hervorheben' border='0' onclick='bbcode(document.bbform,'PHP','')' onmouseover='this.style.cursor='hand';' /> </td>
 </tr>
<tr><td  colspan='3'>	
<tr><td colspan='3'>
<textarea rows='15' id='news' cols='45' name='text'></textarea>
	</td><td>
<tr><td>
<input type='submit' vlaue='Speichern' name='submit'>";
</form>
</td></tr>
</table>

Ich habe schon verschiedene sachen ausprobiert das form direkt vor die <textarea> gesetzt abe rgerbacht hat es wenig.
ich kann halt einfach nicht die Knöpfe drücken geschweige denn es in die <textarea übernehmen. Muss ich die <textarea>mit bbform bennen? ich freu mich über jeden Vorschlag.

Gruß,

EDIT: Ich habe gerade bemerkt. das der Listen Button so halb funktioniert. es öffnet sich das fenster wo man halt sien list eingeben kann aber mehr passiert auch nicht.

LX · Jun 10, 2007

Dein FORM-Tag ist nicht korrekt, das Attribut "form" gibt's nicht, sondern müsste "name" heißen. Außerdem hast du dich dort auch mit den Quotes verhaspelt.

Achja, und Java hat nichts mit JavaScript zu tun...

Kartoffel · Jun 10, 2007

ok die Quotes sind jetzt alle in Ordnung. Daran lag es, dass die onclik nicht richtig ausgeführt wurden. Danke

das mti dem form da ist mir doch glatt nen schreibfehler reingekommen. Aber trotz änderung in name="bbform" wird nichts in die Textarea eingefüht.

ok, also reden wir hier von javascript, kenn mich aber auch da nicht wirklich aus^^

ERFOLG:ich habe die Textareea in name="message" umbenannt und nun funkionieren alle die nicht onclick="bbcode([...])" haben. Anscheinend hab ich da nen Fehler drin. Danke für eure Hilfe. Manchmal braucht man einfach andere die mal den Code durchschauen und so banale Fehler finden.

reaLInsanity · Jun 10, 2007

Kann man es eigentlich so machen, dass man das alles ganz am anfang einbindet, und der das nur automatisch zu jeder Textarea macht....?

Wie bei dem TinyMCE, meine ich, ich dies der Fall. Egal welche Textarea wo ist, ohne etwas einzubinden, findet er die Area... bzw. das Formular... würd eeiniges an Arbeit abnehmen denke ich

Cyberm@ster · Jun 11, 2007

Wenn ich deine Frage richtig verstanden habe, solltest du vielleicht mal den Link zu SelfHTML lesen den ich weiter oben gepostet habe

reaLInsanity · Jun 11, 2007

joar ich hatte das so gelöst:

Code:

onclick='bbcode(document.forms[0])'

aber i-wie seh ich da keinen unterschied

also ich hab das jetzt wie folgt gelöst, weil das oben i-wie nicht mehr funktioniert, wahrscheinlich hatte ich den Cache nicht geelert oder nicht auf Reload geklickt 8o

Code:

<textarea class="input" type="text" name="text" cols="50" rows="5" name="edit" id="edit">Geb hier deinen Eintrag ein</textarea></td>
	 <td align='left'><div align="center"> 
	  	<a href='#' onClick='insert("[b]", "[/b]")' class='bold'><img src='images/bbcode/bbcode_bold.gif'></a>

		<a href='#' onClick='insert("[i]", "[/i]")' class='italic'><img src='images/bbcode/bbcode_italic.gif'></a>
		<a href='#' onClick='insert("[u]", "[/u]")' class='underline'><img src='images/bbcode/bbcode_underline.gif'></a>
		<a href='#' onClick='insert("[color=]", "[/color]")' class='underline'><img src='images/bbcode/bbcode_color.gif'></a><br>

		<a href='#' onClick='insert("[url=]", "[/url]")'><img src='images/bbcode/bbcode_url.gif'></a>
		<a href='#' onClick='insert("[quote=]", "[/quote]")'><img src='images/bbcode/bbcode_quote.gif'></a>
		<a href='#' onClick='insert("[img]", "[/img]")'><img src='images/bbcode/bbcode_image.gif'></a>
		<a href='#' onClick='insert("[email=]", "[/email]")'><img src='images/bbcode/bbcode_email.gif'></a><br>
		<a href='#' onClick='insert("[myvideo]", "[/myvideo]")'><img src='images/bbcode/myvideo.ico'></a>
		<a href='#' onClick='insert("[youtube]", "[/youtube]")'><img src='images/bbcode/youtube.ico'></a><br>
		<a href="popups/smilies.php" target="_blank" onclick="fenster(this.href,400,100); return false;">Smilies</a>

un due func.php:

PHP:

function bbcode($text1){
	$text1=preg_replace("/\[b\](.*)\[\/b\]/Usi", "<b>\\1</b>", $text1);
	$text1=preg_replace("/\[i\](.*)\[\/i\]/Usi", "<i>\\1</i>", $text1);
	$text1=preg_replace("/\[u\](.*)\[\/u\]/Usi", "<u>\\1</u>", $text1);
	$text1=preg_replace("/\[img\](.*)\[\/img\]/Usi", "<img src='\\1'>", $text1);
	$text1=preg_replace("/\[color=(.*)\](.*)\[\/color\]/Usi", "<font color='\\1'>\\2</font>", $text1);
	$text1=preg_replace("/\[quote=(.*)\](.*)\[\/quote\]/Usi","<br><br><div align='center'><table width='80%' cellspacing='0'><tr><td class='quotevon'>Zitat von: \\1</td></tr><tr><td class='quote'>\\2</td></tr></table></div><br>", $text1);
	$text1=preg_replace("/\[align=center\](.*)\[\/align]/Usi", "<div align='center'>\\1</div>", $text1);
	$text1=preg_replace("/\[url=(.*)\](.*)\[\/url]/Usi", "<a href='\\1' alt='\\1' info='\\1'>\\2</a>", $text1);
	$text1=preg_replace("/\[email=(.*)\](.*)\[\/email]/Usi", "<a href='mailto:\\1' alt='\\1' info='\\1'>\\2</a>", $text1);
	$text1=preg_replace("/\[myvideo\](.*)\[\/myvideo\]/Usi", "<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' width='425' height='367'> <param name='movie' value='http://www.myvideo.de/movie/\\1'></param><embed src='http://www.myvideo.de/movie/\\1' width='425' height='367' type='application/x-shockwave-flash'></embed></object>", $text1);
	$text1=preg_replace("/\[youtube\](.*)\[\/youtube\]/Usi", "<object width='425' height='367'><param name='movie' value='http://www.youtube.com/v/\\1'></param><param name='wmode' value='transparent'></param><embed src='http://www.youtube.com/v/\\1' type='application/x-shockwave-flash' wmode='transparent' width='425' height='367'></embed></object>", $text1);
	
	return $text1;
}