Integrierte Editoren in Plone

Transkript

1 Integrierte Editoren in Plone Dokumentation zur Projektarbeit im Fach Oberseminar Content Management mit Plone/Zope Hochschule für Technik, Wirtschaft und Kultur Leipzig Fakultät Informatik, Mathematik und Naturwissenschaften Henry Montag, Hagen Grell

2 Inhalt 1 Einleitung Allgemeine Beschreibung von Webeditoren Übersicht der getesteten Editoren Installation CKEditor Zope External Editor Kupu Vorbereitung für multimediale Inhalte Teststrecke Barrierefreiheit Erweiterungen Zusammenfassung Quellen... 18

3 Einleitung 3 1 Einleitung WYSIWYG-Web-Editoren sind heute ein zentraler Bestandteil von Anwendungen für Autoren von Internet-Content. Sie bieten für Autoren verschiedene Werkzeuge zur Erstellung von multimedialen Dokumenten. Und nicht zuletzt durch ihre einfache, verständliche Oberfläche haben diese Editoren in den letzten Jahren erheblich dazu beigetragen, mehr Menschen zu ermuntern in Content Management Systemen, Blogs, Foren oder Wikis zu editieren und damit den Content vieler Seiten zu verbessern. Allerdings haben viele moderne WYSIWYG-Web-Editoren erst in den letzten Jahren einen Entwicklungssprung gemacht und es damit erst in jüngerer Zeit zu einem Standard gebracht, um im Produktiveinsatz auf Webseiten verwendet zu werden. Dagegen hatte der WYSIWYG-Web-Editor Kupu bereits vor einigen Jahren einen für diese Zeit hohen Qualitätsstandard (mit seinem effektiven Einsatz von AJAX-Techniken, einer guten API und seiner Einhaltung von Webstandards) und wurde deshalb z. B. im CMS Plone als Standard-Editor eingesetzt, um die Nutzerfreundlichkeit zu erhöhen und damit die Arbeit von Autoren zu erleichtern. In den letzten Jahren gewannen die WYSIWYG-Web-Editoren TinyMCE und CKEditor allerdings nicht nur eine große Entwickler- und Nutzer-Gemeinde, sondern vergrößerten und verbesserten auch ihren Feature-Umfang erheblich. Kupu dagegen wurde kaum noch weiter entwickelt und blieb hinter seinen Konkurrenten zurück. Das Thema der Untersuchung ist die Integration der genannten WYSIWYG-Web-Editoren in Plone 4 mit besonderer Berücksichtigung, dass Kupu in Plone 3 noch als Standard-Editor eingesetzt wurde, ab Version 4 von Plone dagegen TinyMCE als Standard-Editor eingesetzt wird und CKEditor und Kupu als Addons verfügbar sind. Es werden die Installation, Features und Usability der einzelnen Editoren untersucht, um zu evaluieren, in wieweit die aktuellen WYSIWYG-Web-Editoren dem gealterten Kupu überlegen sind.

4 Allgemeine Beschreibung von Webeditoren 4 2 Allgemeine Beschreibung von Webeditoren Webeditoren besitzen das WYSIWYG-Feature, das es ermöglicht, wie in einer Textverarbeitung zu arbeiten. Dabei wird der Dokumenteninhalt genauso auf der Website dargestellt, wie man ihn schon bei der Bearbeitung wahrnimmt. Wie dem Namen schon vorausgeht, sind Webeditoren für das Web optimiert. Der Schwerpunkt liegt dabei auf der Usability, d. h. die Benutzerfreundlichkeit steht im Vordergrund. Dafür besitzen Webeditoren weitaus weniger Funktionen als Desktop-Programme wie z. B. Microsoft Word. Die Webeditoren basieren auf dynamischen Markup per Javascript und ergänzen Grundfunktionalitäten durch AJAX-Funktionen wie beispielsweise das Feature des Bildeinfügens. Weitere Funktionen von Webeditoren: Erleichterung von Arbeitsschritten durch die Bereitstellung der Funktionen Suchen und Ersetzen, Rückgängig und Wiederholen. Nutzung von Stilen wie Absätze, Überschriften und Tabellen. Einsatz von Textformatierungen wie Schriftgröße, fett, kursiv, unterstrichen, Ausrichtung, Listen und Farben. Anzeige von Kontextmenüs innerhalb der Bearbeitung von Tabellen, dem Einfügen von Bildern und Verweisen (Links). Auswahl alternativer Ansichten wie der HTML-Ansicht und dem Vollbildmodus.

