Tiny MCE 3.0. JavaScript-Tools. Inhaltsverzeichnis. WYSIWYG-Editor für Textfelder in HTML-Formularen

Transkript

1 JavaScript-Tools Tiny MCE 3.0 WYSIWYG-Editor für Textfelder in HTML-Formularen Inhaltsverzeichnis Beschreibung des Tiny-MCE-Editors...5 Download...5 Wiki mit der Dokumentation des Editors...5 Weitere Plugins:...5 Sonstige Quellen:...5 Installation...6 Einbindung...6 Modus...6 mode : "textareas"...6 mode : "specific_textareas"...7 editor_selector editor_deselector...7 mode : "exact"...7 elements : "id_textarea"...7 Sprachdatei für Lokalisierung einbinden...8 language : "de"...8 Themes und Plug-ins (Einstellung der Möglichkeiten)...9 Konfiguration theme : " simple advanced " plugins Funktionalität des Editors bestimmen (Theme options) theme_advanced_buttons1 : "emotions" theme_advanced_buttons1 : "" theme_advanced_buttons2_add : "emotions" theme_advanced_buttons3_add_before : "emotions" Oberfläche des Editors definieren theme_advanced_toolbar_location : "top bottom external", theme_advanced_toolbar_align : "left right center" theme_advanced_statusbar_location : "top bottom none", theme_advanced_resizing : true Skins Beipiel: HTML-Textteile mit dem TinyMCE editieren Mag. Erwin Mayer, Dezember 2009 VBS Akademiestraße

2 Klassenformate in Format/Styles-DropDown-Feld anbieten content_css Schriftarten im TinyMCE anbieten theme_advanced_fonts Externe Listen anbieten Vorlagenliste template_external_list_url : "verzeichnis/template_list.js" Beispiel: Code-Schnipsel (Snippets) im TinyMCE vordefinierte Inhalte einbinden ) Inhalt erstellen: ) Einstellungen für den Texteditor anpassen: ) Auflistung der Template-Liste (template_list.js) : Linkliste external_link_list_url : "verzeichnis/link_list.js" Bilderliste external_image_list_url : "verzeichnis/image_list.js" Beispiel: Bilderverwaltung mit dem TinyMCE Bilderupload mit Pure PHP Upload Bilderliste mit PHP erzeugen Datei: bilderliste.php Datei: bild_einfuegen.php Bild einfügen Medienliste media_external_list_url : "verzeichnis/media_list.js" Beispiel: Konfiguration nach Benutzer-Gruppen TinyMCE:Control reference Mit dem TinyMCE mitgelieferte Beispiele Verzeichnis: C:/xampp/htdocs/WEd_TinyMCE/tinymce/examples Dateiliste: Datei: full.html Datei: index.html Datei: menu.html Datei: simple.html Datei: skins.html Datei: translate.html Datei: word.html Verzeichnis: C:/xampp/htdocs/WEd_TinyMCE/tinymce/examples/lists Dateiliste: Datei: image_list.js Datei: link_list.js Datei: media_list.js Datei: template_list.js Weitere Beispiele von 40 EX01 Toggle editor with JavaScript EX02 Valid elements EX03 Class selectors/deselectors EX04 multiple configs/inits EX05 Custom cleanup EX06 Ajax load/save EX07 Read only mode EX08 Url conversion Output-Quellcode aus den POST-Variablen FAQ dazu Relative URLs Absolute URLs Domain Absolute URLs Keine URL Conversion EX09 BBCode Seite 2/61 TinyMCE Mag. Erwin Mayer, 2009

3 EX10 Noneditable content example EX11 Fullpage example EX12 Load on demand EX13 Load on demand using compressor EX14 Setup editor events EX15 External toolbar EX16 Custom listbox/splitbutton EX17 Accessibility EX18 Menu button EX19 Tab focus EX20 Custom toolbar button EX21 Post to self EX22 jquery version EX23 jquery plugin Doku V6 Mag. Erwin Mayer, 2009 TinyMCE Seite 3/61

4 Seite 4/61 TinyMCE Mag. Erwin Mayer, 2009

5 Beschreibung des Tiny-MCE-Editors TinyMCE (Tiny Moxiecode Content Editor) ist ein auf JavaScript basierender freier WYSIWYG-Editor für Webanwendungen Mit Hilfe von TinyMCE ist es möglich, ohne HTML-Kenntnisse Seiten und Beiträge zu verfassen. Hierbei wird die Eingabe durch den Benutzer in einer Textbox (textarea) von JavaScript in Echtzeit in HTML-Code umgesetzt und als Vorschau ausgegeben. Die Bedienung orientiert sich stark an Microsoft Word. Der Funktionsumfang kann individuell konfiguriert werden, sodass es möglich ist, einzelne Funktionen zu deaktivieren. TinyMCE zeichnet sich durch folgende Fähigkeiten aus: o o o o o o er lässt sich mit nur 2 Zeilen Code integrieren über Themes und Plugins kann der Editor individuell angepasst werden anpassbare Ausgabe des Quelltextes im XHTML 1.0 Format Unterstützung von Mehrsprachigkeit Unterstützung der gängigsten Webbrowser Einsatz von Ajax zum Speichen und Laden von Inhalten Download (kostenlos) Sourceforge Entwicklerforum Wiki mit der Dokumentation des Editors Weitere Plugins: MCFileManager von Moxiecode (nicht kostenfrei) MCImageManager von Moxiecode(nicht kostenfrei) TinyBrowser Web File Browser(kostenfrei) Dateibrowser mit Upload und Bildvorschau Sourceforge.net (weitere Plugins) Sonstige Quellen: Manfred Müller Späth, Texteditor de luxe, Tiny MCE in PHP-Projekten Mag. Erwin Mayer, 2009 TinyMCE Seite 5/61

6 Installation Tiny MCE braucht zur Installation nur von der Moxiecode-Seite heruntergeladen, entpackt und auf den Server kopiert zu werden. Dazu ist das Paket des Editors in das Arbeitsverzeichnis zu entpacken, auf das der Web- Server, unter dem die Web-Seiten verwaltet werden, Zugriff hat In der Regel wird das ein Verzeichnis unter dem Documentroot des jeweiligen (virtuellen) Web-Servers (<documentroot>) sein. wie In diesem Verzeichnis liegen nun alle benötigten Dateien für den Editor im Zugriff, mehr ist als Installationsmaßnahme nicht notwendig. standardmäßig beispielsweise tnymce/scripts/tiny_mce. Das Extrahieren der Datei tinymce_3_2_7.zip in Ihr Arbeitsverzeichnis ergibt folgendes Bild (Unterverzeichnis tinymce): In dieses Verzeichnis werden die Sprachmodule entpackt Einbindung Tiny-MCE kann nun auf unterschiedliche Weise in die eigene Seite integriert werden. Die einfachste Variante ersetzt alle Tags vom Typ textarea mit dem neuen Editor. Die beim Initialisieren per TinyMCE.init übergebenen Optionen steuern die Software dieser Bereich ist das Kernstück zur Einstellung und Anpassung des Programms. Modus Es gibt drei Modi wie TinyMCE auf textareas reagieren soll : Neben textareas gibt noch die Modi specific_textareas, exact und none. mode : "textareas" bedeutet, dass alle textareas mit dem Tiny MCEditor ersetzt werden sollen. dazu müssen Sie lediglich auf der Seite, in der Tiny-MCE alle Textareas ersetzten soll, folgendeden Code im <head>-bereich eingeben (der Pfad muss natürlich den eigenen Gegebenheiten angepasst werden): Beispiel: <script language="javascript" type= "text/javascript" src="/scripts/tiny_mce/tiny_mce.js"></script> <script language="javascript" type="text/javascript"> mode : "textareas" </script> Damit ist die Arbeit grundsätzlich schon erledigt wenn Sie die Seite im Browser öffnen, können Sie in den Textarea-Feldern statt einfachen ASCII-Texts nun ansehnlich formatierten HTML-Code eingeben, der dann beim Übertragen des jeweiligen Formulars per submit an den Server weitergereicht wird. Die erste Zeile lädt die Javascript-Datei. Seite 6/61 TinyMCE Mag. Erwin Mayer, 2009

7 Im internen Script wird ein Tiny-MCE-Objekt in dem Modus textareas angelegt. Dabei werden diese durch einen komfortablen Editor ersetzt. Einfacher geht's wirklich nicht. Allerdings wird mit dieser Einstellung nur ein kleiner Teil der gegebenen Möglichkeiten gezeigt. mode : "specific_textareas" editor_selector editor_deselector Der mit specific_textareas bezeichnete Modus wird mit einer weiteren Option genauer definiert: So wird mit editor_selector eine Sammlung von CSS-Klassen aufgelistet, Tiny-MCE konvertiert dann die Textareas, die zu diesen Klassen gehören, zum Editor, alle anderen nicht. Umgekehrtes Verhalten zeigt editor_deselector: Hier werden alle Textareas umgewandelt bis auf jene, die einer CSS-Klasse angehören, deren Namen sich in der Auflistung befinden. Sie können auch mehrere Konfigurationen gleichzeitig einsetzen, wenn Sie statt nur einer Konfiguration zwei angeben: Beispiel: mode: "specific_textareas", theme: "simple", editor_selector: "mceeinfach" mode: "specific_textareas", theme: "advanced", editor_selector: "mcekomplex" Damit werden nun alle textarea-felder, die der CSS-Klasse mceeinfach angehören, mit der entsprechend einfachen Ausstattung des Editors belegt, wohingegen die Felder der Klasse mcekomplex mehr Funktionalitäten aufweisen. <form method="post" action="somepage"> <textarea name="content1" class="mceeinfach" style="width:100%"> </textarea> <textarea name="content2" class="mcekomplex" style="width:100%"> </textarea> </form> mode : "exact" elements : "id_textarea" hier werden nur die in elements aufgelisteten Textareas zum Editor Beispiel: mode: "exact", elements: "inhalt1", Der Betriebsmodus namens exact konvertiert alle Elemente, deren eindeutige CSS-ID unter der zusätzlichen Option elements eingetragen ist, in einen Editor. Dieses Verhalten kann auch auf div, span und andere Elemente angewandt werden. Mag. Erwin Mayer, 2009 TinyMCE Seite 7/61

8 dann beim Textfeld: <form name="form1" method="post" action="zeigallevar.php"> <p><textarea name="inhalt1" cols="50" rows="10" id="inhalt1" >Text, der im Editor gezeigt wird</textarea></p> <p><textarea name="inhalt2" cols="50" rows="15" id="inhalt2" >einfacher Text, der im Editor gezeigt wird</textarea> </p> <p><input type="submit" name="submit" value="ausgeben"></p> </form> Hier wird nur das Textfeld mit der id="inhalt1" durch den TinyMCE ersetzt. Sprachdatei für Lokalisierung einbinden Ebenfalls lässt sich Tiny-MCE problemlos lokalisieren. Zum einen gibt es eine große Auswahl an Paketen zur Einbindung unterstützter Sprachen auf der Download- bzw. Sourceforge- Seite, zum anderen ist gut erläutert, welche Dateien die lokalisierbaren Daten enthalten. So kann man im Zweifelsfall selbst Hand anlegen. Download der Sprachdatei: bzw. Entpacken Sie die Datei tinymce_lang_pack.zip- ins Verzeichnis /tiny_mce! language : "de" Hier erfolgt die Spracheinstellung Beispiel: language: "en", Spracheinstellung für Englisch language: "de", Spracheinstellung für Deutsch, jedoch muß zusätzlich ein Modul installiert (s.o.) werden.!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <title>simple theme example</title>  <script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> </script>  </head> language : "de", // Wechsel auf Deutsch mode : "textareas", theme : "simple" Seite 8/61 TinyMCE Mag. Erwin Mayer, 2009

