Einsatz von WYSIWYG Editor

**Morri** · 14.05.2006, 11:09

Hallo,

da die meisten WYSIWYG Editor direkt in HTML speichern wäre da BBCode wohl nicht angebracht.

Und naja wenn man ein CMS nutzt kann man JS ja wohl erwarten. Ansonsten muss er da halt direkt reinschreiben mit HTML. Konfort hat halt seinen Preis, aber was bleibt dir anderes übrig? Ohne JS gehen noch nichtmals so Button wie hier im Forum wo man ein z.B. den Fett-Tag einfügen kann.

**Luke** · 23.05.2006, 12:55

Hi Ilch,
wenn du nen WYSIWYG-Editor einbauen und nach wie vor den sichereren BB Coce verwenden willst, kann ich dir nur wärmstens tinyMCE ans Herz legen. Bei dem kannst du auf einfache weise vor dem Abschicken den HTML-Code (per RegEx) in BBcode umwandeln und hast somit nem WYSIWYG-BB-Code editor.

**ilch** · 23.05.2006, 13:21

hast du dafür zufällig eine Klasse, ein Modul eine Datei, ein Beispiel und eine kurze Erklärung für die Benutzung? Das würde mir das Leben erheblich vereinfachen.

Danke!

**Luke** · 23.05.2006, 14:22

Um den Editor einzubinden:

Code:

<html>
<head>
<title>TinyMCE Test</title>
<script language="javascript" type="text/javascript" src="./tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
	mode : "exact",
	elements : "IDDeinerTextarea"
});
</script>
</head>
<body>
<form method="post">
	<textarea id="IDDeinerTextarea" cols="75" rows="15">Dies wird zum WYSIWYGEditor.</textarea>
	<input type="submit" name="submitform" value="Sendform">
</form>
</body>
</html>

TinyMCE bietet die Möglichkeit eine Funktion anzugeben die vor dem Abschicken der Form aufgerufen wird und die als Parameter und Rückgabewert den Inhalt der Textarea hat. Darin kannst du dann per RegEx den HTML-Code in BBCode umwandeln. BSP:

Code:

<html>
<head>
<title>TinyMCE Test</title>
<script language="javascript" type="text/javascript" src="./tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
	mode : "exact",
	elements : "IDDeinerTextarea",

	save_callback : "makeUBB"
});

function makeUBB(element_id, html, body) { //Parameter müssen so bleieben (bis auf die Namen)
{
	html = html.replace(/<strong>/, "[ b ]");
	html = html.replace(/<\/strong>/, "[ /b ]");

	return html;
}
</script>
</head>
<body>
<form method="post">
	<textarea id="IDDeinerTextarea" cols="75" rows="15">Dies wird zum WYSIWYGEditor.</textarea>
	<input type="submit" name="submitform" value="Sendform">
</form>
</body>
</html>

Greets, Luke

edit:
bei [ b ] und [ /b ] leertasten entfernen

**ilch** · 23.05.2006, 14:25

sehr cool danke!!

**Luke** · 23.05.2006, 14:27

Der Schluckt mein [ b ] und [ /b ]

guck jetzt nochmal

**ilch** · 23.05.2006, 19:55

jau cool, ich hab mal etwas gestöbert und bin auf folgendes gestossen:

http://tinymce.moxiecode.com/punbb/v...ic.php?id=1323

... könnte man also rel. gut verwenden.

Einsatz von WYSIWYG Editor