5 Übersicht der getesteten Editoren 5 3 Übersicht der getesteten Editoren Kupu ist einer der Vorreiter der WYSIWYG-Editoren und wurde von einer kleinen Gruppe von Programmierern entwickelt. Der Editor ist in Plone bis Version 4 als Standardeditor integriert. Ab Version 4 ist er allerdings nicht mehr standardmäßig installiert, kann aber aus nostalgischen Gründen über eine Addon-Installation integriert werden. TinyMCE ist ein weit verbreiteter Editor mit großem Feature-Umfang. Er besitzt eine große Entwickler- und User-Community und wird unter anderem von namenshaften Unternehmen und Diensten wie Wordpress, Facebook, Oracle, Microsoft und Apple genutzt. Ab der Version 4 ist TinyMCE standardmäßig in Plone integriert. Somit wurde eine Umstieg von Kupu auf TinyMCE durchgeführt. Der CKEditor ist der Nachfolger vom FCKeditor und bietet eine vergleichbare Funktionalität und auch Größe der Community wie der TinyMCE. Genutzt wird der CKEditor unter anderem von IBM Lotus-Anwendungen und Oracle Application Express. In Plone ist der Editor als Addon integrierbar. Noch vor der Einführung von WYSIWYG-Editoren stellte der Zope External Editor eine bereits früh entstandene Alternative zum Editieren von Plone-Artikeln in einfachen Textareas dar. Die Funktionsweise des Zope External Editor ist simpel: Das Server-Plugin sendet den Dokumenteninhalt an den Client und blockiert auf dem Server den jeweiligen Artikel für jegliche andere Nutzer. Sobald der Client fertig ist, wird die aktualisierte Version zurück zum Server geschickt, dort dann aktualisiert und entsperrt. Wegen starker Konkurrenz durch WYSIWYG-Editoren hat der Zope External Editor an Bedeutung verloren. Hauptsächlich ist er noch für Leute interessant, die auf die Benutzung ihres Lieblings-Desktop-Editors bestehen.

6 Installation 6 4 Installation Zum Testen der Editoren in der Praxis wurden für die vorliegende Untersuchung auf einer virtuellen Maschine mit Windows XP sowohl Plone 4 als auch Plone installiert, die jeweils in einem Installationspaket mit ihrem entsprechenden Zope-Server kamen. Diese beiden Plone-Instanzen wurden nötig, da es Inkompatibilitäten zwischen Kupu und dem CKEditor gab und so der CKEditor nicht ausgeführt werden konnte, sobald das Kupu-Addon auch aktiviert war. Neben den WYSIWYG-Web-Editoren wurde für die Untersuchung eine zusätzliche Software namens Zope External Editor installiert. Diese Software ermöglicht das Editieren von Plone-Artikeln mit einem Desktop-Textverarbeitungsprogramm und war vor dem Trend hin zu WYSIWYG-Web-Editoren eine gute Möglichkeit, Plone-Artikel bequem zu editieren. Im Weiteren werden die einzelnen Installationsschritte zum Einrichten von CKEditor, Zope External Editor und Kupu in Plone genauer beschrieben. TinyMCE ist als Standard-Editor in Plone bereits vollständig eingerichtet. 4.1 CKEditor Um den CKEditor in Plone 4 zu installieren, ist zunächst die Plone-Erweiterung collective.ckeditor nötig. Diese kann auf der Plone-Website herunter geladen [Col] und anschließend - den Anweisungen auf der Produktseite folgend - installiert werden. Dafür muss zunächst der Ordner "collective.ckeditor..." im Ordner "develop-eggs" im Programmverzeichnis von Plone abgelegt werden. Dieser Ordner ("collective.ckeditor...") enthält alle nötigen Addon-Daten und -Informationen zum CKEditor.