9 Themes und Plug-ins (Einstellung der Möglichkeiten) Tiny-MCE unterstützt Themen (Themes) und Plug-ins, die eine sehr modulare Konfiguration erlauben. Sie können auch Themen selbst entwickeln und so schnell zwischen unterschiedlichen Konfigurationen umschalten. Des Weiteren bietet die integrierte Plug-in- Schnittstelle die Möglichkeit, Tiny-MCE um fehlende Funktionen zu erweitern. Dabei werden schon etliche Plug-ins im Paket mitgeliefert, weitere Tools von Drittanbietern findet man auch auf speziellen Sourceforge-Seiten. Einige interessante Vertreter der Gattung seien kurz vorgestellt: Wird Tiny-MCE in einer Forums-Umgebung eingesetzt, sind die Plug-ins emotions und BBCode hilfreich, mit diesen können Smileys im Text eingefügt und BBCode benutzt werden. (siehe EX09 BBCode). siehe auch Beipiel Konfiguration nach Benutzer-Gruppen Mit fullpage können Sie eine komplette HTML-Seite mit head- und body-bereich editieren. Normalerweise wird HTML-Code, der nur eingebettet werden kann, ohne <head> oder <body>-tag ausgegeben. (siehe EX11 Fullpage example) Interessant ist ebenfalls das Plug-in media mit diesem können Sie Mediendaten für Player wie Quicktime, Flash, Shockwave, Realplayer und Windows Media Player einbinden. Plug-is wie print oder searchreplace beschreiben sich schon durch ihren Namen. Der spellchecker allerdings ist eine schlaue Software zur Rechtschreibprüfung greift sie per Ajax entweder auf eine entsprechend zur Verfügung gestellte PHP-Seite mit PSpell/ASpell-Unterstützung zu oder auf den Google-Spellchecker. Aber auch die Tools auf der Sourceforge-Seite können sich sehen lassen. Hier gibt es Plugins vom PHP basierten Filemanager mit Upload-Möglichkeit, mehrere Bildverwaltungs- und Clipart-Tools, CSS-Editoren, Syntax-Highlighter, Blogger-Anbindungen, diverse Anpassungen nationaler Spezifikas bis hin zur Einbettung von Youtube-Videos. Die Suche nach TinyMCE und Plug-in fördert mehr als 3100 Ergebnisse auf Sourceforge zutage da sollte für jeden etwas Passendes zu finden sein. Interessant ist auch der neue readdonly- Modus, in dem Tiny-MCE die Inhalte nur darstellt Änderungen sind blockiert. Dies ist hilfreich, wenn man eine Anzeige von der reinen Darstellung in den Editor-Modus umschalten möchte (siehe EX07 Read only mode). Auch der erzeugte Inhalt lässt sich in bestimmten Grenzen kontrollieren. Mit der cleanup- Option, die zu diesem Zweck immer aktiv sein sollte, überprüft die Software beim Editieren und Sichern den Text. So sind die Optionen valid_elements, unvalid_elements und extended_valid_elements hilfreich hier können Sie festlegen, welche HTML-Elemente und Tags im Text vorkommen dürfen. Dabei ist es am einfachsten, unter valid_elements alle gemeinsam gültigen, erlaubten Elemente zu notieren und dann User abhängig über extended_elemts die individuelle Anpassung vorzunehmen. Mag. Erwin Mayer, 2009 TinyMCE Seite 9/61

10 Konfiguration Das sind alle Bedienelemente, welche der Editor von Haus aus mitbringt. Über die erwähnten Optionen, die der Initialisierungsroutine als Javascript-Object mitgegeben werden, lässt sich der Editor sehr fein einstellen. Dies kann an dieser Stelle allerdings nicht bis ins Detail ausgeführt werden. Auf den Seiten des Anbieters gibt es weiterführende Beispiele, die Sie auch direkt testen können. Das Konzept der Konfiguration des Editors ist eigentlich immer gleich: Ein Thema kann die Grundeinstellung vorgeben, dann werden die zu ladenden Plug-ins angegeben, und danach die Buttons, die in der Oberfläche zu sehen sein sollen. Im Anschluss daran kommen einige Einstellungen der Oberfläche sowie einzelne Optionen, die entweder die Plug-ins konfigurieren oder Detaileinstellungen vornehmen. Somit lässt sich Tiny-MCE sehr genau und straff an die eigenen Wünsche anpassen. Hier erfolgt die Einstellung, welche Plugins, welche Buttons erscheinen sollen. Bei einfachen Beispiele genügt vielleicht "simple" doch der Standard ist eher "advanced", weil hier die Buttons individuell bestimmt werden können. theme : " simple advanced " Beispiel: theme: "simple" einfache Auswahl (siehe Beispiel einfach.php) theme: "advanced" Standardeinstellung, die eine Auswahl der Buttons ermöglicht (siehe voll.php). // Theme options theme_advanced_buttons1 : "save,newdocument,,bold,italic,underline,strikethrough,,justifylef t,justifycenter,justifyright,justifyfull,styleselect,formatselect,fo ntselect,fontsizeselect", plugins Sie müssen hier eine Auflistung aller benötigten plugins angeben. Welche werden benötigt? Siehe dazu in wiki: Hier erfolgt eine Auflistung aller mitgelieferten Plugins (alle aus Beispiel voll.php): plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,inse rtdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,nonedit able,visualchars,nonbreaking,xhtmlxtras,template,wordcount", Seite 10/61 TinyMCE Mag. Erwin Mayer, 2009

11 Funktionalität des Editors bestimmen (Theme options) theme_advanced_buttons1 : "emotions" Emoticon-Schaltfläche wird am Ende der 1. Zeile eingefügt. theme_advanced_buttons1 : "" 1. Zeile der Buttons wird gelöscht!. theme_advanced_buttons2_add : "emotions" Emoticon-Schaltfläche wird am Ende der 2. Zeile eingefügt. theme_advanced_buttons3_add_before : "emotions" Emoticon-Schaltfläche wird am Beginn der 3. Zeile eingefügt. // Theme options theme_advanced_buttons1 : "save,newdocument,,bold,italic,underline,strikethrough,,justifyleft,justifycenter,justifyright, justifyfull,styleselect,formatselect,fontselect,fontsizeselect", theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,,search,replace,,bullist,numlist,,outdent,indent, blockquote,,undo,redo,,link,unlink,anchor,image,cleanup,help,code,,insertdate,inserttime,pre view,, forecolor,backcolor", theme_advanced_buttons3 : "tablecontrols,,hr,removeformat,visualaid,,sub,sup,,charmap,emotions,iespell,media,advhr,,print,,ltr,rtl,,fullscreen", theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,,styleprops,,cite,abbr,acronym,del,ins, attribs,,visualchars,nonbreaking,template,pagebreak", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true, Mag. Erwin Mayer, 2009 TinyMCE Seite 11/61

12 Oberfläche des Editors definieren theme_advanced_toolbar_location : "top bottom external", Wenn wir eine voll ausgestatteten (full-featured) Editor aufbauen wollen, so sind die toolbars oben, wie man das von anderen Editoren gewohnt ist. Wenn nichts angegeben wird, so sind die toolbars standardmäßig unten angeordnet. Diese Features verlangen den advanced Modus. theme_advanced_toolbar_align : "left right center" Die Standardeinstellung ist center. theme_advanced_statusbar_location : "top bottom none", theme_advanced_resizing : true Diese Definition ist nur sinnvoll wenn die Option theme_advanced_statusbar_location auf top oder bottom gesetzt ist. Standard ist auf false gesetzt, d.h. Veränderung der Fenstergröße nicht möglich. Skins Sie können das Aussehen des Editors darüber hinaus mit sogenannten Skins bestimmen. Siehe mitgeliefertes Beispiel skins.html, hier auf Deutsch: Standard-Oberfläche skin : "o2k7" skin : "o2k7", skin_variant : "silver", skin : "o2k7", skin_variant : "black", Seite 12/61 TinyMCE Mag. Erwin Mayer, 2009

13 Beipiel: HTML-Textteile mit dem TinyMCE editieren Hier wird der TinyMCE als Web-Editor genutzt. Der Inhalt des Textfeldes wird an die Datei neuigkeiten_speichern mit der POST-Methode übertragen und gespeichert. Dazu müssen Sie im jeweiligen Verzeichnis die Schreibrechte besitzen! Diese HTML-Textteile können nun in jeder beliebigen PHP-Datei z.b. mit include ausgegeben werden! neuigkeiten.txt enthält HTML-Texteil neuigkeiten_verwaltung.php Testteil mit TinyMCE editieren POST neuigkeiten_anzeige.php Anzeige mit include bzw. readfile neuigkeiten_speichern.php Speichern des HTML-Texteils neuigkeiten.txt <h2>neuigkeit</h2> <p>wir berichten hier von einer <span style="color: #ff0000;">neuigkeit</span> auf dem Markt!</p> Ausgabe des HTML-Texteils neuigkeiten_anzeige.php <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html><head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>anzeige</title> </head><body> <?php # Ausgabe mit readfile readfile('neuigkeiten.txt'); # weitere Möglichkeit der Einbindung des Textteils mit include # include('neuigkeiten.txt');?> </body></html> Mag. Erwin Mayer, 2009 TinyMCE Seite 13/61

14 neuigkeiten_verwaltung.php Diese Datei zeigt den voll konfigurierten TinyMCE: Durch Klick auf [Speichern] wird der HTML-Text als neuigkeiten.txt abgespeichert. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html><head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>verwaltung der Neuigkeiten</title>  <script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> // General options mode : "textareas", theme : "advanced", language : "de", plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,in linepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,direc tionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordco unt", // Theme options theme_advanced_buttons1 : "save,newdocument,,bold,italic,underline,strikethrough,,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect", theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,,search,replace,,bullist,numlist,,outdent,in dent,blockquote,,undo,redo,,link,unlink,anchor,image,cleanup,help,code,,insertda te,inserttime,preview,,forecolor,backcolor", theme_advanced_buttons3 : "tablecontrols,,hr,removeformat,visualaid,,sub,sup,,charmap,emotions,iespell,med ia,advhr,,print,,ltr,rtl,,fullscreen", theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,,styleprops,,cite,abbr,acronym,del,ins,attribs,,visualchars,nonbreaking,template,pagebreak", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true, // Example content CSS (should be your site CSS) content_css : "examples/css/content.css", // Drop lists for link/image/media/template dialogs template_external_list_url : "tinymce/anpassungen/template_list.js", external_link_list_url : "lists/link_list.js", Seite 14/61 TinyMCE Mag. Erwin Mayer, 2009

15 external_image_list_url : "tinymce/anpassungen/image_list.js", media_external_list_url : "lists/media_list.js" </script>  <style type="text/css">  </style> </head> <body> <h3>verwaltung der Neuigkeiten</h3> <form name="form1" method="post" action="neuigkeiten_speichern.php"> <p> <?php //einlesen mit readfile('neuigkeiten.txt');?> <textarea name="neuigkeit" cols="70" rows="7" id="neuigkeit" ><?php readfile('neuigkeiten.txt');?></textarea> </p> <p> <input type="submit" name="submit" value="speichern"> </p> </form> <p> </p> </body> </html> neuigkeiten_speichern.php <?php $news = $_POST['neuigkeit']; $news = stripslashes($news); // entfernt Rückstrich $datei = fopen("neuigkeiten.txt","w"); fwrite($datei,$news); fclose($datei); # Rücksprung zur Verwaltungsseite header ("Location:neuigkeiten_verwaltung.php");?> Mag. Erwin Mayer, 2009 TinyMCE Seite 15/61

