[HaBo]

reaLInsanity · 01.05.07, 23:11

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 · 02.05.07, 01:53

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&uuml;gen" title="Hyperlink einf&uuml;gen" border="0" onclick="namedlink(document.bbform,'URL')" onmouseover="this.style.cursor='hand';" /><img
src="images/bbcode_email.gif" alt="E-Mail-Adresse einf&uuml;gen" title="E-Mail-Adresse einf&uuml;gen" border="0" onclick="namedlink(document.bbform,'EMAIL')" onmouseover="this.style.cursor='hand';" /><img
src="images/bbcode_image.gif" alt="Bild einf&uuml;gen" title="Bild einf&uuml;gen" border="0" onclick="bbcode(document.bbform,'IMG','http://')" onmouseover="this.style.cursor='hand';" />
<img src="images/bbcode_quote.gif" alt="Zitat einf&uuml;gen" title="Zitat einf&uuml;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&uuml;gen" title="CODE einf&uuml;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

HaBo Ads

reaLInsanity · 02.05.07, 12:46

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&uuml;gen" title="Hyperlink einf&uuml;gen" border="0" onclick="namedlink(document.bbform,'URL')" onmouseover="this.style.cursor='hand';" />
<img src="images/bbcode_email.gif" alt="E-Mail-Adresse einf&uuml;gen" title="E-Mail-Adresse einf&uuml;gen" border="0" onclick="namedlink(document.bbform,'EMAIL')" onmouseover="this.style.cursor='hand';" /><img
src="images/bbcode_image.gif" alt="Bild einf&uuml;gen" title="Bild einf&uuml;gen" border="0" onclick="bbcode(document.bbform,'IMG','http://')" onmouseover="this.style.cursor='hand';" />
<img src="images/bbcode_quote.gif" alt="Zitat einf&uuml;gen" title="Zitat einf&uuml;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&uuml;gen" title="CODE einf&uuml;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 · 02.05.07, 14:22

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

reaLInsanity · 02.05.07, 15:51

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 · 02.05.07, 15:55

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 · 10.06.07, 15:07

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&uuml;gen' title='Hyperlink einf&uuml;gen' border='0' onclick='namedlink(document.bbform,'URL')' onmouseover='this.style.cursor='hand';' />
	<img src='../images/bbcode_email.gif' alt='E-Mail-Adresse einf&uuml;gen' title='E-Mail-Adresse einf&uuml;gen' border='0' onclick='namedlink(document.bbform,'EMAIL')' onmouseover='this.style.cursor='hand';' />
	<img src='../images/bbcode_image.gif' alt='Bild einf&uuml;gen' title='Bild einf&uuml;gen' border='0' onclick='bbcode(document.bbform,'IMG','http://')' onmouseover='this.style.cursor='hand';' />
	<img src='../images/bbcode_quote.gif' alt='Zitat einf&uuml;gen' title='Zitat einf&uuml;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&uuml;gen' title='CODE einf&uuml;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 · 10.06.07, 15:40

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 · 10.06.07, 15:53

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 · 10.06.07, 23:45

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 · 11.06.07, 02:10

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

reaLInsanity · 11.06.07, 08:10

joar ich hatte das so gelöst:

Code:

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

aber i-wie seh ich da keinen unterschied o.O

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

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("", "")' class='bold'><img src='images/bbcode/bbcode_bold.gif'></a>

		<a href='#' onClick='insert("", "")' class='italic'><img src='images/bbcode/bbcode_italic.gif'></a>
		<a href='#' onClick='insert("", "")' 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("", "")'><img src='images/bbcode/bbcode_url.gif'></a>
		<a href='#' onClick='insert("
	Zitat:
	
	
		
			
				", "
			
		
	
	
")'><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("", "")'><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("")'><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-Code:

  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;
}

Empfehlung

01.05.07, 23:11	#1 (permalink)
reaLInsanity Registriert seit: 10.01.06 Likes: 0	Buttons wie [B] oder [I] die den BBcode in eine Textarea eintragen 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 =)

10.06.07, 15:40	#8 (permalink)
LX Moderator Registriert seit: 14.02.06 Likes: 21	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... __________________ "Ever tried. Ever failed. No matter. Try again. Fail again. Fail better." - Samuel Beckett JS BB LX UP

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Buttons, schaltflächen, etc. "einschalten"	Schurke	Hacks & Crackmes	7	01.07.09 14:34
[RegExp] BBCode - [code]-Blöcke	rami	(Web-) Design und webbasierte Sprachen	2	10.06.09 14:56
BBCode schreiben	Executor	(Web-) Design und webbasierte Sprachen	6	10.08.08 15:14
Eine Frechheit ... oder?	Shadow94	Fun Section	8	07.03.08 22:14
MFC Buttons Style	KenshinX	Windows	2	05.03.05 14:24

02.05.07, 14:22	#4 (permalink)
Eydeet Registriert seit: 14.04.06 Likes: 4	Du könntest mal versuchen, aus dem <form> ein <form name="bbform"> zu machen.

02.05.07, 15:51	#5 (permalink)
reaLInsanity Themenstarter Registriert seit: 10.01.06 Likes: 0	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

02.05.07, 15:55	#6 (permalink)
Cyberm@ster Senior Member Registriert seit: 27.06.04 Likes: 0	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

10.06.07, 15:53	#9 (permalink)
Kartoffel Registriert seit: 10.06.07 Likes: 0	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.

10.06.07, 23:45	#10 (permalink)
reaLInsanity Themenstarter Registriert seit: 10.01.06 Likes: 0	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

11.06.07, 02:10	#11 (permalink)
Cyberm@ster Senior Member Registriert seit: 27.06.04 Likes: 0	Wenn ich deine Frage richtig verstanden habe, solltest du vielleicht mal den Link zu SelfHTML lesen den ich weiter oben gepostet habe


HaBo Ads HaBOT

[HaBo]

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