7 Installation 7 Danach muss die Zope-Instanz ausgeschaltet und die Datei buildout.exe ausgeführt werden, die sich im Verzeichnis "bin" innerhalb des Plone-Programmverzeichnisses befindet. Dieser Prozess ergänzt die Plone-Instanz um die Erweiterung CKEditor. Als letzter Schritt muss der CKEditor in Plone 4 aktiviert werden. Dafür wählt ein Administrator im Konfigurationsmenü von Plone unter Erweiterungen "CKEditor" und klickt "Aktivieren".

8 Installation Zope External Editor Der Zope External Editor ist im Gegensatz zu den anderen Programmen in dieser Untersuchung kein WYSIWYG-Web-Editor, sondern eine Software-Schnittstelle, um Desktop-Editor-Programme für Content in Plone verwenden zu können. Je nach Plone-Version sind dafür entweder beide Komponenten oder nur die Client-Komponente des Zope External Editors nötig. In der Version 4 von Plone ist bereits eine Server-Komponente für den Zope External Editor integriert, weshalb sich diese Dokumentation auf die Betrachtung der Installation der Client-Komponente beschränkt. Die eigentliche Installation des Zope External Editors ist unkompliziert. Zunächst ist das Installationsprogramm nötig, das von der Plone-Produktseite [Zop] herunter geladen werden kann. Anschließend muss das Programm gestartet werden und die Auto-Installationsroutine durchgeführt werden. Nach Abschluss der Installation kann der Zope External Editor über das Startmenü aufgerufen werden. Um den Zope External Editor nun zu konfigurieren, sollte nun die Datei "ZopeEdit.ini" im Installationsverzeichnis des Zope External Editors geöffnet werden. In der Zeile "editor =..." kann nun der Editor eingetragen werden, der als Standard-Desktop-Editor für die Autorenarbeit mit Plone verwendet werden soll.

9 Installation 9 Alternativ dazu wird vom Hersteller eine andere Variante der Konfiguration des Zope External Editors empfohlen, indem der Nutzer die Windows-Funktionen zur Dateityp-Assoziation verwendet, um die Dateien mit dem Zope External Editor bzw. des gewünschten Desktop-Editor zu verknüpfen. Diese Konfigurationsart hat bei den Vorbereitungen dieser Arbeit nicht funktioniert. Ein weiteres Problem mit dem Zope External Editor kann sein, dass das Programm die dll-datei mfc71.dll benötigt. Diese ist z. B. in den Plone-Instanzen vor Version 4 zu finden. Für die Arbeit wurde diese Datei vom Verzeichnis der Plone-Instanz in das Verzeichnis des Zope External Editors kopiert, was das Programm anschließend lauffähig machte.

10 Installation Kupu Zur Installation von Kupu wurde in dieser Arbeit zunächst die Erweiterung Kupu in Plone 4 aktiviert, die in dieser Plone-Version standardmäßig als Erweiterung verfügbar ist. Allerdings führte das zu Abstürzen des CKEditors, sobald beide Erweiterungen (Kupu und CKEditor) aktiviert waren. Aus diesem Grund wurde im Rahmen der Vorbereitung einer parallelen Präsentation von Kupu und dem CKEditor wie bereits beschrieben eine Plone-Instanz der Plone-Version installiert, bei der Kupu noch als Standard-Editor vorhanden ist. Folgende Abbildung zeigt die Kupu-Konfigurationsseite in Plone