16 Klassenformate in Format/Styles-DropDown-Feld anbieten Um dem Wysiwyg-Anspruch gerecht zu werden, muss die CSS-Datei, die den Inhalt später mit den Style-Informationen verknüpft und ins Layout setzt, in der Option content_css eingetragen werden. Sind dann über die Themen alle Buttons des Editors nur mit erlaubten und erwünschten Stilen belegt und die Option verify_css_classes auf true gesetzt, sollte eigentlich nichts mehr schiefgehen. Denn in diesem Fall können keine anderen CSS-Klassen als diejenigen, die in der unter content_css eingetragenen Datei zu finden sind, im Editor eingesetzt werden. Elemente mit ungültigen Klassennamen werden einfach entfernt. Durch diese Möglichkeiten ist es leicht, ein konsistentes Konzept für eine CSM-Redaktion aufzusetzen, bei dem nicht vom vorgegebenen Design abgewichen werden kann. content_css Hier können Sie den Pfad zu einem Stylesheet in den "Settings"-Angaben in tinymce.init angeben z. B. content_css : "tinymce/examples/css/content.css" dazu müssen Sie noch dafür sorgen dass das Dropdownfeld "styleselect" erscheint: z. B.: theme_advanced_buttons1 : bold,,styleselect Die Klassenformate dieses Stylesheets werden dann im Dropdownfeld Styles/Format angeboten. Die CSS- Formate müssen als Klasse angelegt werden und werden automatisch dem umgebenden Element als Klasse und nicht als Direktformatierung zugewiesen bzw. ein <span> mit dieser Klasse wird generiert. Vorteile bei der Verwendung von Klassenformaten: o Schnellere, weniger umständliche Formatierung o Inhalt und Formatierung sind voneinander getrennt o Weniger Quellcode und dadurch schnellere Ladezeiten o geringerer Aufwand bei der Wartung.example1 { font-weight: bold; font-size: 14px }.example2 { font-weight: bold; font-size: 12px; color: #FF0000 }.tablerow1 { background-color: #BBBBBB; } content.css <p>dies ist <span class="example2">rot hinterlegter Text</span></p> Seite 16/61 TinyMCE Mag. Erwin Mayer, 2009

17 Schriftarten im TinyMCE anbieten Wie bestimmt man die Auswahl der Schriftarten? theme_advanced_fonts Diese Angaben kommen in die tinymce.init. Hier ist folgende Anweisung zu schreiben: theme_advanced_fonts: "Arial=arial,helvetica,sans-serif; Comic Sans MS=comic sans ms,arial,helvetica,sans-serif;", Vor dem = steht die Bezeichnung die im Texteditor zu sehen ist. Nach dem = die Schriftarten in der Reihenfolge, wie sie vom Browser verwendet werden sollen. Ähnliches ist auch bei der Schriftgröße möglich: Standardgemäß wird bei der Auswahl der Schriftgröße die Einheit pt verwendet, der Editor schreibt aber z.b.: <p style="font-size: large;">text</p> Um dies anzupassen genügt folgende Zeile: theme_advanced_font_sizes : "xx-small=1, x-small=2, small=3, medium=4, large=5, x- large=6, xx-large=7", Vor dem = steht wieder der Text der zur Auswahl dient, danach die Größe. Externe Listen anbieten Vorlagenliste template_external_list_url : "verzeichnis/template_list.js" bietet Listen der Templates an: // This list may be created by a server logic page PHP/ASP/ASPX/JSP in some backend system. // There templates will be displayed as a dropdown in all media dialog if the "template_external_list_url" // option is defined in TinyMCE init. var tinymcetemplatelist = [ // Name, URL, Description ["Simple snippet", "templatesem/snippet1.htm", "Simple HTML snippet."], ["Layout", "templatesem/layout1.htm", "HTML Layout."], ["HTML-Seite", "templatesem/ganzeseite.htm", " HTML Seite mit Tabelle."] ]; Mag. Erwin Mayer, 2009 TinyMCE Seite 17/61

18 Beispiel: Code-Schnipsel (Snippets) im TinyMCE vordefinierte Inhalte einbinden In einem Gästebuch soll am Ende jedes Beitrages der jeweilige Autor seine Kontaktdaten bekanntgeben können: Um hier nicht jedes Mal die Daten umständlich formatieren zu müssen, bietet man einen vordefinierten Inhalt an und zwar mit der Funktion Vorgefertigte Vorlageninhalte einfügen / Insert predefined template content. 1) Inhalt erstellen: Zuerst erstellen wir den Inhalt dieser Vorlage (kontaktdaten.htm) <table width="300" border="0" > <tr> <td colspan="2"><strong>vorname Name </strong></td> </tr> <tr> <td>adresse:</td> <td>1010 Wien, Akademiestraße 12 </td> </tr> <tr> <td> </td> <td><a href="mailto:name@vbs.ac.at">name@vbs.ac.at</a></td> </tr> <tr> <td>telefon:</td> <td>0676/ </td> </tr> </table> Beispielsdateien Dies ist der HTML-Code, welcher später eingefügt wird und obige Ansicht erzeugt HEAD und BODY sind also nicht nötig. 2) Einstellungen für den Texteditor anpassen:  <script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> // General options mode : "textareas", theme : "advanced", language : "de", plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,in linepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,direc tionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordco unt", // Theme options theme_advanced_buttons1 : "save,newdocument,,bold,italic,underline,strikethrough,,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect", Seite 18/61 TinyMCE Mag. Erwin Mayer, 2009

19 theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,,search,replace,,bullist,numlist,,outdent,in dent,blockquote,,undo,redo,,link,unlink,anchor,image,cleanup,help,code,,insertda te,inserttime,preview,,forecolor,backcolor", theme_advanced_buttons3 : "tablecontrols,,hr,removeformat,visualaid,,sub,sup,,charmap,emotions,iespell,med ia,advhr,,print,,ltr,rtl,,fullscreen", theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,,styleprops,,cite,abbr,acronym,del,ins,attribs,,visualchars,nonbreaking,template,pagebreak", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true, theme_advanced_fonts: "Arial=arial,helvetica,sans-serif; Comic Sans MS=comic sans ms,arial,helvetica,sans-serif;", // Example content CSS (should be your site CSS) content_css : "vorlagen/eigenerstil.css", // Drop lists for link/image/media/template dialogs template_external_list_url : "vorlagen/template_list.js" </script>  Diese Settings bestimmen Aussehen und Funktion des Texteditors und sind im Kopf der Datei eingebunden. Für die neue Funktion benötigen wir die Plugin- Definition "template", die Einbindung des passenden Buttons namens "template" in die Buttonleiste sowie die Information zum Speicherort der Template- Liste. Letztere wird im nächsten Schritt erstellt. 3) Auflistung der Template-Liste (template_list.js) : var tinymcetemplatelist = [ // Name, URL, Description ["Kontaktdaten", "vorlagen/mytemplates/kontaktdaten.htm", "Kontaktdatentabelle"], ["Layout", "vorlagen/mytemplates/layout1.htm", "HTML Layout."], ["HTML-Seite", "vorlagen/mytemplates/ganzeseite.htm", " HTML Seite mit Tabelle."], ["Grußformel", "vorlagen/mytemplates/schnipsel1.htm", " Grußformel"] ]; Diese Datei beinhaltet die Auflistung aller Snippets inkl. Beschreibung und Adresse und wird unter dem Namen template_list.js wie in den Einstellungen vermerkt gespeichert. Kurzbezeichnung des Snippets, diese wird im Popup- Fenster (siehe letztes Bild) in der Dropdown- Auswahl Template angezeigt. Url des Snippets (die HTML- Datei aus Schritt 1)), relativ zum Dokument welches den Texteditor enthält. Beschreibung des Snippets, diese wird im Popup- Fenster (siehe letztes Bild) als Description angezeigt. Achtung! Jede Zeile wird mit einem Beistrich abgeschlossen, nicht aber die letzte Zeile! Mag. Erwin Mayer, 2009 TinyMCE Seite 19/61

20 Ansicht in der Buttonleiste Der markierte neue Button öffnet folgendes Popup- Fenster: Im Dropdown Vorlage/Template wird nun der passende Vorlagen-Teil ausgewählt. Sofort wird diese in das Vorschau/Preview-Fenster geladen und die Beschreibung wird angezeigt. Nach Klick auf Einfügen schließt sich dieses Fenster und der vordefinierte Inhalt befindet sich im Textfeld des Formulares und kann mit den restlichen Inhalten gespeichert werden. Linkliste external_link_list_url : "verzeichnis/link_list.js" // This list may be created by a server logic page PHP/ASP/ASPX/JSP in some backend system. // There links will be displayed as a dropdown in all link dialogs if the "external_link_list_url" // option is defined in TinyMCE init. var tinymcelinklist = new Array( // Name, URL ["Google", " ["Freshmeat", " ["Sourceforge", " ); Seite 20/61 TinyMCE Mag. Erwin Mayer, 2009

21 Bilderliste external_image_list_url : "verzeichnis/image_list.js" // This list may be created by a server logic page PHP/ASP/ASPX/JSP in some backend system. // There images will be displayed as a dropdown in all image dialogs if the "external_link_image_url" // option is defined in TinyMCE init. var tinymceimagelist = new Array( // Name, URL ["Logo 1", "media/logo.jpg"], ["Logo 2 Over", "media/logo_over.jpg"] ); Beispiel: Bilderverwaltung mit dem TinyMCE Wie kann man Bilder dem TinyMCE zum Einfügen zur Verfügung stellen? Wie Sie eine gegebene Menge von Bildern zum Editieren zur Verfügung stellen zeigt das mit dem TinyMCE mitgelieferte Beispiel full.html. Wir wollen jedoch Bilder zuerst hochladen und dann im TinyMCE verwenden. Dazu benötigen wir ein Upload-Formular, ein PHP-Datei zum Erzeugen der Liste und schließlich eine Seite, die die Bilder verwendet. mit dieser Datei können Bilder eingefügt werden Upload erzeugt Bilderliste (image_list.js) Upload mit einfachem Pure PHP Upload Pure PHP Upload-Dateien Wir legen das Upload-Verzeichnis bilderverwaltung/uploadverzeichnis fest. Zuerst erstellen wir eine Datei, die das hinaufladen von Bildern bewerkstelligt (bildupload.php), danach soll sofort die Bilderliste neu erstellt werden. Bilderupload mit Pure PHP Upload (bildupload.php) Formular entwerfen und Serververhalten Pure PHP Upload anwenden: Mag. Erwin Mayer, 2009 TinyMCE Seite 21/61

