Wie erstellt man einen WYSIWYG (What you see is what you get) Editor mit der Hilfe von TinyMCE?
Hier schonmal ein paar Links, die ihr später noch gebrauchen werdet:
TinyMCE Entwicklerseite: http://tinymce.moxiecode.com/
Infos von Wiki: http://de.wikipedia.org/wiki/TinyMCE
TinyMCE Wiki: http://wiki.moxiecode.com/index.php/TinyMCE:Index
- Den WYSIWYG-Editor von TinyMCE auf der Entwicklerseite herunterladen.
- Das Archiv(.zip) entpacken
- Ihr habt nun ziemlich verschachtelt einige Ordner vor euch:
- Ihr schnappt euch den Ordner tiny_mce und verschiebt ihn in euer Verzeichnis, wo ihr damit arbeiten wollt. (Bei mir heißt der Ordner WYSIWYG)
- Ihr macht dort eine neue Datei auf
In die neue Datei ladet ihr per JavaScript diese Datei: tiny_mce.js sie befindet sich in dem Ordner tiny_mce
<html>
<head>
<title>Test</title>
<script language=”javascript” type=”text/javascript” src=”tiny_mce/tiny_mce.js”></script>
<script language=”javascript” type=”text/javascript”>
tinyMCE.init({
mode : “textareas”
});
</script>
</head>
<body>
<form method=”post” action=”#”>
<textarea name=”content” cols=”50″ rows=”15″></textarea>
<input type=”submit” value=”Save” />
</form>
</body>
</html>
Dann beginnt ihr mit JavaScript. Ihr weißt allen Textareas den WYSIWYG-Editor zu.
Dadrunter macht ihr einfach ein Textarea und habt schon euren ersten kleinen Standard WYSIWYG-Editor.
Mit dem kann man schon ein paar Standardfunktionen umsetzen wie z.B. fett, kursiv etc.
Aber das ganze lässt sich natürlich noch erweitern:
Also ergänzen wir noch ein paar Buttons:
<html>
<head>
<title>Test</title>
<script language=”javascript” type=”text/javascript” src=”tiny_mce/tiny_mce.js”></script>
<script language=”javascript” type=”text/javascript”>
tinyMCE.init({
mode:”textareas”,
theme:”advanced”,
verify_html:false,
theme_advanced_buttons1: “fontselect,fontsizeselect,bold,italic,underline,separator,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist”,
theme_advanced_buttons2: “image,forecolor,backcolor,indent,outdent,undo,redo,link,unlink”,
theme_advanced_buttons3:”",
theme_advanced_toolbar_location:”top”
});
</script>
</head>
<body>
<form method=”post” action=”#”>
<textarea name=”content” cols=”50″ rows=”15″></textarea>
<input type=”submit” value=”Save” />
</form>
</body>
</html>
Hier habe ich, wie man sieht noch ein paar Buttons hinzugefügt. Eine ausführliche Übersicht über alle Buttons die ihr hinzufügen könnt, findet ihr in der TinyMCE Wiki.
Und so sieht das ganze dann aus:
Nun möchte ich gern noch eine Tabelle hinzufügen. Und zwar in die dritte Buttonreihe, die jetzt noch leer ist:
<html>
<head>
<title>Test</title>
<script language=”javascript” type=”text/javascript” src=”tiny_mce/tiny_mce.js”></script>
<script language=”javascript” type=”text/javascript”>tinyMCE.init({
theme : “advanced”,
mode : “textareas”,
plugins : “table”,
theme_advanced_toolbar_location:”top”,
theme_advanced_buttons2_add : “code”,
theme_advanced_buttons3_add : “tablecontrols”,
table_styles : “Header 1=header1;Header 2=header2;Header 3=header3″,
table_cell_styles : “Header 1=header1;Header 2=header2;Header 3=header3;Table Cell=tableCel1″,
table_row_styles : “Header 1=header1;Header 2=header2;Header 3=header3;Table Row=tableRow1″,
table_cell_limit : 100,
table_row_limit : 5,
table_col_limit : 5
});
</script>
</head>
<body>
<form method=”post” action=”#”>
<textarea name=”content” cols=”50″ rows=”15″></textarea>
<input type=”submit” value=”Save” />
</form>
</body>
</html>
Im Theme advanced sind in der Regel schon alle wichtigen Buttons enthalten, ich habe nur noch den Button Code in der Reihe 2 hinzugefügt und das Plugin-Tabelle in der dritten Buttonreihe.