11 Installation Vorbereitung für multimediale Inhalte Um embedded Content (z. B. Flash-Anwendungen) in den Plone 4-Seiten zu erlauben, müssen noch einige Einstellungen vorgenommen werden. In der Plone-Konfiguration unter stellt man "HTML-Filter" Folgendes ein: "Object" und "Embed" aus der Liste "Fiese Tags" entfernen "Object" und " Param " aus der Liste "Entfernte Tags " entfernen "Embed" den "Benutzerdefinierte Tags" hinzufügen Da der CKEditor und TinyMCE die Einbettung multimedialer Inhalte unterstützen, kann man die entsprechenden Toolbar-Buttons zum Einfügen von Flash- und anderen Inhalten aktivieren bzw. anpassen: TinyMCE: In der Plone-Konfiguration bei "Visueller Editor TinyMCE" muss unter dem Tab "Werkzeugleiste" zunächst "Mediendatei einfügen/bearbeiten" aktiviert sein. CKEditor: Die Anzeige des Flash-Buttons ist in den "CKEditor settings" standardmäßig aktiviert. Durch diese Änderungen können nun auf einfache Weise multimediale Elemente in Plone-Seiten hinzugefügt werden.

12 Teststrecke 12 5 Teststrecke Um die verschieden Editoren dieser Untersuchung miteinander vergleichen zu können, wurde eine Teststrecke entwickelt, mit welcher alle Editoren getestet wurden, um sie anschließend vergleichen zu können. Bei dieser Teststrecke handelte es sich um einen Arbeitsablauf, in dem verschiedene Arbeitsschritte aneinander gereiht wurden. Die einzelnen Arbeitsschritte waren: Text einfügen Überschrift markieren Textteile fett/ kursiv markieren ein Bild einfügen Flash einfügen einen Link einfügen

13 Teststrecke 13 Dabei stellten sich einige Unterschiede heraus, die in folgender Tabelle illustriert werden. Der Zope External Editor wird nicht dargestellt, da seine Funktionalitäten gänzlich vom eingestellten Desktop- Editor abhängen und damit in diesem Rahmen nicht vergleichbar sind: Feature TinyMCE CKEditor Kupu Einfügen von format. Texten als Plain Text Einfügen von Bildern Rechtschreibprüfung Erweiterbar über API Seitenumbruch Drucken einfügen Sichtbare Blöcke fürs Emoticons Tooltips Kontextmenü teilweise Flash einfügen Weiteres Zeit/Datum einfügen Templates Block Quoting Webforms Zur Erklärung der Tabelle: Einfügen von formatiertem Text als Plain Text: Dies bezeichnet die Funktion des Editors, Text mit einer bestimmten Formatierung aus einem anderen Programm/ Editor zu übernehmen und diesen Text ohne Formatierung einzufügen. Rechtschreibprüfung: Diese besitzen alle getesteten Editoren. Allerdings bezieht der CKEditor seine Rechtschreibprüfung als Webservice von Spellchecker.net. Seitenumbruch fürs Drucken einfügen: Dabei werden Markierungen in das Dokument eingefügt, die beim physischen Ausdrucken des Web-Dokumentes, Seitenumbrüche für den Drucker markieren. Sichtbare Blöcke: Dies ist die Funktion des Editors, die Ränder aller Teilbereiche eines Web- Dokuments als sichtbare Linien anzuzeigen. Dies ist nur ein optisches Hilfsmittel und kann ein- und ausgeblendet werden.

14 Barrierefreiheit 14 6 Barrierefreiheit Die Barrierefreiheit spielt bei der Usability von Softwareanwendungen eine tragende Rolle. Sie gestattet es, dass Nutzer mit Behinderungen die Software möglichst uneingeschränkt nutzen können. In der nun nachfolgenden Tabelle wird dargestellt, welche Barrierefreiheit-Features die einzelnen Editoren unterstützen. Der Zope External Editor nimmt wieder eine Sonderstellung ein und wurde nicht weiter untersucht. Feature TinyMCE CKEditor Kupu Webreader hoher Kontrast W3C Richtlinien Shortcuts frei wählbare Shortcuts Tab-Navigation Restlichen erreichbar Elemente Bei den Editoren TinyMCE und CKEditor ist es möglich Webreader wie beispielsweise NVDA einzusetzen. Dabei werden die einzelnen Toolbar-Elemente der Editoren vom Webreader vorgelesen, wenn sie den Fokus erhalten. Menschen mit einer Sehbehinderung könnte dies eine große Hilfe sein. Weiterhin kann beim CKEditor ein besonders hoher Kontrast eingestellt werden (siehe Abbildung).

