Abonnieren
TinyMCE von Moxiecode ist ein Wysiwyg-Editor auf der Basis von JavaScript für beliebige Texteingabefelder eines Browsers. Er kann einfach in ein Weblog oder eine beliebige Internetseite eingebunden werden und bietet anschließend Formatierungswerkzeuge, die Ihresgleichen suchen. Insbesondere die Integration in Expression Engine ist leicht und gut dokumentiert.
diesen Eintrag erstelle ich im Moment bereits mit tinyMCE – also völlig in einem Wysiwyg-Modus innerhalb eines normalen Eingabeformulars von Firefox. Die Grundeinstellung ist ähnlich wie in einem normalen Texteditor: einfache Texteingabe erzeugt einen Standardabsatz, umgeben von <p>-Tags, eine normale Zeilenschaltung ergibt einen neuen Absatz und Umschalt-Zeilenschaltung ein <br />. Unterhalb des Text-Eingabefeldes erscheinen drei Reihen von Werkzeuge, die über JavaScript den Inhalt im Textfenster formatieren.
Darin gibt es auch einen Button, mit dem man das HTML sofort kontrollieren und ggf. ausbessern kann:
Ich denke die restlichen Buttons sprechen für sich – vor allem, weil sie funktionieren.
Ich möchte hier nicht weiter darauf eingehen, bitte selbst ausprobieren.
Die nötigen Dateien hier herunterladen. Eine Installationsanleitung und die komplette Dokumentation ist im Archiv enthalten. Man kann tinyMCE gemäß dieser Anleitung manuell installieren, für EE-Anwender gibt es aber eine einfachere Möglichkeit, nämlich die Installation einer Extension. Damit kann tinyMCE im Adminbereich von EE eingerichtet und konfiguriert werden.
Die Extension ist für Vs. 1.4 von EE – zumindest habe ich sie nur damit getestet. Zuerst die Tiny MCE Extension for EE herunterladen. Im Ordner ist ein readme.txt, in dem die Installation erklärt wird.
Danach müsste der Editor in allen mehrzeiligen Texteingabefeldern zur Verfügung
stehen. Tipp für Mac-Anwender: tinyMCE funktioniert noch nicht
in Safari, aber sehr gut in Firefox, insbesondere im neuen Firefox 1.5. In
Safari kommt ein nerviger Hinweis, dass es sich nur um eine Testversion handelt;
wir werden diesen Hinweis in der Konfiguration entfernen.
Die Grundkonfiguration werde ich einiges ändern. Erstens will ich den Editor nicht in allen mehrzeiligen Texteingabefeldern sondern nur in Body und Extended, ausserdem möchte ich nicht, dass tinyMCE alle Umlaute in Entities umwandelt und noch so einiges mehr. Welche Konfigurations- und Erweiterungsmöglichkeiten zur Verfügung stehen, ist in der Dokumentation von tinyMCE zu finden. Eingegeben werden die Einstellungen in EE unter Admin – Utilities – Extensions Manager – Settings. Dabei muss jede Einstellung in eine eigene Zeile, abgeschlossen mit einem Komma. Hier meine momentane (erste) Konfiguration:
theme : "advanced", mode : "exact", entity_encoding : "named", entities : "160,nbsp,38,amp,60,lt,62,gt,8211,ndash,8212,mdash,732,tilde,34,quot,215,times,8194,ensp,8195,emsp,8201", elements : "field_id_2", language : "de", docs_language : "de", browsers : "msie,gecko,opera", inline_styles : true, plugins : "table", theme_advanced_buttons3_add : "tablecontrols", table_styles : "Header 1=header1;Header 2=header2;Header 3=header3", table_cell_styles : "Header 1=header1;Header 2=header2;Header 3=header3;Table Cell=tableCel1", table_row_styles : "Header 1=header1;Header 2=header2;Header 3=header3;Table Row=tableRow1", theme_advanced_styles : "Header 1=header1;Header 2=header2;Header 3=header3;Table Row=tableRow1"
Durch die Umstellung des theme auf "advanced" bekommt man viel mehr Möglichkeiten, eigene Stile, Buttons und Plugins für tinyMCE zu definieren. Danach folgt ein eigenes Entity-Encoding: ich möchte nur einige wenige Sonderzeichen kodiert haben, nämlich z. B. < oder > und so weiter. Unter elements definiere ich die Felder, bei denen tinyMCE erscheinen soll (im Moment nur Body), dann die Sprachdefinitionen (de für Deutsch) und die Browser, unter denen tinyMCE zuverlässig läuft. (Safari fehlt hier absichtlich) Mit inline_styles : true schalte ich die Inline-Stile per <span> ein.
Die letzten fünf Zeilen erweitern den Funktionsumfang von tinyMCE: ich bekomme Kontrollelemente für Tabellen und zusätzliche Klassendefinitionen. Letztere müssen natürlich an das eigene Stylesheet angepasst werden.
Noch nicht ganz glücklich bin ich mit dem Umgang mit Bildern – man kann zwar Bilder einlinken per tinyMCE aber natürlich nicht hochladen. Und die in EE vorhandenen Werkzeuge funktionieren nicht; man kann den Quellcode nicht automatisch in das Textfeld einfügen lassen, er wird nämlich mit meiner Konfiguration dannn in Entities kodiert … Im Moment lasse ich den Code in ein anderes Feld einkopieren und füge ihn in tinyMCE im HTML-Modus ein. Das gefällt mit noch nicht so richtig, aber wenn ich noch eine andere Möglichkeit finde, teile ich es sofort mit :-)
Insgesamt ein tolles Werkzeug – der erste funktionierende Wysiwig-HTML-Editor für Browserfenster.
Von Peter am 05.01 um 20:53 Uhr. Kategorie: Blogs | HTML-CSS | Lisardo-intern
Naja, zwar nett und gut, aber ich bin trozdem kein Fan von JavaScript, eine Vorschau Funktion für den Artikel reicht imho völlig - könnte aber auch dran liegen das ich nach dem Motto “wysiwyg ist schlecht.” groß gezogen worden bin,…
Trackback-URL: http://www.lisardo.biz/trackback/163/0gLqgI5i/