22 Erstellen der Bilder-Liste (image_list.js) Die image_list.js hat folgende Struktur: var tinymceimagelist = new Array( // Name, URL ["Logo 1", "bilderverwaltung/uploadverzeichnis/logo1.jpg"], ["Logo 2", "bilderverwaltung/uploadverzeichnis/logo2.jpg"] ); Diese Datei muß nun aus dem Upload-Verzeichnis mit folgendem PHP-Skript erstellt werden: Bilderliste mit PHP erzeugen Datei: bilderliste.php [01] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " [02] <html> [03] <head> [04] <meta http-equiv="content-type" content="text/html; charset=iso "> [05] <title>dynamische Bilderliste erzeugen</title> [06] <link href="eigenerstil.css" rel="stylesheet" type="text/css"> [07] </head> [08] <body> [09] <?php [10] # erzeugen der Datei image_list.js [11] # Kopf [12] $text ="// Diese Liste wird von PHP erzeugt [13] // Die Bilder werden in einem Dropdown-Feld angezeigt,wenn 'external_link_image_url' [14] // in TinyMCE.init definiert wurde. [15] [16] var tinymceimagelist = new Array( [17] // Name, URL\n"; [18] [19]/* Dateien eines Verzeichnisses auslesen siehe SELFPHP readdir() 2. Beispiel */ [20] $uploadverzeichnis ='bilderverwaltung/uploadverzeichnis'; [21] $verz = opendir ($uploadverzeichnis ); [22] $bildzaehler = 1; [23] while ( $file = readdir ( $verz ) ) [24] { [25] if ( $file!= '.' && $file!= '..') [26] { [27] # Hier wird zeilenweise der Dateiname in $file ausgegeben [28] # erzeugen einer Zeile für jede Datei z.b: [29] // ["Logo 1", "bilderverwaltung/uploadverzeichnis/logo.jpg"], Seite 22/61 TinyMCE Mag. Erwin Mayer, 2009

23 [30] [31] $text.="[\"bild". $bildzaehler. "\", \"". $uploadverzeichnis."/".$file. "\"],\n"; [32] $bildzaehler +=1; // um 1 erhöhen [33] } [34] } [35] [36] closedir ( $verz ); # schließt das ausgelesene Upload- Verzeichnis [37] $text = substr($text,0,strlen($text)-2); # letzter Beistrich + return entfernen [38] $text.="\n);"; # Ende der image_list.js Datei [39] [40] # Datei image_list.js schreiben [41] $datei = fopen("bilderverwaltung/image_list.js","w"); [42] fwrite($datei, $text); [43] fclose($datei); [44]?> [45] <p><a href="bildupload.php">zurück zum Bilder-Upload</a></p> [46] </body> [47] </html> Einbinden in TinyMCE (bild_einfuegen.php): Datei: bild_einfuegen.php [01] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " [02] <html> [03] <head> [04] <meta http-equiv="content-type" content="text/html; charset=iso "> [05] <title>beispiel Bilderverwaltung</title> [06]  [07] <script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script> [08] <script type="text/javascript"> [09] [10] mode : "textareas", [11] theme : "advanced", [12] language : "de", [13] // advimage für erweiterte Bildeingabe [14] // preview für die Vorschau [15] plugins : "advimage,preview", [16] // Drop-Down-Liste für Bild einfügen/bearbeiten-dialog (dynamisch erzeugt) [17] external_image_list_url : "bilderverwaltung/image_list.js", [18] // CSS-Klassen-Formate (should be your site CSS) [19] content_css : "bilderverwaltung/eigenerstil.css" [20] [21] </script> [22]  [23] <link href="eigenerstil.css" rel="stylesheet" type="text/css"> [24] </head> [25] <body> [26] <h3>bild einfügen aus dynamischer Liste </h3> [27] <form name="form1" method="post" action="verarbeitung.php"> [28] <p><textarea name="inhalt" cols="50" rows="5" class="gruen" id="inhalt">text, der im Editor gezeigt wird</textarea> [29] </p><p><input type="submit" name="submit" value="speichern"> [30] </p> [31] </form> [32] </body> [33] </html> Notwendig sind in Zeile 14 die Einbindung der Plugins advimage (für die erweiterte Bildeingabe) und preview (für die Bildvorschau), weiters ist die Verwendung eines eigenen Stylesheets (Zeile 19)für die Formatierung zu empfehlen. Dadurch ist es möglich den Mag. Erwin Mayer, 2009 TinyMCE Seite 23/61

24 Bildern Klassenformate zuzuweisen, statt einer Direktformatierung (inline-stil), wie sie ansonsten beim Bild einfügen/ersetzen-dialog angeboten werden. Bild einfügen Durch Klick auf den Bild-Button erscheint der Bild einfügen/bearbeiten-dialog: Reiter: Allgemein Durch Klick auf das Drop-Down-Feld Bilderliste erscheint die Adresse(src), Beschreibung (alt)und Titel(title). In der Vorschau erscheint das Bild. Seite 24/61 TinyMCE Mag. Erwin Mayer, 2009

25 Diese Eigenschaften erzeugen eine Direktformatierung Die Originalmaße des Bildes können Sie unter Beibehaltung des Seitenverhälnisses ändern Hier können Sie Klassenformate auswählen, die Sie im Drop-Down-Feld Format/Styles eingebunden haben erzeugte Direktformatierung (inline-stil) Die Wirkung können Sie im Vorschaubild beobachten Reiter: Aussehen Reiter: Erweitert Mit den Eigenschaften des Reiters "Erweitert" können Sie einen Bilderwechsel realisieren u.v.m. Mag. Erwin Mayer, 2009 TinyMCE Seite 25/61

26 Medienliste media_external_list_url : "verzeichnis/media_list.js" // This list may be created by a server logic page PHP/ASP/ASPX/JSP in some backend system. // There flash movies will be displayed as a dropdown in all media dialog if the "media_external_list_url" // option is defined in TinyMCE init. var tinymcemedialist = [ // Name, URL ["Some Flash", "media/sample.swf"], ["Some Quicktime", "media/sample.mov"], ["Some AVI", "media/sample.avi"] ]; Beispiel: Konfiguration nach Benutzer-Gruppen Auf einer Seite sind auch unterschiedliche Konfigurationen gleichzeitig darstellbar. Durch das einfache, im Detail aber sehr feinkörnige Konzept der Konfiguration und Erweiterbarkeit von Tiny-MCE ist ein tiefer Eingriff in den Aufbau der eigenen Seiten auf PHP-Ebene im ersten Schritt nicht notwendig. Da auch die Konfiguration und Initialisierung des Editors nicht im Code liegen muss, sondern extern nachgeladen werden kann, beschränkt sich die Arbeit auf das Generieren der wenigen oben genannten Zeilen zur Einbindung des Scripts und der Konfigurations-Datei. Hier können natürlich in Abhängigkeit vom angemeldeten User oder dem dargestellten Seiten-Inhalte unterschiedliche Konfigurationen zur Verfügung gestellt werden. Ein einfaches PHP-Beispiel verdeutlicht dies: Beipiel aus Manfred Müller Späth, Texteditor de luxe, Tiny MCE in PHP-Projekten <?php $groups = array("redakteure", "User", "[keine]"); // hier eine zufällige Zuweisung zur Benutzergruppe // kann z. B. bei der Anmeldung geschehen $usergroup = $groups[rand(0, 2)]; switch ($usergroup) { case "Redakteure": $currtheme = "advanced"; $currmode = "textareas"; $currnoedit = 0; break; case "User": $currtheme = "simple"; $currmode = "textareas"; $currnoedit = 1; break; default: $currtheme = "simple"; $currmode = "textareas"; $currnoedit = 1; break; }?> [ ] <script language="javascript" type= "text/javascript" src="/scripts/tiny_mce/tiny_mce.js"></script> <script language="javascript" type= "text/javascript"> Seite 26/61 TinyMCE Mag. Erwin Mayer, 2009

27 mode: "<?php echo($currmode)?>", theme: "<?php echo($currtheme)?>", readonly: <?php echo($currnoedit)?> </script> Wenn Sie hier die Usergruppe des angemeldeten Users ermittelt haben (hier einmal mit einem zufällig ausgelesenen Array nach jedem Laden der Seite simuliert), werden die passenden Werte gesetzt und weiter unten im Script-Teil eingetragen, mit dem dann der Editor initialisiert wird. So haben Mitglieder der Gruppe Redakteure einen umfangreichen Editier-Modus, normale User sehen nur den Text, ohne etwas ändern zu können. Wer keiner Gruppe zugehörig ist, sieht nur den einfachen Texteingabebereich. TinyMCE:Control reference enthält eine Liste aller Tasten, die zur Verfügung stehen und ihre Plugin-Anforderungen. Verwenden Sie die theme_advanced_buttons <1-n>,theme_advanced_buttons <1-n> _ADD oder theme_advanced_buttons <1-n> _add_before Optionen, um neue Schaltflächen hinzufügen und um zu deaktivieren, verwenden Sie die theme_advanced_disable Option. Die Standard-Buttons sind beim advanced-thema vorhanden: 1. Standard-Schaltflächen im fortgeschrittenen Thema 2. Plugins mit dem gleichen Button- wie Plugin-Namen 3. Plugins mit benutzerdefinierten Schaltflächen Mag. Erwin Mayer, 2009 TinyMCE Seite 27/61

28 Mit dem TinyMCE mitgelieferte Beispiele Verzeichnis: C:/xampp/htdocs/WEd_TinyMCE/tinymce/examples Dateiliste: full.html index.html menu.html simple.html skins.html translate.html word.html Datei: full.html [01] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " [02] <html xmlns=" [03] <head> [04] <title>full featured example</title> [05] [06]  [07] <script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script> [08] <script type="text/javascript"> [09] [10] // General options [11] mode : "textareas", [12] theme : "advanced", [13] language : "de", [14] plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,in linepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,direc tionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordco unt", [15] [16] // Theme options [17] theme_advanced_buttons1 : "save,newdocument,,bold,italic,underline,strikethrough,,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect", [18] theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,,search,replace,,bullist,numlist,,outdent,in dent,blockquote,,undo,redo,,link,unlink,anchor,image,cleanup,help,code,,insertda te,inserttime,preview,,forecolor,backcolor", [19] theme_advanced_buttons3 : "tablecontrols,,hr,removeformat,visualaid,,sub,sup,,charmap,emotions,iespell,med ia,advhr,,print,,ltr,rtl,,fullscreen", [20] theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,,styleprops,,cite,abbr,acronym,del,ins,attribs,,visualchars,nonbreaking,template,pagebreak", [21] theme_advanced_toolbar_location : "top", [22] theme_advanced_toolbar_align : "left", [23] theme_advanced_statusbar_location : "bottom", [24] theme_advanced_resizing : true, [25] [26] // Example content CSS (should be your site CSS) [27] content_css : "css/content.css", [28] [29] // Drop lists for link/image/media/template dialogs [30] template_external_list_url : "lists/template_list.js", [31] external_link_list_url : "lists/link_list.js", [32] external_image_list_url : "lists/image_list.js", [33] media_external_list_url : "lists/media_list.js", Seite 28/61 TinyMCE Mag. Erwin Mayer, 2009

29 [34] [35] // Replace values for the template plugin [36] template_replace_values : { [37] username : "Some User", [38] staffid : "991234" [39] } [40] [41] </script> [42]  [43] [44] </head> [45] <body> [46] [47] <form method="post" action=" [48] <div> [49] <h3>full featured example</h3> [50] [51] <p> [52] This page shows all available buttons and plugins that are included in the TinyMCE core package. [53] There are more examples on how to use TinyMCE in the <a href=" [54] </p> [55] [56]  [57] <div> [58] <textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%"> [59] <p> [60] This is some example text that you can edit inside the <strong>tinymce editor</strong>. [61] </p> [62] <p> [63] Nam nisi elit, cursus in rhoncus sit amet, pulvinar laoreet leo. Nam sed lectus quam, ut sagittis tellus. Quisque dignissim mauris a augue rutrum tempor. Donec vitae purus nec massa vestibulum ornare sit amet id tellus. Nunc quam mauris, fermentum nec lacinia eget, sollicitudin nec ante. Aliquam molestie volutpat dapibus. Nunc interdum viverra sodales. Morbi laoreet pulvinar gravida. Quisque ut turpis sagittis nunc accumsan vehicula. Duis elementum congue ultrices. Cras faucibus feugiat arcu quis lacinia. In hac habitasse platea dictumst. Pellentesque fermentum magna sit amet tellus varius ullamcorper. Vestibulum at urna augue, eget varius neque. Fusce facilisis venenatis dapibus. Integer non sem at arcu euismod tempor nec sed nisl. Morbi ultricies, mauris ut ultricies adipiscing, felis odio condimentum massa, et luctus est nunc nec eros. [64] </p> [65] </textarea> [66] </div> [67] [68]  [69] <a href="javascript:;" onmousedown="tinymce.get('elm1').show();">[show]</a> [70] <a href="javascript:;" onmousedown="tinymce.get('elm1').hide();">[hide]</a> [71] <a href="javascript:;" onmousedown="tinymce.get('elm1').execcommand('bold');">[bold]</a> [72] <a href="javascript:;" onmousedown="alert(tinymce.get('elm1').getcontent());">[get contents]</a> [73] <a href="javascript:;" onmousedown="alert(tinymce.get('elm1').selection.getcontent());">[get selected HTML]</a> [74] <a href="javascript:;" onmousedown="alert(tinymce.get('elm1').selection.getcontent({format : 'text'}));">[get selected text]</a> [75] <a href="javascript:;" onmousedown="alert(tinymce.get('elm1').selection.getnode().nodename);">[get selected element]</a> [76] <a href="javascript:;" onmousedown="tinymce.execcommand('mceinsertcontent',false,'<b>hello world!!</b>');">[insert HTML]</a> [77] <a href="javascript:;" onmousedown="tinymce.execcommand('mcereplacecontent',false,'<b>{$selection}</b>');" >[Replace selection]</a> Mag. Erwin Mayer, 2009 TinyMCE Seite 29/61

30 [78] [79] <br /> [80] <input type="submit" name="save" value="submit" /> [81] <input type="reset" name="reset" value="reset" /> [82] </div> [83] </form> [84] [85] </body> [86] </html> Datei: index.html [01] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " [02] <html> [03] <head> [04] <title>tinymce examples</title> [05] </head> [06] <frameset cols="180,80%"> [07] <frame src="menu.html" name="menu" /> [08] <frame src="full.html" name="main" /> [09] </frameset> [10] </html> Datei: menu.html [01] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " [02] <html xmlns=" [03] <head> [04] <title>menu</title> [05] <style> [06] a {display:block;} [07] </style> [08] </head> [09] <body> [10] <h3>examples</h3> [11] <a href="full.html" target="main">full featured</a> [12] <a href="simple.html" target="main">simple theme</a> [13] <a href="skins.html" target="main">skin support</a> [14] <a href="word.html" target="main">word processor</a> [15] </body> [16] </html> Datei: simple.html [01] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " [02] <html xmlns=" [03] <head> [04] <title>simple theme example</title> [05] [06]  [07] <script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script> [08] <script type="text/javascript"> [09] [10] mode : "textareas" [11] [12] </script> [13]  [14] [15] </head> [16] <body> [17] [18] <form method="post" action=" [19] <h3>simple theme example</h3> [20] [21] <p> Seite 30/61 TinyMCE Mag. Erwin Mayer, 2009

31 [22] This page shows you the simple theme and it's core functionality you can extend it by changing the code use the advanced theme if you need to configure/add more buttons etc. [23] There are more examples on how to use TinyMCE in the <a href=" [24] </p> [25] [26]  [27] <textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%"> [28] <p> [29] This is some example text that you can edit inside the <strong>tinymce editor</strong>. [30] </p> [31] <p> [32] Nam nisi elit, cursus in rhoncus sit amet, pulvinar laoreet leo. Nam sed lectus quam, ut sagittis tellus. Quisque dignissim mauris a augue rutrum tempor. Donec vitae purus nec massa vestibulum ornare sit amet id tellus. Nunc quam mauris, fermentum nec lacinia eget, sollicitudin nec ante. Aliquam molestie volutpat dapibus. Nunc interdum viverra sodales. Morbi laoreet pulvinar gravida. Quisque ut turpis sagittis nunc accumsan vehicula. Duis elementum congue ultrices. Cras faucibus feugiat arcu quis lacinia. In hac habitasse platea dictumst. Pellentesque fermentum magna sit amet tellus varius ullamcorper. Vestibulum at urna augue, eget varius neque. Fusce facilisis venenatis dapibus. Integer non sem at arcu euismod tempor nec sed nisl. Morbi ultricies, mauris ut ultricies adipiscing, felis odio condimentum massa, et luctus est nunc nec eros. [33] </p> [34] </textarea> [35] [36] <br /> [37] <input type="submit" name="save" value="submit" /> [38] <input type="reset" name="reset" value="reset" /> [39] </form> [40] [41] </body> [42] </html> Datei: skins.html [01] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " [02] <html xmlns=" [03] <head> [04] <title>skin support example</title> [05] [06]  [07] <script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script> [08] <script type="text/javascript"> [09] // Default skin [10] [11] // General options [12] mode : "exact", [13] elements : "elm1", [14] theme : "advanced", [15] plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,in sertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,ful lscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups", [16] [17] // Theme options [18] theme_advanced_buttons1 : "save,newdocument,,bold,italic,underline,strikethrough,,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect", [19] theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,,search,replace,,bullist,numlist,,outdent,in dent,blockquote,,undo,redo,,link,unlink,anchor,image,cleanup,help,code,,insertda te,inserttime,preview,,forecolor,backcolor", [20] theme_advanced_buttons3 : "tablecontrols,,hr,removeformat,visualaid,,sub,sup,,charmap,emotions,iespell,med ia,advhr,,print,,ltr,rtl,,fullscreen", Mag. Erwin Mayer, 2009 TinyMCE Seite 31/61

32 [21] theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,,styleprops,,cite,abbr,acronym,del,ins,attribs,,visualchars,nonbreaking,template,pagebreak", [22] theme_advanced_toolbar_location : "top", [23] theme_advanced_toolbar_align : "left", [24] theme_advanced_statusbar_location : "bottom", [25] theme_advanced_resizing : true, [26] [27] // Example content CSS (should be your site CSS) [28] content_css : "css/content.css", [29] [30] // Drop lists for link/image/media/template dialogs [31] template_external_list_url : "lists/template_list.js", [32] external_link_list_url : "lists/link_list.js", [33] external_image_list_url : "lists/image_list.js", [34] media_external_list_url : "lists/media_list.js", [35] [36] // Replace values for the template plugin [37] template_replace_values : { [38] username : "Some User", [39] staffid : "991234" [40] } [41] [42] [43] // O2k7 skin [44] [45] // General options [46] mode : "exact", [47] elements : "elm2", [48] theme : "advanced", [49] skin : "o2k7", [50] plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,in sertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,ful lscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups", [51] [52] // Theme options [53] theme_advanced_buttons1 : "save,newdocument,,bold,italic,underline,strikethrough,,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect", [54] theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,,search,replace,,bullist,numlist,,outdent,in dent,blockquote,,undo,redo,,link,unlink,anchor,image,cleanup,help,code,,insertda te,inserttime,preview,,forecolor,backcolor", [55] theme_advanced_buttons3 : "tablecontrols,,hr,removeformat,visualaid,,sub,sup,,charmap,emotions,iespell,med ia,advhr,,print,,ltr,rtl,,fullscreen", [56] theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,,styleprops,,cite,abbr,acronym,del,ins,attribs,,visualchars,nonbreaking,template,pagebreak", [57] theme_advanced_toolbar_location : "top", [58] theme_advanced_toolbar_align : "left", [59] theme_advanced_statusbar_location : "bottom", [60] theme_advanced_resizing : true, [61] [62] // Example content CSS (should be your site CSS) [63] content_css : "css/content.css", [64] [65] // Drop lists for link/image/media/template dialogs [66] template_external_list_url : "lists/template_list.js", [67] external_link_list_url : "lists/link_list.js", [68] external_image_list_url : "lists/image_list.js", [69] media_external_list_url : "lists/media_list.js", [70] [71] // Replace values for the template plugin [72] template_replace_values : { [73] username : "Some User", [74] staffid : "991234" [75] } [76] [77] Seite 32/61 TinyMCE Mag. Erwin Mayer, 2009

33 [78] // O2k7 skin (silver) [79] [80] // General options [81] mode : "exact", [82] elements : "elm3", [83] theme : "advanced", [84] skin : "o2k7", [85] skin_variant : "silver", [86] plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,in sertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,ful lscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups", [87] [88] // Theme options [89] theme_advanced_buttons1 : "save,newdocument,,bold,italic,underline,strikethrough,,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect", [90] theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,,search,replace,,bullist,numlist,,outdent,in dent,blockquote,,undo,redo,,link,unlink,anchor,image,cleanup,help,code,,insertda te,inserttime,preview,,forecolor,backcolor", [91] theme_advanced_buttons3 : "tablecontrols,,hr,removeformat,visualaid,,sub,sup,,charmap,emotions,iespell,med ia,advhr,,print,,ltr,rtl,,fullscreen", [92] theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,,styleprops,,cite,abbr,acronym,del,ins,attribs,,visualchars,nonbreaking,template,pagebreak", [93] theme_advanced_toolbar_location : "top", [94] theme_advanced_toolbar_align : "left", [95] theme_advanced_statusbar_location : "bottom", [96] theme_advanced_resizing : true, [97] [98] // Example content CSS (should be your site CSS) [99] content_css : "css/content.css", [100] [101] // Drop lists for link/image/media/template dialogs [102] template_external_list_url : "lists/template_list.js", [103] external_link_list_url : "lists/link_list.js", [104] external_image_list_url : "lists/image_list.js", [105] media_external_list_url : "lists/media_list.js", [106] [107] // Replace values for the template plugin [108] template_replace_values : { [109] username : "Some User", [110] staffid : "991234" [111] } [112] [113] [114] // O2k7 skin (silver) [115] [116] // General options [117] mode : "exact", [118] elements : "elm4", [119] theme : "advanced", [120] skin : "o2k7", [121] skin_variant : "black", [122] plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,in sertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,ful lscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups", [123] [124] // Theme options [125] theme_advanced_buttons1 : "save,newdocument,,bold,italic,underline,strikethrough,,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect", [126] theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,,search,replace,,bullist,numlist,,outdent,in dent,blockquote,,undo,redo,,link,unlink,anchor,image,cleanup,help,code,,insertda te,inserttime,preview,,forecolor,backcolor", Mag. Erwin Mayer, 2009 TinyMCE Seite 33/61

34 [127] theme_advanced_buttons3 : "tablecontrols,,hr,removeformat,visualaid,,sub,sup,,charmap,emotions,iespell,med ia,advhr,,print,,ltr,rtl,,fullscreen", [128] theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,,styleprops,,cite,abbr,acronym,del,ins,attribs,,visualchars,nonbreaking,template,pagebreak", [129] theme_advanced_toolbar_location : "top", [130] theme_advanced_toolbar_align : "left", [131] theme_advanced_statusbar_location : "bottom", [132] theme_advanced_resizing : true, [133] [134] // Example content CSS (should be your site CSS) [135] content_css : "css/content.css", [136] [137] // Drop lists for link/image/media/template dialogs [138] template_external_list_url : "lists/template_list.js", [139] external_link_list_url : "lists/link_list.js", [140] external_image_list_url : "lists/image_list.js", [141] media_external_list_url : "lists/media_list.js", [142] [143] // Replace values for the template plugin [144] template_replace_values : { [145] username : "Some User", [146] staffid : "991234" [147] } [148] [149] </script> [150]  [151] [152] </head> [153] <body> [154] [155] <form method="post" action=" [156] <h3>skin support example</h3> [157] [158] <p> [159] This page displays the two skins that TinyMCE comes with. You can make your own by creating a CSS file in themes/advanced/skins/<yout skin>/ui.css [160] There are more examples on how to use TinyMCE in the <a href=" [161] </p> [162] [163]  [164] <textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%"> [165] <p> [166] This is some example text that you can edit inside the <strong>tinymce editor</strong>. [167] </p> [168] <p> [169] Nam nisi elit, cursus in rhoncus sit amet, pulvinar laoreet leo. Nam sed lectus quam, ut sagittis tellus. Quisque dignissim mauris a augue rutrum tempor. Donec vitae purus nec massa vestibulum ornare sit amet id tellus. Nunc quam mauris, fermentum nec lacinia eget, sollicitudin nec ante. Aliquam molestie volutpat dapibus. Nunc interdum viverra sodales. Morbi laoreet pulvinar gravida. Quisque ut turpis sagittis nunc accumsan vehicula. Duis elementum congue ultrices. Cras faucibus feugiat arcu quis lacinia. In hac habitasse platea dictumst. Pellentesque fermentum magna sit amet tellus varius ullamcorper. Vestibulum at urna augue, eget varius neque. Fusce facilisis venenatis dapibus. Integer non sem at arcu euismod tempor nec sed nisl. Morbi ultricies, mauris ut ultricies adipiscing, felis odio condimentum massa, et luctus est nunc nec eros. [170] </p> [171] </textarea> [172] [173] <br /> [174] [175] <textarea id="elm2" name="elm2" rows="15" cols="80" style="width: 80%"> [176] <p> [177] This is some example text that you can edit inside the <strong>tinymce editor</strong>. Seite 34/61 TinyMCE Mag. Erwin Mayer, 2009

35 [178] </p> [179] <p> [180] Nam nisi elit, cursus in rhoncus sit amet, pulvinar laoreet leo. Nam sed lectus quam, ut sagittis tellus. Quisque dignissim mauris a augue rutrum tempor. Donec vitae purus nec massa vestibulum ornare sit amet id tellus. Nunc quam mauris, fermentum nec lacinia eget, sollicitudin nec ante. Aliquam molestie volutpat dapibus. Nunc interdum viverra sodales. Morbi laoreet pulvinar gravida. Quisque ut turpis sagittis nunc accumsan vehicula. Duis elementum congue ultrices. Cras faucibus feugiat arcu quis lacinia. In hac habitasse platea dictumst. Pellentesque fermentum magna sit amet tellus varius ullamcorper. Vestibulum at urna augue, eget varius neque. Fusce facilisis venenatis dapibus. Integer non sem at arcu euismod tempor nec sed nisl. Morbi ultricies, mauris ut ultricies adipiscing, felis odio condimentum massa, et luctus est nunc nec eros. [181] </p> [182] </textarea> [183] [184] <br /> [185] [186] <textarea id="elm3" name="elm3" rows="15" cols="80" style="width: 80%"> [187] <p> [188] This is some example text that you can edit inside the <strong>tinymce editor</strong>. [189] </p> [190] <p> [191] Nam nisi elit, cursus in rhoncus sit amet, pulvinar laoreet leo. Nam sed lectus quam, ut sagittis tellus. Quisque dignissim mauris a augue rutrum tempor. Donec vitae purus nec massa vestibulum ornare sit amet id tellus. Nunc quam mauris, fermentum nec lacinia eget, sollicitudin nec ante. Aliquam molestie volutpat dapibus. Nunc interdum viverra sodales. Morbi laoreet pulvinar gravida. Quisque ut turpis sagittis nunc accumsan vehicula. Duis elementum congue ultrices. Cras faucibus feugiat arcu quis lacinia. In hac habitasse platea dictumst. Pellentesque fermentum magna sit amet tellus varius ullamcorper. Vestibulum at urna augue, eget varius neque. Fusce facilisis venenatis dapibus. Integer non sem at arcu euismod tempor nec sed nisl. Morbi ultricies, mauris ut ultricies adipiscing, felis odio condimentum massa, et luctus est nunc nec eros. [192] </p> [193] </textarea> [194] [195] <br /> [196] [197] <textarea id="elm4" name="elm4" rows="15" cols="80" style="width: 80%"> [198] <p> [199] This is some example text that you can edit inside the <strong>tinymce editor</strong>. [200] </p> [201] <p> [202] Nam nisi elit, cursus in rhoncus sit amet, pulvinar laoreet leo. Nam sed lectus quam, ut sagittis tellus. Quisque dignissim mauris a augue rutrum tempor. Donec vitae purus nec massa vestibulum ornare sit amet id tellus. Nunc quam mauris, fermentum nec lacinia eget, sollicitudin nec ante. Aliquam molestie volutpat dapibus. Nunc interdum viverra sodales. Morbi laoreet pulvinar gravida. Quisque ut turpis sagittis nunc accumsan vehicula. Duis elementum congue ultrices. Cras faucibus feugiat arcu quis lacinia. In hac habitasse platea dictumst. Pellentesque fermentum magna sit amet tellus varius ullamcorper. Vestibulum at urna augue, eget varius neque. Fusce facilisis venenatis dapibus. Integer non sem at arcu euismod tempor nec sed nisl. Morbi ultricies, mauris ut ultricies adipiscing, felis odio condimentum massa, et luctus est nunc nec eros. [203] </p> [204] </textarea> [205] [206] <br /> [207] <input type="submit" name="save" value="submit" /> [208] <input type="reset" name="reset" value="reset" /> [209] </form> [210] [211] </body> [212] </html> Mag. Erwin Mayer, 2009 TinyMCE Seite 35/61

36 Datei: translate.html [01] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " [02] <html xmlns=" [03] <head> [04] <title>full featured example</title> [05] <style> [06] body {font-family:arial,verdana; font-size: 12px;} [07] </style> [08] [09]  [10] <script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce_dev.js"></script> [11] <script type="text/javascript"> [12] [13] // General options [14] mode : "textareas", [15] theme : "advanced", [16] plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,in linepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,direc tionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template", [17] [18] // Theme options [19] theme_advanced_buttons1 : "save,newdocument,,bold,italic,underline,strikethrough,,justifyleft,justifycenter,justifyright,justifyfull,,styleselect,formatselect,fontselect,fontsizeselect", [20] theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,,search,replace,,bullist,numlist,,outdent,in dent,blockquote,,undo,redo,,link,unlink,anchor,image,cleanup,help,code,,insertda te,inserttime,preview,,forecolor,backcolor", [21] theme_advanced_buttons3 : "tablecontrols,,hr,removeformat,visualaid,,sub,sup,,charmap,emotions,iespell,med ia,advhr,,print,,ltr,rtl,,fullscreen", [22] theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,,styleprops,,cite,abbr,acronym,del,ins,attribs,,visualchars,nonbreaking,template,pagebreak", [23] theme_advanced_toolbar_location : "top", [24] theme_advanced_toolbar_align : "left", [25] theme_advanced_path_location : "bottom", [26] theme_advanced_resizing : true, [27] [28] // Example content CSS (should be your site CSS) [29] content_css : "css/content.css", [30] [31] // Drop lists for link/image/media/template dialogs [32] template_external_list_url : "lists/template_list.js", [33] external_link_list_url : "lists/link_list.js", [34] external_image_list_url : "lists/image_list.js", [35] media_external_list_url : "lists/media_list.js", [36] [37] // Replace values for the template plugin [38] template_replace_values : { [39] username : "Some User", [40] staffid : "991234" [41] }, [42] [43] // Enable translation mode [44] translate_mode : true, [45] language : "en" [46] [47] </script> [48]  [49] [50] </head> [51] <body> [52] [53] <form method="post" action=" [54] <h3>translation</h3> Seite 36/61 TinyMCE Mag. Erwin Mayer, 2009

37 [55] [56] <p>this page enables you to translate TinyMCE by using XML files.</p> [57] <p>steps to translate:</p> [58] <ol> [59] <li>download one of the language XML files from the TinyMCE site.</li> [60] <li>place it in /jscripts/tiny_mce/langs directory, for example /jscripts/tiny_mce/langs/sv.xml.</li> [61] <li>change the language init option in this file to match the XML file code. For example: sv</li> [62] <li>tinymce will now use the XML file instead of the.js versions.</li> [63] <li>modify the XML file until everything is translated</li> [64] <li>modify the author information, this is optional.</li> [65] <li>upload the XML file to the TinyMCE site to share it with others.</li> [66] <li>you can now download the.js versions of the language pack from the TinyMCE site.</li> [67] </ol> [68] [69] <textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%"> [70] <p> [71] This is some example text that you can edit inside the <strong>tinymce editor</strong>. [72] </p> [73] <p> [74] Nam nisi elit, cursus in rhoncus sit amet, pulvinar laoreet leo. Nam sed lectus quam, ut sagittis tellus. Quisque dignissim mauris a augue rutrum tempor. Donec vitae purus nec massa vestibulum ornare sit amet id tellus. Nunc quam mauris, fermentum nec lacinia eget, sollicitudin nec ante. Aliquam molestie volutpat dapibus. Nunc interdum viverra sodales. Morbi laoreet pulvinar gravida. Quisque ut turpis sagittis nunc accumsan vehicula. Duis elementum congue ultrices. Cras faucibus feugiat arcu quis lacinia. In hac habitasse platea dictumst. Pellentesque fermentum magna sit amet tellus varius ullamcorper. Vestibulum at urna augue, eget varius neque. Fusce facilisis venenatis dapibus. Integer non sem at arcu euismod tempor nec sed nisl. Morbi ultricies, mauris ut ultricies adipiscing, felis odio condimentum massa, et luctus est nunc nec eros. [75] </p> [76] </textarea> [77] </form> [78] [79] </body> [80] </html> Datei: word.html [01] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " [02] <html xmlns=" [03] <head> [04] <title>word processor example</title> [05] [06]  [07] <script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script> [08] <script type="text/javascript"> [09] [10] // General options [11] mode : "textareas", [12] theme : "advanced", [13] language : "de", [14] [15] plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,in sertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,ful lscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups", [16] [17] // Theme options [18] theme_advanced_buttons1 : "save,newdocument,,bold,italic,underline,strikethrough,,justifyleft,justifycenter,justifyright,justifyfull,,styleselect,formatselect,fontselect,fontsizeselect", [19] theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,,search,replace,,bullist,numlist,,outdent,in Mag. Erwin Mayer, 2009 TinyMCE Seite 37/61

38 dent,blockquote,,undo,redo,,link,unlink,anchor,image,cleanup,help,code,,insertda te,inserttime,preview,,forecolor,backcolor", [20] theme_advanced_buttons3 : "tablecontrols,,hr,removeformat,visualaid,,sub,sup,,charmap,emotions,iespell,med ia,advhr,,print,,ltr,rtl,,fullscreen", [21] theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,,styleprops,,cite,abbr,acronym,del,ins,attribs,,visualchars,nonbreaking,template,pagebreak", [22] theme_advanced_toolbar_location : "top", [23] theme_advanced_toolbar_align : "left", [24] theme_advanced_statusbar_location : "bottom", [25] theme_advanced_resizing : true, [26] [27] // Example word content CSS (should be your site CSS) this one removes paragraph margins [28] content_css : "css/word.css", [29] [30] // Drop lists for link/image/media/template dialogs [31] template_external_list_url : "lists/template_list.js", [32] external_link_list_url : "lists/link_list.js", [33] external_image_list_url : "lists/image_list.js", [34] media_external_list_url : "lists/media_list.js", [35] [36] // Replace values for the template plugin [37] template_replace_values : { [38] username : "Some User", [39] staffid : "991234" [40] } [41] [42] </script> [43]  [44] [45] </head> [46] <body> [47] [48] <form method="post" action=" [49] <h3>word processor example</h3> [50] [51] <p> [52] This page shows you how to configure TinyMCE to work more like common word processors. [53] There are more examples on how to use TinyMCE in the <a href=" [54] </p> [55] [56]  [57] <textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%"> [58] <p>this is the first paragraph.</p> [59] <p>this is the second paragraph.</p> [60] <p>this is the third paragraph.</p> [61] </textarea> [62] [63] <br /> [64] <input type="submit" name="save" value="submit" /> [65] <input type="reset" name="reset" value="reset" /> [66] </form> [67] [68] </body> [69] </html> Seite 38/61 TinyMCE Mag. Erwin Mayer, 2009

39 Verzeichnis: C:/xampp/htdocs/WEd_TinyMCE/tinymce/examples/lists Dateiliste: image_list.js link_list.js media_list.js template_list.js Datei: image_list.js [01] // This list may be created by a server logic page PHP/ASP/ASPX/JSP in some backend system. [02] // There images will be displayed as a dropdown in all image dialogs if the "external_link_image_url" [03] // option is defined in TinyMCE init. [04] [05] var tinymceimagelist = new Array( [06] // Name, URL [07] ["Logo 1", "media/logo.jpg"], [08] ["Logo 2 Over", "media/logo_over.jpg"] [09] ); Datei: link_list.js [01] // This list may be created by a server logic page PHP/ASP/ASPX/JSP in some backend system. [02] // There links will be displayed as a dropdown in all link dialogs if the "external_link_list_url" [03] // option is defined in TinyMCE init. [04] [05] var tinymcelinklist = new Array( [06] // Name, URL [07] ["Moxiecode", " [08] ["Freshmeat", " [09] ["Sourceforge", " [10] ); Datei: media_list.js [01] // This list may be created by a server logic page PHP/ASP/ASPX/JSP in some backend system. [02] // There flash movies will be displayed as a dropdown in all media dialog if the "media_external_list_url" [03] // option is defined in TinyMCE init. [04] [05] var tinymcemedialist = [ [06] // Name, URL [07] ["Some Flash", "media/sample.swf"], [08] ["Some Quicktime", "media/sample.mov"], [09] ["Some AVI", "media/sample.avi"] [10] ]; Datei: template_list.js [01] // This list may be created by a server logic page PHP/ASP/ASPX/JSP in some backend system. [02] // There templates will be displayed as a dropdown in all media dialog if the "template_external_list_url" [03] // option is defined in TinyMCE init. [04] [05] var tinymcetemplatelist = [ [06] // Name, URL, Description [07] ["Simple snippet", "templates/snippet1.htm", "Simple HTML snippet."], [08] ["Layout", "templates/layout1.htm", "HTML Layout."] [09] ]; Mag. Erwin Mayer, 2009 TinyMCE Seite 39/61

40 Weitere Beispiele von Hier sind weitere Beispiele die die Möglichkeiten des TinyMCE zeigen: Example 01 - Toggle editor with JavaScript Example 02 - Valid elements Example 03 - Class selectors/deselectors Example 04 - Multiple configs/inits Example 05 - Custom cleanup Example 06 - Ajax load/save Example 07 - Read only mode Example 08 - URL conversion Example 09 - BBCode Example 10 - Noneditable content Example 11 - Fullpage example Example 12 - Load on demand Example 13 - Load on demand using compressor Example 14 - Setup editor events Example 15 - External toolbar Example 16 - Custom listbox/splitbutton Example 17 - Accessibility Example 18 - Menu button Example 19 - Tab focus Example 20 - Custom toolbar button Example 21 - Post to self Example 22 - jquery version Example 23 - jquery plugin Seite 40/61 TinyMCE Mag. Erwin Mayer, 2009

41 EX01 Toggle editor with JavaScript Dieses Beispiel zeigt, wie der Editor ein- und ausgeschaltet warden kann. Klicken Sie auf Add bzw. Remove Editor. Example 01 - Toggle editor with JavaScript <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> mode : "textareas", theme : "advanced" function toggleeditor(id) { if (!tinymce.get(id)) tinymce.execcommand('mceaddcontrol', false, id); else tinymce.execcommand('mceremovecontrol', false, id); } </script> <form method="post" action="somepage"> <textarea name="content" style="width:100%"> </textarea> </form> <a href="javascript:toggleeditor('content');">add/remove editor</a> EX02 Valid elements Zeigt den Einsatz von gültigen Elementen (extended_valid_elements). Siehe auch invalid_elements welche mit Cleanup messy code Quellcode aufräumen entfernt werden können. Example 02 - Valid elements <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> mode : "textareas", theme : "simple", extended_valid_elements : "img[class=myclass!src border:0 alt title width height]", invalid_elements : "strong,b,em,i" </script> <form method="post" action="somepage"> <textarea id="content" name="content" cols="85" rows="10"></textarea> </form> Mag. Erwin Mayer, 2009 TinyMCE Seite 41/61

42 EX03 Class selectors/deselectors Dieses Beispiel zeigt die Konfigurationsoptionen editor_selector und editor_deselector, mit denen man über Klassenformate den Textfeldern bestimmte Editormöglichkeiten oder auch keine zuweisen kann. Example 03 - Class selectors/deselectors <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> mode : "textareas", theme : "simple", editor_selector : "mceeditor", editor_deselector : "mcenoeditor" </script> <form method="post" action="somepage"> <textarea id="content1" name="content1" class="mceeditor" cols="85" rows="10">this will be a editor, since it has a selector class.</textarea> <textarea id="content2" name="content2" class="mceeditor" cols="85" rows="10">this will be a editor, since it has a selector class.</textarea> <textarea id="content3" name="content3" class="mcenoeditor" cols="85" rows="10">this is not a editor since it has a deselector class.</textarea> </form> EX04 multiple configs/inits Dieses Beispiel zeigt auch die Konfigurationsoption editor_selector mit der man über Klassenformate den Textfeldern bestimmte Editormöglichkeiten zuweisen kann. Hier werden zwei verschiedene Konfigurationen (einfach und erweitert) verwendet. Example 04 - Multiple configs/inits <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> mode : "textareas", theme : "simple", editor_selector : "mcesimple" Seite 42/61 TinyMCE Mag. Erwin Mayer, 2009

43 mode : "textareas", theme : "advanced", editor_selector : "mceadvanced" </script> <form method="post" action="somepage"> <textarea name="content1" class="mcesimple" style="width:100%"> </textarea> <textarea name="content2" class="mceadvanced" style="width:100%"> </textarea> </form> EX05 Custom cleanup zeigt die Möglichkeiten des benutzerdefinierten Cleanup messy code Quellcode aufräumen. Example 05 - Custom cleanup <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> mode : "textareas", theme : "advanced", setup : function(ed) { // Gets executed before DOM to HTML string serialization ed.onpreprocess.add(function(ed, o) { // State get is set when contents is extracted from editor if (o.get) { // Add span element to each strong/b element tinymce.each(ed.dom.select('strong,b', o.node), function(n) { n.appendchild(ed.dom.create('span', {style : 'border: 1px solid green'}, 'Content.')); } } </script> // Gets executed after DOM to HTML string serialization ed.onpostprocess.add(function(ed, o) { // State get is set when contents is extracted from editor if (o.get) { // Replace all strong/b elements with em elements o.content = o.content.replace(/<(strong b)([^>]*)>/g, ''); o.content = o.content.replace(/<\/(strong b)>/g, ''); } <form method="post" action="somepage"> <textarea name="content" style="width:100%"> </textarea> </form> Mag. Erwin Mayer, 2009 TinyMCE Seite 43/61

44 EX06 Ajax load/save demonstriert den Einsatz von Ajax beim TinyMCE. Siehe Schaltfläche: Load/Save Example 06 - Ajax load/save <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> mode : "textareas", theme : "advanced" function ajaxload() { var ed = tinymce.get('content'); } // Do you ajax call here, window.settimeout fakes ajax call ed.setprogressstate(1); // Show progress window.settimeout(function() { ed.setprogressstate(0); // Hide progress ed.setcontent('html content that got passed from server.'); }, 3000); function ajaxsave() { var ed = tinymce.get('content'); // Do you ajax call here, window.settimeout fakes ajax call ed.setprogressstate(1); // Show progress window.settimeout(function() { ed.setprogressstate(0); // Hide progress alert(ed.getcontent()); }, 3000); } </script> <form method="post" action="somepage"> <textarea name="content" style="width:100%"> </textarea> </form> EX07 Read only mode Dieses Beispiel zeigt Ihnen, wie Sie ein Textfeld mit ader Option readonly nur zeigen können (ohne Änderungsmöglichkeit). Siehe auch Beispiel 10 (Nicht editierbarer Bereich) Example 07 - Read only mode <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> mode : "textareas", theme : "advanced", readonly : true </script> <form method="post" action="somepage"> <textarea name="content" style="width:100%"> </textarea> </form> Seite 44/61 TinyMCE Mag. Erwin Mayer, 2009

45 EX08 Url conversion Dieses Beipiel zeigt, wie Sie mit unterschiedlichen Setup-Optionen von TinyMCE die entsprechenden URLs für Bilder und Links erzeugen können.siehe danach auch mehr über die Kofigurationsoptionen aus den FAQs. Example 08 - URL conversion <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> mode : "exact", elements : 'absurls', theme : "advanced", plugins : 'advlink,advimage', relative_urls : false mode : "exact", elements : 'abshosturls', theme : "advanced", plugins : 'advlink,advimage', relative_urls : false, remove_script_host : false mode : "exact", elements : 'relurls', theme : "advanced", plugins : 'advlink,advimage', relative_urls : true // Default value mode : "exact", elements : 'relurlstopage', theme : "advanced", plugins : 'advlink,advimage', relative_urls : true, // Default value document_base_url : ' mode : "exact", elements : 'nourlconvert', theme : "advanced", plugins : 'advlink,advimage', convert_urls : false </script> <form method="post" action="somepage"> <h2>tinymce with absolute URLs on links and images</h2> <textarea id="absurls" name="absurls" cols="85" rows="10"></textarea> <h2>tinymce with absolute URLs and including domain on links and images</h2> <textarea id="abshosturls" name="abshosturls" cols="85" rows="10"></textarea> <h2>tinymce with relative URLs on links and images</h2> <textarea id="relurls" name="relurls" cols="85" rows="10"></textarea> <h2>tinymce with relative URLs on links and images to a specific page</h2> <textarea id="relurlstopage" name="relurlstopage" cols="85" rows="10"></textarea> <h2>tinymce with no url convertion</h2> Mag. Erwin Mayer, 2009 TinyMCE Seite 45/61

46 <textarea id="nourlconvert" name="nourlconvert" cols="85" rows="10"></textarea> </form> Output-Quellcode aus den POST-Variablen Element absurls abshosturls relurls relurlstopage nourlconvert HTML <p>some relative urls: <a href="/examples/example_08.php">content</a>. <img src="/examples/img/logo.jpg" alt="" /></p> <p>some absolute urls: <a href="/examples/example_08.php">content</a>. <img src="/examples/img/logo.jpg" alt="" /></p> <p>some relative urls: <a href=" /a>. <img src=" alt="" /></p> <p>some absolute urls: <a href=" /a>. <img src=" alt="" /></p> <p>some relative urls: <a href="example_08.php">content</a>. <img src="img/logo.jpg" alt="" /></p> <p>some absolute urls: <a href="example_08.php">content</a>. <img src="img/logo.jpg" alt="" /></p> <p>some relative urls: <a href="examples/example_08.php">content</a>. <img src="examples/img/logo.jpg" alt="" /></p> <p>some absolute urls: <a href="examples/example_08.php">content</a>. <img src="examples/img/logo.jpg" alt="" /></p> <p>some relative urls: <a href="example_08.php">content</a>. <img src="img/logo.jpg" alt="" />.</p> <p>some absolute urls: <a href=" /a>. <img src=" alt="" /></p> FAQ dazu Pfade / URLs sind falsch, ich will absolute / relative URLs? Hier sind die verschiedenen Szenarien für die Konfiguration von TinyMCE (bei der URL- Konvertierung). Es gibt auch eine Beispielseite, die diese verschiedenen Optionen veranschaulicht. 1. Relative URLs Dadurch werden alle URLs innerhalb derselben Domain zu relativen URLs konvertiert. Die URLs werden relativ zu document_base_url. relative_urls: true, document_base_url: " Beispiel: >> path2/file.htm 2. Absolute URLs Dadurch werden alle relativen URLs zu absoluten URLs konvertiert. Die URLs werden auf der Grundlage der absoluten document_base_url konvertiert. relative_urls: false, remove_script_host: true, document_base_url: " Seite 46/61 TinyMCE Mag. Erwin Mayer, 2009

47 Beispiel: path2/file.htm>> / path1/path2/file.htm 3. Domain Absolute URLs Dadurch werden alle relativen URLs zu absoluten URLs konvertiert. Die URLs werden auf der Grundlage der absoluten document_base_url mit Domain. konvertiert relative_urls: false, remove_script_host: false, document_base_url: " Beispiel: path2/file.htm>> 4. Keine URL Conversion Diese Option wird die URLs erhalten, wie sie in einem separaten Attribut sind während der Bearbeitung, da Browser die automatische Konvertierung URLs neigen. convert_urls: false Beispiel: path2/file.htm oder wird überhaupt nicht umgesetzt. Hinweis: Einige Versionen des Internet Explorer können weiterhin auch mit URLs convert_urls auf false gesetzt zu konvertieren. Verwenden Sie die Option valid_elements Initialisierung und ohne die ein (Anker) tag. Sie sehen unter mehr zu diesem Thema. EX09 BBCode Dieses Beispiel zeigt, wie man den TinyMCE zum Erzeugen von BBCode verwenden kann. BBCode (von engl. Bulletin Board Code) ist eine sehr eng an HTML angelehnte vereinfachte Auszeichnungssprache, die vor allem für die Erstellung von Beiträgen in Webforen (engl. Bulletin Boards) verwendet wird. Siehe auch: BBCode in wiki. Example 09 - BBCode <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> theme : "advanced", mode : "none", plugins : "bbcode", theme_advanced_buttons1 : "bold,italic,underline,undo,redo,link,unlink,image,forecolor,styleselect,removeform at,cleanup,code", theme_advanced_buttons2 : "", theme_advanced_buttons3 : "", theme_advanced_toolbar_location : "bottom", theme_advanced_toolbar_align : "center", theme_advanced_styles : "Code=codeStyle;Quote=quoteStyle", content_css : "css/bbcode.css", entity_encoding : "raw", add_unload_trigger : false, remove_linebreaks : false, inline_styles : false, convert_fonts_to_spans : false Mag. Erwin Mayer, 2009 TinyMCE Seite 47/61

48 </script> <form method="post" action="somepage"> <textarea name="content" style="width:100%"> </textarea> <a href="#" onclick="tinymce.execcommand('mcetoggleeditor',false,'content');">[toggle WYSIWYG]</a> </form> EX10 Noneditable content example Dieses Beispiel zeigt, wie Sie Bereiche innerhalb des Editors von der Bearbeitung ausschließen können. Dies wird mit dem Plugin noneditable und einigen Klassen erreicht. Example 10 - Noneditable content <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> theme : "advanced", mode : "textareas", plugins : "noneditable" </script> <form method="post" action="somepage"> <textarea name="content" style="width:100%"> <p>editable content.</p> <p class="mcenoneditable">non editable content, can't be modified in IE or FF.</p> <p>editable content.</p> <p class="mcenoneditable">non editable content, can't be modified in IE or FF.</p> </textarea> </form> Seite 48/61 TinyMCE Mag. Erwin Mayer, 2009

49 EX11 Fullpage example Normalerweise warden durch TinyMCE nur Code-Teile erzeugt. Mit diesem Plugin können Sie ganze HTML-Seiten erstellen und auch deren Seiten- Eigenschaften (Document Properties Dokumenteigenschaften) bestimmen. Example 11 - Fullpage example <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> theme : "advanced", mode : "textareas", plugins : "fullpage", theme_advanced_buttons3_add : "fullpage" </script> <form method="post" action="somepage"> <textarea name="content" style="width:100%"> </textarea> </form> Mag. Erwin Mayer, 2009 TinyMCE Seite 49/61

50 EX12 Load on demand Durch die Möglichkeit den Editor TinyMCE erst nachzuladen, wenn man ihnbraucht soll das Download-Volumen und damit die Ladezeit verringert werden. Zur Verrin gerung der Ladezeit wird aber der Kompressor (siehe nächstes Beispiel) empfohlen. [Load Tiny MCE] Example 12 - Load on demand <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> function setup() { mode : "textareas", theme : "advanced", plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,in sertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,ful lscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template", theme_advanced_buttons1 : "save,newdocument,,bold,italic,underline,strikethrough,,justifyleft,justifycenter,justifyright,justifyfull,,styleselect,formatselect,fontselect,fontsizeselect", theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,,search,replace,,bullist,numlist,,outdent,in dent,blockquote,,undo,redo,,link,unlink,anchor,image,cleanup,help,code,,insertda te,inserttime,preview,,forecolor,backcolor", theme_advanced_buttons3 : "tablecontrols,,hr,removeformat,visualaid,,sub,sup,,charmap,emotions,iespell,med ia,advhr,,print,,ltr,rtl,,fullscreen", theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,,styleprops,,cite,abbr,acronym,del,ins,attribs,,visualchars,nonbreaking,template,pagebreak", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true } </script> <form method="post" action="somepage"> <textarea name="content" style="width:100%"> </textarea> <a href="javascript:setup();">load TinyMCE</a> </form> EX13 Load on demand using compressor Den Kompressor bekommen Sie auf der Download-Seite. Example 13 - Load on demand using compressor <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce_gzip.js"></script> <script type="text/javascript"> function setup() { tinymce_gz.init({ themes : "advanced", plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,in sertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,ful lscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template", languages : "en", disk_cache : true }, function() { Seite 50/61 TinyMCE Mag. Erwin Mayer, 2009

51 mode : "textareas", theme : "advanced", plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,in sertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,ful lscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template", theme_advanced_buttons1 : "save,newdocument,,bold,italic,underline,strikethrough,,justifyleft,justifycenter,justifyright,justifyfull,,styleselect,formatselect,fontselect,fontsizeselect", theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,,search,replace,,bullist,numlist,,outdent,in dent,blockquote,,undo,redo,,link,unlink,anchor,image,cleanup,help,code,,insertda te,inserttime,preview,,forecolor,backcolor", theme_advanced_buttons3 : "tablecontrols,,hr,removeformat,visualaid,,sub,sup,,charmap,emotions,iespell,med ia,advhr,,print,,ltr,rtl,,fullscreen", theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,,styleprops,,cite,abbr,acronym,del,ins,attribs,,visualchars,nonbreaking,template,pagebreak", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true } </script> <form method="post" action="somepage"> <textarea name="content" style="width:100%"> </textarea> <a href="javascript:setup();">load TinyMCE</a> </form> EX14 Setup editor events In diesem Beispiel wird eine benutzerdefinierte Schaltfläche eingefügt. Beim onclick- Ereignis auf das Textfeld wird eine Warnmeldung angezeigt und beim Klick auf die Schaltfäche wird der Text "HelloWorld!" auf der Seite ganz oben eingefügt Example 14 - Setup editor events <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> mode : "textareas", theme : "advanced", theme_advanced_buttons1 : "mybutton,bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,j ustifyright, justifyfull,bullist,numlist,undo,redo,link,unlink", theme_advanced_buttons2 : "", theme_advanced_buttons3 : "", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", plugins : 'inlinepopups', setup : function(ed) { // Display an alert onclick ed.onclick.add(function(ed) { ed.windowmanager.alert('user clicked the editor.'); // Add a custom button ed.addbutton('mybutton', { Mag. Erwin Mayer, 2009 TinyMCE Seite 51/61

52 } </script> title : 'My button', image : 'img/example.gif', onclick : function() { ed.selection.setcontent('<strong>hello world!</strong>'); } <form method="post" action="somepage"> <textarea name="content" style="width:100%"> </textarea> </form> EX15 External toolbar Wenn man in das Textfeld klickt, wird die Symbolleiste am oberen Rand des Textfeldes gezeigt, damit reduziert sich die Höhe der Seite. Example 15 - External toolbar <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> mode : "textareas", theme : "advanced", plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,in sertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,ful lscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template", theme_advanced_buttons1 : "save,newdocument,,bold,italic,underline,strikethrough,,justifyleft,justifycenter,justifyright,justifyfull,,styleselect,formatselect,fontselect,fontsizeselect", theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,,search,replace,,bullist,numlist,,outdent,in dent,blockquote,,undo,redo,,link,unlink,anchor,image,cleanup,help,code,,insertda te,inserttime,preview,,forecolor,backcolor", theme_advanced_buttons3 : "tablecontrols,,hr,removeformat,visualaid,,sub,sup,,charmap,emotions,iespell,med ia,advhr,,print,,ltr,rtl,,fullscreen", theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,,styleprops,,cite,abbr,acronym,del,ins,attribs,,visualchars,nonbreaking,template,pagebreak", theme_advanced_toolbar_location : "external", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true </script> <form method="post" action="somepage"> <textarea name="content1" style="width:100%"> </textarea> <textarea name="content2" style="width:100%"> Seite 52/61 TinyMCE Mag. Erwin Mayer, 2009

53 </textarea> </form> EX16 Custom listbox/splitbutton In diesem Beispiel wird ein benutzerdefiniertes Listenfeld (Custom Listbox) und benutzerdefinierte Split-Taste (SplitButton) hinzugefügt. Example 16 - Custom listbox/splitbutton <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> // Creates a new plugin class and a custom listbox tinymce.create('tinymce.plugins.exampleplugin', { createcontrol: function(n, cm) { switch (n) { case 'mylistbox': var mlb = cm.createlistbox('mylistbox', { title : 'My list box', onselect : function(v) { tinymce.activeeditor.windowmanager.alert('value selected:' + v); } // Add some values to the list box mlb.add('some item 1', 'val1'); mlb.add('some item 2', 'val2'); mlb.add('some item 3', 'val3'); // Return the new listbox instance return mlb; clicked.'); case 'mysplitbutton': var c = cm.createsplitbutton('mysplitbutton', { title : 'My split button', image : 'img/example.gif', onclick : function() { tinymce.activeeditor.windowmanager.alert('button was } c.onrendermenu.add(function(c, m) { m.add({title : 'Some title', 'class' : 'mcemenuitemtitle'}).setdisabled(1); clicked.'); clicked.'); m.add({title : 'Some item 1', onclick : function() { tinymce.activeeditor.windowmanager.alert('some item 1 was } } m.add({title : 'Some item 2', onclick : function() { tinymce.activeeditor.windowmanager.alert('some item 2 was Mag. Erwin Mayer, 2009 TinyMCE Seite 53/61

54 } // Return the new splitbutton instance return c; } return null; // Register plugin with a short name tinymce.pluginmanager.add('example', tinymce.plugins.exampleplugin); // Initialize TinyMCE with the new plugin and listbox plugins : '-example', // - tells TinyMCE to skip the loading of the plugin mode : "textareas", theme : "advanced", theme_advanced_buttons1 : "mylistbox,mysplitbutton,bold,italic,underline,separator,strikethrough,justifyleft, justifycenter,justifyright,justifyfull,bullist,numlist,undo,redo,link,unlink", theme_advanced_buttons2 : "", theme_advanced_buttons3 : "", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom" </script> <form method="post" action="somepage"> <textarea name="content" style="width:100%"> </textarea> </form> EX17 Accessibility Dieses Beispiel zeigt, wie der TinyMCE für Benutzer mit Screenreadern besser zugänglich gemacht wird. Die Elemente können Sie mit Tastenkombinationen wie Alt + Shift + Q (Toolbar), Alt + Shift + Z (Editor verwenden), Alt + Umschalttaste + X (Element Pfad) auswählen, Example 17 - Accessibility <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> mode : "textareas", theme : "advanced", plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,in sertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,ful lscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template", theme_advanced_buttons1 : "save,newdocument,,bold,italic,underline,strikethrough,,justifyleft,justifycenter,justifyright,justifyfull,,styleselect,formatselect,fontselect,fontsizeselect", theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,,search,replace,,bullist,numlist,,outdent,in dent,blockquote,,undo,redo,,link,unlink,anchor,image,cleanup,help,code,,insertda te,inserttime,preview,,forecolor,backcolor", theme_advanced_buttons3 : "tablecontrols,,hr,removeformat,visualaid,,sub,sup,,charmap,emotions,iespell,med ia,advhr,,print,,ltr,rtl,,fullscreen", Seite 54/61 TinyMCE Mag. Erwin Mayer, 2009

55 theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,,styleprops,,cite,abbr,acronym,del,ins,attribs,,visualchars,nonbreaking,template,pagebreak", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true, extended_valid_elements : "a[name href target title onclick],img[class src border=0 alt title hspace vspace w idth height align onmouseover onmouseout name],hr[class width size noshade],font[fa ce size color style],span[class align style]", template_external_list_url : "example_template_list.js", use_native_selects : true </script> <form method="post" action="somepage"> <textarea name="content" style="width:100%"> </textarea> </form> EX18 Menu button Dieses Beispiel zeigt, wei man eine Menü-Button mit Untermenüs hinzufügt. Wenn Sie darauf klicken wird entsprechender Text im Editor eingefügt. Example 18 - Menu button <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> // Creates a new plugin class and a custom listbox tinymce.create('tinymce.plugins.exampleplugin', { createcontrol: function(n, cm) { switch (n) { case 'mymenubutton': var c = cm.createmenubutton('mymenubutton', { title : 'My menu button', image : 'img/example.gif', icons : false c.onrendermenu.add(function(c, m) { var sub; m.add({title : 'Some item 1', onclick : function() { tinymce.activeeditor.execcommand('mceinsertcontent', false, 'Some item 1'); } m.add({title : 'Some item 2', onclick : function() { tinymce.activeeditor.execcommand('mceinsertcontent', false, 'Some item 2'); } sub = m.addmenu({title : 'Some item 3' sub.add({title : 'Some item 3.1', onclick : function() { Mag. Erwin Mayer, 2009 TinyMCE Seite 55/61

56 false, 'Some item 3.1'); } tinymce.activeeditor.execcommand('mceinsertcontent', sub.add({title : 'Some item 3.2', onclick : function() { tinymce.activeeditor.execcommand('mceinsertcontent', false, 'Some item 3.2'); } } // Return the new menu button instance return c; } return null; // Register plugin with a short name tinymce.pluginmanager.add('example', tinymce.plugins.exampleplugin); // Initialize TinyMCE with the new plugin and menu button plugins : '-example', // - tells TinyMCE to skip the loading of the plugin mode : "textareas", theme : "advanced", theme_advanced_buttons1 : "mymenubutton,bold,italic,underline,separator,strikethrough,justifyleft,justifycent er,justifyright,justifyfull,bullist,numlist,undo,redo,link,unlink", theme_advanced_buttons2 : "", theme_advanced_buttons3 : "", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom" </script> <form method="post" action="somepage"> <textarea name="content" style="width:100%"> </textarea> </form> EX19 Tab focus Dieses Beispiel zeigt wie man das Plugin tabfocus verwendet. Man kann sich mit TAB und TAB+SHIFT im Editor bewegen Example 19 - Tab focus <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> Seite 56/61 TinyMCE Mag. Erwin Mayer, 2009