15 Barrierefreiheit 15 Bei allen drei Editoren sind Shortcuts verfügbar, sodass Funktionen durch die Kombination aus Tastatureingaben ausgeführt werden können. Die Maus ist dann nicht mehr nötig. Bei den Editoren TinyMCE und CKEditor können die Shortcuts sogar frei konfiguriert werden. Weiterhin ist bei den drei Editoren eine Tab-Navigation durch die Toolbarelemente möglich. Bei TinyMCE kann man mittels Shortcut [Alt+Shift+Q] und beim CKEditor über [Alt+F10] in die Toolbar springen. Die restlichen Editor-Elemente, wie die Textarea, sind auch über Tabs bzw. Shortcuts erreichbar.

16 Erweiterungen 16 7 Erweiterungen Erweiterungen der Editoren wurden in dieser Arbeit nur marginal betrachtet. Es wurden lediglich Standard-Eigenschaften für die Erweiterungsmöglichkeiten von Software untersucht. Die Ergebnisse sind in folgender Tabelle abzulesen: Feature TinyMCE CKEditor Kupu Admin-Konfiguration Plugin API

17 Zusammenfassung 17 8 Zusammenfassung Bei der Vorbereitung und Durchführung der vorliegenden Untersuchung zu WYSIWYG-Web-Editoren konnte allgemein festgestellt werden: Information zur Installation, den Features und zur individuellen Anpassung der Editoren ist zum Teil schwer zu finden. Für Einbindung der Editoren ist Erfahrung mit jeweiligem Betriebssystem (Ubuntu, Windows, MacOS etc.) unerlässlich. Da Plone nicht in jedem Falle bequeme Installationsmechanismen bietet, sind Erfahrungen mit dem Betriebssystem in Navigation, Installation und Einrichtung von Umgebungsvariablen nötig, um im Fehlerfall trotzdem die gewünschten Resultate zu erzielen. In Plone selbst war eine Anpassung für die Anzeige und Einbindung von Flash nötig (Einbinden funktioniert standardmäßig nicht: Flash-Objekt verschwindet nach Speichern). Inhaltlich kann festgehalten werden, dass TinyMCE und CKEditor beide solide Software-Produkte mit großem Funktionsumfang sind. CKEditor ist TinyMCE voraus in Sachen Mehrsprachigkeit, mit besserem Support und besser kommentiertem Code (wichtig für Entwickler). Zudem besitzt die Plone-Erweiterung des CKEditors bereits standardmäßig die Rechtschreibprüfung als Webservice von Spellchecker.net, was ihn beliebig erweiterbar für andere Sprachen macht. TinyMCE dagegen übertrifft den CKEditor in Sachen Multimedia. Mit TinyMCE ist es möglich Multimedia in deutlich mehr Formaten als CKEditor einzufügen (Shockwave, Flash, Quicktime etc.). Der Zope External Editor stellt eine solide Software dar, ist allerdings nicht ganz komplikationslos einzurichten und bietet aufgrund großen Komforts der WYSIWYG-Web-Editoren mittlerweile kaum noch Vorteile für Autoren von Web-Content. Kupu erscheint im Rahmen dieser Untersuchung als veraltete Software. Als Ergebnis dieser Untersuchung empfehlen die Autoren die Nutzung des CKEditors zum Editieren und Erstellen von Content in Plone, da der CKEditor als sehr komfortabel und verlässlich wahrgenommen wurde. TinyMCE erschien allerdings als eine gute Alternative zum CKEditor und hob sich von diesem in dem Punkt ab, dass TinyMCE als Standardeditor in Plone integriert und damit sofort einsetzbar ist.

18 Quellen 18 9 Quellen Internet [Cke] [Col] [Tin] [Zop] Abbildungen Kupu-Logo TinyMCE-Logo CKEditor-Logo