Unterlage Tiny MCE 3.0

Transcription

JavaScript-Tools
Tiny MCE 3.0
WYSIWYG-Editor für Textfelder in HTML-Formularen
http://tinymce.moxiecode.com/
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 ........................................................................................ 10
theme : " simple|advanced " ...................................................................... 10
plugins ................................................................................................ 10
Funktionalität des Editors bestimmen (Theme options) ......................................... 11
theme_advanced_buttons1 : "emotions"......................................................... 11
theme_advanced_buttons1 : "".................................................................... 11
theme_advanced_buttons2_add : "emotions" ................................................... 11
theme_advanced_buttons3_add_before : "emotions" ......................................... 11
Oberfläche des Editors definieren .................................................................. 12
theme_advanced_toolbar_location : "top|bottom|external", ............................... 12
theme_advanced_toolbar_align : "left|right|center" ......................................... 12
theme_advanced_statusbar_location : "top|bottom|none", ................................. 12
theme_advanced_resizing : true.................................................................. 12
Skins ..................................................................................................... 12
Beipiel: HTML-Textteile mit dem TinyMCE editieren ............................................. 13
Mag. Erwin Mayer, Dezember 2009
VBS Akademiestraße
Klassenformate in Format/Styles-DropDown-Feld anbieten ..................................... 16
content_css .......................................................................................... 16
Schriftarten im TinyMCE anbieten .................................................................. 17
theme_advanced_fonts .......................................................................... 17
Externe Listen anbieten .............................................................................. 17
Vorlagenliste ........................................................................................... 17
template_external_list_url : "verzeichnis/template_list.js" ............................... 17
Beispiel: Code-Schnipsel (Snippets) im TinyMCE – vordefinierte Inhalte einbinden .......... 18
1) Inhalt erstellen: ............................................................................... 18
2) Einstellungen für den Texteditor anpassen: .............................................. 18
3) Auflistung der Template-Liste (template_list.js) : ....................................... 19
Linkliste ................................................................................................. 20
external_link_list_url : "verzeichnis/link_list.js" ............................................ 20
Bilderliste ............................................................................................ 21
external_image_list_url : "verzeichnis/image_list.js" ...................................... 21
Beispiel: Bilderverwaltung mit dem TinyMCE...................................................... 21
Bilderupload mit Pure PHP Upload ............................................................... 21
Bilderliste mit PHP erzeugen ...................................................................... 22
Datei: bilderliste.php ............................................................................ 22
Datei: bild_einfuegen.php ...................................................................... 23
Bild einfügen......................................................................................... 24
Medienliste ............................................................................................. 26
media_external_list_url : "verzeichnis/media_list.js" ...................................... 26
Beispiel: Konfiguration nach Benutzer-Gruppen .................................................. 26
TinyMCE:Control reference........................................................................... 27
Mit dem TinyMCE mitgelieferte Beispiele .......................................................... 28
Verzeichnis: C:/xampp/htdocs/WEd_TinyMCE/tinymce/examples ..................... 28
Dateiliste: ......................................................................................... 28
Datei: full.html ................................................................................... 28
Datei: index.html ................................................................................ 30
Datei: menu.html ................................................................................ 30
Datei: simple.html ............................................................................... 30
Datei: skins.html ................................................................................. 31
Datei: translate.html ............................................................................ 36
Datei: word.html ................................................................................. 37
Verzeichnis: C:/xampp/htdocs/WEd_TinyMCE/tinymce/examples/lists ............... 39
Dateiliste: ......................................................................................... 39
Datei: image_list.js .............................................................................. 39
Datei: link_list.js ................................................................................. 39
Datei: media_list.js .............................................................................. 39
Datei: template_list.js .......................................................................... 39
Weitere Beispiele von http://tinymce.moxiecode.com......................................... 40
EX01 Toggle editor with JavaScript ............................................................ 41
EX02 Valid elements ............................................................................. 41
EX03 Class selectors/deselectors .............................................................. 42
EX04 multiple configs/inits ..................................................................... 42
EX05 Custom cleanup ............................................................................ 43
EX06 Ajax load/save ............................................................................. 44
EX07 Read only mode ............................................................................ 44
EX08 Url conversion .............................................................................. 45
Output-Quellcode aus den POST-Variablen ..................................................... 46
FAQ dazu ............................................................................................. 46
1. Relative URLs ............................................................................... 46
2. Absolute URLs .............................................................................. 46
3. Domain Absolute URLs..................................................................... 47
4. Keine URL Conversion ..................................................................... 47
EX09 BBCode ...................................................................................... 47
Seite 2/61
TinyMCE
Mag. Erwin Mayer, 2009
EX10
EX11
EX12
EX13
EX14
EX15
EX16
EX17
EX18
EX19
EX20
EX21
EX22
EX23
Noneditable content example ........................................................... 48
Fullpage example .......................................................................... 49
Load on demand ........................................................................... 50
Load on demand using compressor ...................................................... 50
Setup editor events........................................................................ 51
External toolbar............................................................................ 52
Custom listbox/splitbutton ............................................................... 53
Accessibility ................................................................................ 54
Menu button ................................................................................ 55
Tab focus.................................................................................... 56
Custom toolbar button .................................................................... 57
Post to self.................................................................................. 58
jQuery version.............................................................................. 59
jQuery plugin ............................................................................... 60
Doku V6
TinyMCE
Seite 3/61
Seite 4/61
TinyMCE
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
http://tinymce.moxiecode.com/download.php (kostenlos)
Sourceforge
http://sourceforge.net/projects/tinymce/files
Entwicklerforum
http://tinymce.moxiecode.com/punbb/
Wiki mit der Dokumentation des Editors
http://tinymce.moxiecode.com/index.php/TinyMCE:Index
Weitere Plugins:
MCFileManager von Moxiecode (nicht kostenfrei)
http://www.moxiecode.com/products_filemanager.php
MCImageManager von Moxiecode(nicht kostenfrei)
http://www.moxiecode.com/products_imagemanager.php
TinyBrowser Web File Browser(kostenfrei)
Dateibrowser mit Upload und Bildvorschau
http://www.lunarvis.com/products/tinymcefilebrowserwithfileupload.php
Sourceforge.net (weitere Plugins)
http://sourceforge.net/tracker/?atid=738747&group_id=103281&func=browse
Sonstige Quellen:
Manfred Müller Späth, Texteditor de luxe, Tiny MCE in PHP-Projekten
http://internet.magnus.de/webdesign/artikel/tiny-mce-in-php-projekten.html
TinyMCE
Seite 5/61
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 WebServer, 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">
tinyMCE.init({
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

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:
tinyMCE.init({
mode: "specific_textareas",
theme: "simple",
editor_selector: "mceEinfach"
});
tinyMCE.init({
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.
TinyMCE
Seite 7/61
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. SourceforgeSeite, zum anderen ist gut erläutert, welche Dateien die lokalisierbaren Daten enthalten.
So kann man im Zweifelsfall selbst Hand anlegen.
Download der Sprachdatei: http://tinymce.moxiecode.com/download.php
bzw. http://tinymce.moxiecode.com/download_i18n.php
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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple theme example</title>

<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
language : "de", // Wechsel auf Deutsch
mode : "textareas",
theme : "simple"
});
</script>

</head>
Seite 8/61
TinyMCE
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-inSchnittstelle 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 cleanupOption, 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.
TinyMCE
Seite 9/61
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:
http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference
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
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
"save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,
justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
"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",
"tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,
|,print,|,ltr,rtl,|,fullscreen",
"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,
TinyMCE
Seite 11/61
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
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"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<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>
TinyMCE
Seite 13/61
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-8859-1">
<title>Verwaltung der Neuigkeiten</title>

<script type="text/javascript"
src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
tinyMCE.init({
// 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
"save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter
,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
"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",
"tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,med
ia,advhr,|,print,|,ltr,rtl,|,fullscreen",
"insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del
,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
// 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
external_image_list_url : "tinymce/anpassungen/image_list.js",
media_external_list_url : "lists/media_list.js"
});
</script>

<style type="text/css">
<!-h3 {
font-family: Arial, Helvetica, sans-serif;
}
-->
</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");
?>
TinyMCE
Seite 15/61
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
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, xlarge=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."]
];
TinyMCE
Seite 17/61
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:
Beispielsdateien
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>E-Mail:</td>
<td><a href="mailto:[email protected]">[email protected]</a></td>
</tr>
<tr>
<td>Telefon:</td>
<td>0676/123 45 678 </td>
</tr>
</table>
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:


tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
language : "de",
plugins :
unt",
// Theme options
Seite 18/61
TinyMCE

theme_advanced_fonts: "Arial=arial,helvetica,sans-serif; Comic Sans MS=comic
sans ms,arial,helvetica,sans-serif;",
content_css : "vorlagen/eigenerstil.css",
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 = [
["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"]

 und Adresse und
Diese Datei beinhaltet die Auflistung aller Snippets inkl. Beschreibung
];


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!
TinyMCE
Seite 19/61
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"
system.
// There links will be displayed as a dropdown in all link dialogs if the
"external_link_list_url"
var tinyMCELinkList = new Array(
// Name, URL
["Google", "http://www.google.at"],
["Freshmeat", "http://www.freshmeat.com"],
["Sourceforge", "http://www.sourceforge.com"]
);
Seite 20/61
TinyMCE
Bilderliste
external_image_list_url : "verzeichnis/image_list.js"
system.
// There images will be displayed as a dropdown in all image dialogs if the
"external_link_image_url"
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:
TinyMCE
Seite 21/61
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-8859-1">
[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
[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 UploadVerzeichnis
[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-8859-1">
[05] <title>Beispiel Bilderverwaltung</title>
[06] 
[07] <script type="text/javascript"
[08] <script type="text/javascript">
[09]
tinyMCE.init({
[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
TinyMCE
Seite 23/61
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
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.
TinyMCE
Seite 25/61
Medienliste
media_external_list_url : "verzeichnis/media_list.js"
system.
// There flash movies will be displayed as a dropdown in all media dialog if the
"media_external_list_url"
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
http://internet.magnus.de/webdesign/artikel/tiny-mce-in-php-projekten.html
<?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";
$currNoEdit = 1;
break;
default:
$currTheme = "simple";
$currNoEdit = 1;
break;
} ?>
[…]
"text/javascript" src="/scripts/tiny_mce/tiny_mce.js"></script>
"text/javascript">
Seite 26/61
TinyMCE
tinyMCE.init({
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
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/theme_advanced_buttons_1_n
TinyMCE
Seite 27/61
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="http://www.w3.org/1999/xhtml">
[03] <head>
[04] <title>Full featured example</title>
[05]
[06] 
src="../jscripts/tiny_mce/tiny_mce.js"></script>
[09]
tinyMCE.init({
[10]
// General options
[11]
mode : "textareas",
[12]
theme : "advanced",
[13]
language : "de",
[14]
plugins :
unt",
[15]
[16]
// Theme options
[17]
[18]
[19]
[20]
[21]
[22]
[23]
[24]
[25]
[26]
[27]
content_css : "css/content.css",
[28]
[29]
[30]
template_external_list_url : "lists/template_list.js",
[31]
[32]
external_image_list_url : "lists/image_list.js",
[33]
media_external_list_url : "lists/media_list.js",
Seite 28/61
TinyMCE
[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="http://tinymce.moxiecode.com/dump.php?example=true">
[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="http://wiki.moxiecode.com/examples/tinymce/">Wiki</a>.
[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]
onmousedown="alert(tinyMCE.get('elm1').getContent());">[Get contents]</a>
[73]
onmousedown="alert(tinyMCE.get('elm1').selection.getContent());">[Get selected
HTML]</a>
[74]
onmousedown="alert(tinyMCE.get('elm1').selection.getContent({format :
'text'}));">[Get selected text]</a>
[75]
onmousedown="alert(tinyMCE.get('elm1').selection.getNode().nodeName);">[Get
selected element]</a>
[76]
onmousedown="tinyMCE.execCommand('mceInsertContent',false,'<b>Hello
world!!</b>');">[Insert HTML]</a>
[77]
onmousedown="tinyMCE.execCommand('mceReplaceContent',false,'<b>{$selection}</b>');"
>[Replace selection]</a>
TinyMCE
Seite 29/61
[78]
[79]
[80]
[81]
[82]
[83]
[84]
[85]
[86]
<br />
<input type="submit" name="save" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</div>
</form>
</body>
</html>
Datei: index.html
[01] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
[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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[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
[03] <head>
[04] <title>Simple theme example</title>
[05]
[06] 
[09]
tinyMCE.init({
[10]
mode : "textareas"
[11]
});
[12] </script>
[13] 
[14]
[15] </head>
[16] <body>
[17]
[19]
<h3>Simple theme example</h3>
[20]
[21]
<p>
Seite 30/61
TinyMCE
[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]
[24]
</p>
[25]
[26]
encoded -->
[27]
[28]
<p>
[29]
[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]
[38]
[39] </form>
[40]
[41] </body>
[42] </html>
Datei: skins.html
[03] <head>
[04] <title>Skin support example</title>
[05]
[06] 
[09]
// Default skin
[10]
tinyMCE.init({
[11]
// General options
[12]
mode : "exact",
[13]
elements : "elm1",
[14]
theme : "advanced",
[15]
plugins :
sertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,ful
lscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups",
[16]
[17]
// Theme options
[18]
[19]
[20]
TinyMCE
Seite 31/61
[21]
[22]
[23]
[24]
[25]
[26]
[27]
[28]
[29]
[30]
[31]
[32]
[33]
[34]
[35]
[36]
[37]
[38]
[39]
staffid : "991234"
[40]
}
[41]
});
[42]
[43]
// O2k7 skin
[44]
tinyMCE.init({
[45]
// General options
[46]
mode : "exact",
[47]
elements : "elm2",
[48]
theme : "advanced",
[49]
skin : "o2k7",
[50]
plugins :
[51]
[52]
// Theme options
[53]
[54]
[55]
[56]
[57]
[58]
[59]
[60]
[61]
[62]
[63]
[64]
[65]
[66]
[67]
[68]
[69]
[70]
[71]
[72]
[73]
[74]
staffid : "991234"
[75]
}
[76]
});
[77]
Seite 32/61
TinyMCE
[78]
// O2k7 skin (silver)
[79]
tinyMCE.init({
[80]
// General options
[81]
mode : "exact",
[82]
elements : "elm3",
[83]
theme : "advanced",
[84]
skin : "o2k7",
[85]
skin_variant : "silver",
[86]
plugins :
[87]
[88]
// Theme options
[89]
[90]
[91]
[92]
[93]
[94]
[95]
[96]
[97]
[98]
[99]
[100]
[101]
[102]
[103]
[104]
[105]
[106]
[107]
[108]
[109]
[110]
staffid : "991234"
[111]
}
[112] });
[113]
[114] // O2k7 skin (silver)
[115] tinyMCE.init({
[116]
// General options
[117]
mode : "exact",
[118]
elements : "elm4",
[119]
theme : "advanced",
[120]
skin : "o2k7",
[121]
skin_variant : "black",
[122]
plugins :
[123]
[124]
// Theme options
[125]
[126]
TinyMCE
Seite 33/61
[127]
[128]
[129]
[130]
[131]
[132]
[133]
[134]
[135]
[136]
[137]
[138]
[139]
[140]
[141]
[142]
[143]
[144]
[145]
[146]
staffid : "991234"
[147]
}
[148] });
[149] </script>
[150] 
[151]
[152] </head>
[153] <body>
[154]
[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]
[161] </p>
[162]
[163] 
[164] <textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%">
[165]
<p>
[166]
[167]
</p>
[168]
<p>
[169]
[170]
</p>
[171] </textarea>
[172]
[173] <br />
[174]
[176]
<p>
[177]
Seite 34/61
TinyMCE
[178]
</p>
[179]
<p>
[180]
[181]
</p>
[182] </textarea>
[183]
[184] <br />
[185]
[187]
<p>
[188]
[189]
</p>
[190]
<p>
[191]
[192]
</p>
[193] </textarea>
[194]
[195] <br />
[196]
[198]
<p>
[199]
[200]
</p>
[201]
<p>
[202]
[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>
TinyMCE
Seite 35/61
Datei: translate.html
[03] <head>
[04] <title>Full featured example</title>
[05] <style>
[06] body {font-family:Arial,Verdana; font-size: 12px;}
[07] </style>
[08]
[09] 
src="../jscripts/tiny_mce/tiny_mce_dev.js"></script>
[12]
tinyMCE.init({
[13]
// General options
[14]
mode : "textareas",
[15]
theme : "advanced",
[16]
plugins :
tionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
[17]
[18]
// Theme options
[19]
,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
[20]
[21]
[22]
[23]
[24]
[25]
theme_advanced_path_location : "bottom",
[26]
[27]
[28]
[29]
[30]
[31]
[32]
[33]
[34]
[35]
[36]
[37]
[38]
[39]
[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]
[54]
<h3>Translation</h3>
Seite 36/61
TinyMCE
[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]
[70]
<p>
[71]
[72]
</p>
[73]
<p>
[74]
[75]
</p>
[76]
</textarea>
[77] </form>
[78]
[79] </body>
[80] </html>
Datei: word.html
[03] <head>
[04] <title>Word processor example</title>
[05]
[06] 
[09]
tinyMCE.init({
[10]
// General options
[11]
mode : "textareas",
[12]
theme : "advanced",
[13]
language : "de",
[14]
[15]
plugins :
[16]
[17]
// Theme options
[18]
[19]
TinyMCE
Seite 37/61
[20]
[21]
[22]
[23]
[24]
[25]
[26]
[27]
// Example word content CSS (should be your site CSS) this one removes
paragraph margins
[28]
content_css : "css/word.css",
[29]
[30]
[31]
[32]
[33]
[34]
[35]
[36]
[37]
[38]
[39]
staffid : "991234"
[40]
}
[41]
});
[42] </script>
[43] 
[44]
[45] </head>
[46] <body>
[47]
[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]
[54]
</p>
[55]
[56]
encoded -->
[57]
[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]
[65]
[66] </form>
[67]
[68] </body>
[69] </html>
Seite 38/61
TinyMCE
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
backend system.
[02] // There links will be displayed as a dropdown in all link dialogs if the
"external_link_list_url"
[04]
[05] var tinyMCELinkList = new Array(
[06]
// Name, URL
[07]
["Moxiecode", "http://www.moxiecode.com"],
[08]
["Freshmeat", "http://www.freshmeat.com"],
[09]
["Sourceforge", "http://www.sourceforge.com"]
[10] );
Datei: media_list.js
backend system.
[02] // There flash movies will be displayed as a dropdown in all media dialog if
the "media_external_list_url"
[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
backend system.
[02] // There templates will be displayed as a dropdown in all media dialog if the
"template_external_list_url"
[04]
[05] var tinyMCETemplateList = [
[06]
[07]
["Simple snippet", "templates/snippet1.htm", "Simple HTML snippet."],
[08]
["Layout", "templates/layout1.htm", "HTML Layout."]
[09] ];
TinyMCE
Seite 39/61
Weitere Beispiele von http://tinymce.moxiecode.com
Hier sind weitere Beispiele die die Möglichkeiten des TinyMCE zeigen:







Example
Example
Example
Example
Example
Example
Example
01
02
03
04
05
06
07
- Toggle editor with JavaScript
- Valid elements
- Class selectors/deselectors
- Multiple configs/inits
- Custom cleanup
- Ajax load/save
- Read only mode







Example
Example
Example
Example
Example
Example
Example
08
09
10
11
12
13
14
- URL conversion
- BBCode
- Noneditable content
- Fullpage example
- Load on demand
- Load on demand using compressor
- Setup editor events









Example 15
Example 16
Example 17
Example 18
Example 19
Example 20
Example 21
Example 22
Example 23
Seite 40/61
-
External toolbar
Custom listbox/splitbutton
Accessibility
Menu button
Tab focus
Custom toolbar button
Post to self
jQuery version
jQuery plugin
TinyMCE
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>
tinyMCE.init({
mode : "textareas",
theme : "advanced"
});
function toggleEditor(id) {
if (!tinyMCE.get(id))
tinyMCE.execCommand('mceAddControl', false, id);
else
tinyMCE.execCommand('mceRemoveControl', false, id);
}
</script>
<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
tinyMCE.init({
mode : "textareas",
theme : "simple",
extended_valid_elements :
"img[class=myclass|!src|border:0|alt|title|width|height]",
invalid_elements : "strong,b,em,i"
});
</script>
<textarea id="content" name="content" cols="85" rows="10"></textarea>
</form>
TinyMCE
Seite 41/61
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
tinyMCE.init({
mode : "textareas",
theme : "simple",
editor_selector : "mceEditor",
editor_deselector : "mceNoEditor"
});
</script>
<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
tinyMCE.init({
mode : "textareas",
theme : "simple",
editor_selector : "mceSimple"
Seite 42/61
TinyMCE
});
tinyMCE.init({
mode : "textareas",
theme : "advanced",
editor_selector : "mceAdvanced"
});
</script>
<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
tinyMCE.init({
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.'));
});
}
});
// 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, '');
}
});
}
});
</script>
</textarea>
</form>
TinyMCE
Seite 43/61
EX06 Ajax load/save
demonstriert den Einsatz von Ajax beim TinyMCE. Siehe Schaltfläche: Load/Save
Example 06 - Ajax load/save
tinyMCE.init({
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>
</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
tinyMCE.init({
mode : "textareas",
theme : "advanced",
readonly : true
});
</script>
</textarea>
</form>
Seite 44/61
TinyMCE
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
tinyMCE.init({
mode : "exact",
elements : 'absurls',
theme : "advanced",
plugins : 'advlink,advimage',
relative_urls : false
});
tinyMCE.init({
mode : "exact",
elements : 'abshosturls',
theme : "advanced",
relative_urls : false,
remove_script_host : false
});
tinyMCE.init({
mode : "exact",
elements : 'relurls',
theme : "advanced",
relative_urls : true // Default value
});
tinyMCE.init({
mode : "exact",
elements : 'relurlstopage',
theme : "advanced",
relative_urls : true, // Default value
document_base_url : 'http://tinymce.moxiecode.com/'
});
tinyMCE.init({
mode : "exact",
elements : 'nourlconvert',
theme : "advanced",
convert_urls : false
});
</script>
<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>
TinyMCE
Seite 45/61
<textarea id="nourlconvert" name="nourlconvert" cols="85"
rows="10"></textarea>
</form>
Output-Quellcode aus den POST-Variablen
Element
HTML
absurls
abshosturls
relurls
relurlstopage
nourlconvert
<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>
href="http://tinymce.moxiecode.com/examples/example_08.php">content<
/a>. <img src="http://tinymce.moxiecode.com/examples/img/logo.jpg"
alt="" /></p>
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>
href="examples/example_08.php">content</a>. <img
src="examples/img/logo.jpg" alt="" /></p>
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>
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 URLKonvertierung). 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: "http://www.site.com/path1/"
Beispiel: http://www.site.com/path1/path2/file.htm
>> 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,
Seite 46/61
TinyMCE
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,
Beispiel: path2/file.htm>> http://www.site.com/path1/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 http://www.site.com/path1/path2/file.htm
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
http://stackoverflow.com/questions/687552/prevent-tinymce-internet-explorerfrom-converting-urls-to-links
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
tinyMCE.init({
theme : "advanced",
mode : "none",
plugins : "bbcode",
"bold,italic,underline,undo,redo,link,unlink,image,forecolor,styleselect,removeform
at,cleanup,code",
theme_advanced_buttons2 : "",
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
});
TinyMCE
Seite 47/61
</script>
</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
tinyMCE.init({
theme : "advanced",
mode : "textareas",
plugins : "noneditable"
});
</script>
<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
EX11 Fullpage example
Normalerweise warden durch TinyMCE nur Code-Teile erzeugt.
Mit diesem Plugin können Sie ganze HTML-Seiten erstellen und auch deren SeitenEigenschaften
(Document Properties|Dokumenteigenschaften)
bestimmen.
Example 11 - Fullpage example
tinyMCE.init({
theme : "advanced",
mode : "textareas",
plugins : "fullpage",
theme_advanced_buttons3_add : "fullpage"
});
</script>
</textarea>
</form>
TinyMCE
Seite 49/61
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
function setup() {
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins :
lscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
});
}
</script>
</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
path>/tiny_mce/tiny_mce_gzip.js"></script>
function setup() {
tinyMCE_GZ.init({
themes : "advanced",
plugins :
languages : "en",
disk_cache : true
}, function() {
tinyMCE.init({
Seite 50/61
TinyMCE
mode : "textareas",
theme : "advanced",
plugins :
});
});
}
</script>
</textarea>
<a href="javascript:setup();">Load TinyMCE</a>
</form>
EX14 Setup editor events
In diesem Beispiel wird eine benutzerdefinierte Schaltfläche eingefügt. Beim onClickEreignis 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
tinyMCE.init({
mode : "textareas",
theme : "advanced",
"mybutton,bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,j
ustifyright, justifyfull,bullist,numlist,undo,redo,link,unlink",
plugins : 'inlinepopups',
// Display an alert onclick
ed.onClick.add(function(ed) {
ed.windowManager.alert('User clicked the editor.');
});
// Add a custom button
ed.addButton('mybutton', {
TinyMCE
Seite 51/61
title : 'My button',
image : 'img/example.gif',
onclick : function() {
ed.selection.setContent('<STRONG>Hello world!</STRONG>');
}
});
}
});
</script>
</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
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins :
theme_advanced_toolbar_location : "external",
});
</script>
<textarea name="content1" style="width:100%">
</textarea>
<textarea name="content2" style="width:100%">
Seite 52/61
TinyMCE
</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
// 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
mlb.add('Some item
mlb.add('some item
mlb.add('some item
to the list box
1', 'val1');
2', 'val2');
3', 'val3');
// Return the new listbox instance
return mlb;
case 'mysplitbutton':
var c = cm.createSplitButton('mysplitbutton', {
title : 'My split button',
tinyMCE.activeEditor.windowManager.alert('Button was
clicked.');
}
});
c.onRenderMenu.add(function(c, m) {
m.add({title : 'Some title', 'class' :
'mceMenuItemTitle'}).setDisabled(1);
m.add({title : 'Some item 1', onclick : function() {
tinyMCE.activeEditor.windowManager.alert('Some item 1 was
clicked.');
}});
tinyMCE.activeEditor.windowManager.alert('Some item 2 was
clicked.');
}});
});
TinyMCE
Seite 53/61
// 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
tinyMCE.init({
plugins : '-example', // - tells TinyMCE to skip the loading of the plugin
mode : "textareas",
theme : "advanced",
"mylistbox,mysplitbutton,bold,italic,underline,separator,strikethrough,justifyleft,
justifycenter,justifyright,justifyfull,bullist,numlist,undo,redo,link,unlink",
theme_advanced_statusbar_location : "bottom"
});
</script>
</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
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins :
Seite 54/61
TinyMCE
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>
</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
// 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',
icons : false
});
c.onRenderMenu.add(function(c, m) {
var sub;
tinyMCE.activeEditor.execCommand('mceInsertContent',
false, 'Some item 1');
}});
false, 'Some item 2');
}});
sub = m.addMenu({title : 'Some item 3'});
sub.add({title : 'Some item 3.1', onclick : function() {
TinyMCE
Seite 55/61
false, 'Some item 3.1');
}});
sub.add({title : 'Some item 3.2', onclick : function() {
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
tinyMCE.init({
plugins : '-example', // - tells TinyMCE to skip the loading of the plugin
mode : "textareas",
theme : "advanced",
"mymenubutton,bold,italic,underline,separator,strikethrough,justifyleft,justifycent
er,justifyright,justifyfull,bullist,numlist,undo,redo,link,unlink",
theme_advanced_statusbar_location : "bottom"
});
</script>
</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
Seite 56/61
TinyMCE
// Initialize TinyMCE with the tab_focus option
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "tabfocus",
"bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyrig
ht,justifyfull,bullist,numlist,undo,redo,link,unlink",
tab_focus : ':prev,:next'
});
</script>
</textarea>
</form>
EX20 Custom toolbar button
Dieses Beispiel zeigt, wie man die Funktion setup callback verwendet.
Example 20 - Custom toolbar button
tinyMCE.init({
mode : "textareas",
theme : "advanced",
"mybutton,bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,j
ustifyright, justifyfull,bullist,numlist,undo,redo,link,unlink",
plugins : 'inlinepopups',
// Add a custom button
ed.addButton('mybutton', {
title : 'My button',
// Add you own code to execute something on click
ed.focus();
ed.selection.setContent('<STRONG>Hello world!</STRONG>');
}
});
}
});
</script>
</textarea>
</form>
TinyMCE
Seite 57/61
EX21 Post to self
Example 21 - Post to self
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins :
// Theme options
content_css : "css/example.css",
template_external_list_url : "js/template_list.js",
external_link_list_url : "js/link_list.js",
external_image_list_url : "js/image_list.js",
media_external_list_url : "js/media_list.js",
staffid : "991234"
}
});
</script>
</textarea>
</form>
Seite 58/61
TinyMCE
EX22 jQuery version
Dieses Beispiel zeigt die etwas kleinere jQuery-Version von TinyMCE
Example 22 - jQuery version

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
google.load("jquery", "1.3");
</script>

tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins :
// Theme options
content_css : "css/example.css",
template_external_list_url : "js/template_list.js",
external_link_list_url : "js/link_list.js",
external_image_list_url : "js/image_list.js",
media_external_list_url : "js/media_list.js",
staffid : "991234"
}
});
</script>
</textarea>
</form>
TinyMCE
Seite 59/61
EX23 jQuery plugin
Example 23 - jQuery plugin

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
google.load("jquery", "1.3");
</script>

src="../js/tinymce/jscripts/tiny_mce/jquery.tinymce.js"></script>
$().ready(function() {
$('textarea.tinymce').tinymce({
// Location of TinyMCE script
script_url : '../js/tinymce/jscripts/tiny_mce/tiny_mce.js',
// General options
theme : "advanced",
plugins :
// Theme options
staffid : "991234"
}
});
});
</script>
<textarea id="content" name="content" class="tinymce" style="width:100%">
</textarea>

onmousedown="$('#content').tinymce().show();">[Show]</a>
Seite 60/61
TinyMCE
onmousedown="$('#content').tinymce().hide();">[Hide]</a>
onmousedown="$('#content').tinymce().execCommand('Bold');">[Bold]</a>
<a href="javascript:;" onmousedown="alert($('#content').html());">[Get
contents]</a>
onmousedown="alert($('#content').tinymce().selection.getContent());">[Get selected
HTML]</a>
onmousedown="alert($('#content').tinymce().selection.getContent({format :
'text'}));">[Get selected text]</a>
onmousedown="alert($('#content').tinymce().selection.getNode().nodeName);">[Get
selected element]</a>
onmousedown="$('#content').tinymce().execCommand('mceInsertContent',false,'<b>Hello
world!!</b>');">[Insert HTML]</a>
onmousedown="$('#content').tinymce().execCommand('mceReplaceContent',false,'<b>{$se
lection}</b>');">[Replace selection]</a>
</form>
TinyMCE
Seite 61/61

Unterlage Tiny MCE 3.0

Transcription

Documents pareils

MK_BEALENT11_DE_Inf_A BEA Lenticular.indd

etzt komme ich erst zu Ihrer ..nfrage wegen V`s Beistimmungtdass

Treasuremaps To The Soul Retreat Trogen 2015

http://www.pspsource.de/news.php?item.2574 Seite 1/2 Mr_Evo`s

http://www.pspsource.de/news.php?item.2857 Seite 1/2 850 PTF

Browser Grafiktreiber Direct3D (Windows) Grafiktreiber OpenGL ES

Weiterbildung in Advanced Practice Nursing

medical skills - advanced

Beginner - bei Another Dimension