Anzeige
Anzeige
UX & Design
Artikel merken

Neuer RTE macht TinyMCE & Co. Konkurenz: Aloha Editor – Frontend-Editing leicht gemacht

Während sich das Internet und dessen Anwendungen weiterentwickelt haben, scheint die Innovation an vielen Rich-Text-Editoren vorbeigegangen zu sein. Jetzt schickt sich der neue Aloha Editor an, den Markt der RTEs ordentlich aufzumischen. Er punktet mit intuitivem Frontend-Editing und setzt konsequent auf HTML5. Bei einigen Open-Source-Projekten rennt Aloha damit offene Türen ein, so auch beim TYPO3-Projekt. Wir stellen Aloha vor und zeigen, was der Editor kann.

8 Min. Lesezeit
Anzeige
Anzeige

Das Internet hat in den letzten Jahren viele technische Neuerungen wie AJAX, REST oder CSS3 erfahren. Websites haben sich zu schnell reagierenden und benutzerfreundlichen Applikationen weiterentwickelt, die ihren Desktop-Pendants zunehmend Konkurenz machen. Die meisten der dahinter stehenden Neuerungen sind technisch gar nicht so neu. Vielmehr wurden bestehende Technologien miteinander verknüpft. Darüber hinaus haben sich „Best Practices“ so stark durchgesetzt, dass sie zu allgemein anerkannten Standards wurden. Einige dieser „Best Practices“ sind bereits Teil des neuen HTML5-Standards, der gerade ausgearbeitet und bereits von zahlreichen Browser-Herstellern Zug um Zug implementiert wird.

Anzeige
Anzeige

Die Entwickler des Aloha Editors [1] setzen auf HTML5 und wollen mit einem innovativen Konzept [2] Schwung in den verstaubten Editor-Markt bringen.

So einfach schreiben wie in Word

Der Mittelpunkt fast jeder Website – egal ob Blog, Wiki oder Unternehmens-Websites – ist der Inhalt, den die Autoren, Redakteure oder Nutzer erstellen. Dazu nutzen sie in der Regel webbasierte Systeme, deren Editoren oft kompliziert zu bedienen sind. Schnell taucht da der Wunsch auf, den Inhalt direkt dort bearbeiten zu können, wo er auch angezeigt wird: unmittelbar im Frontend der Website.

Anzeige
Anzeige
Der Aloha Editor erhebt den Anspruch, das Verhalten aller Browser beim Editieren von Inhalten zu vereinheitlichen.

Der Aloha Editor erhebt den Anspruch, das Verhalten aller Browser beim Editieren von Inhalten zu vereinheitlichen.

Bereits im Jahr 2000 hat Microsoft im Internet Explorer 5.5 das Attribut „contenteditable“ [3] eingeführt, das die technische Grundlage zum Lösen des Problems sein sollte: der User kann jedes Zeichen einer Website unmittelbar und genau so, wie es angezeigt wird, bearbeiten. Darüber hinaus können Benutzer bestimmte Bereiche (Überschriften, Teaser, Artikel etc.) einer Website zum Bearbeiten markieren, während sie andere wie Navigation, Header und Footer nicht bearbeiten können. Lange war diese Funktion nur Benutzern des Internet Explorers vorbehalten. Dann folgte Firefox, mittlerweile hat das Attribut den Weg in den HTML5-Standard-Draft [4] gefunden.

Anzeige
Anzeige

Derzeit unterstützen alle aktuellen Browser diese Funktion. Der HTML5-Standard-Draft gibt allerdings nicht vor, wie das Benutzer-Interface für die Bearbeitungsfunktionen aussehen soll. Außerdem existieren auch keine Vorgaben dazu, wie mit Formatierungen oder neuen Elementen wie Überschriften oder Tabellen umzugehen ist, oder ob bestimmte Elemente oder Formatierungen aus inhaltlicher Sicht an einer bestimmten Stelle überhaupt eingefügt werden dürfen oder nicht. Damit stellt jeder Browser unterschiedliche Bearbeitungsmöglichkeiten zur Verfügung, die nicht immer das vom Benutzer oder Entwickler gewünschte Ergebnis liefern.

Inhalte zu bearbeiten, ohne eine Markup-Sprache oder andere Syntax zu beherrschen – Aloha Editor machts möglich.

Inhalte zu bearbeiten, ohne eine Markup-Sprache oder andere Syntax zu beherrschen – Aloha Editor machts möglich.

Einfachste Formatierungen wie „fett“ oder „kursiv“ setzt jeder Browser unterschiedlich um, wenn auch im besten Fall technisch korrekt. So können Entwickler den Inhalt nicht mehr weiter verarbeiten. In einigen Fällen erzeugen die Browser sogar inkorrekten HTML-Code, der zu weiteren Problemen führt.

Anzeige
Anzeige

Genau an dieser Schwachstelle setzt der Aloha Editor an und vereinheitlicht das Verhalten aller Browser gegenüber dem Benutzer und den Entwicklern. So ermöglicht der Editor, Websites genau so bearbeiten zu können, wie sie dargestellt werden.

Formatieren ohne Markup

In den meisten Fällen besteht Inhalt nicht aus reinem Text. Überschriften und Absätze, fette oder kursive Markierungen, Tabellen oder eingebettete Objekte wie Bilder, Video, Slideshows und vieles mehr strukturieren den Inhalt. Für die Erstellung von Inhalten in Wikipedia und vielen anderen, ähnlichen Systemen ist eine spezielle Syntax [5] notwendig, um die Inhalte zu strukturieren und zu formatieren.

Einfache Formatierungen sind meist noch gut verständlich und schnell erlernbar. Bei komplizierteren wie Tabellen oder Referenzen wird es schon schwieriger. In den letzten Jahren sind für Wikis zudem unterschiedliche Formatierungsarten entstanden, so dass sich eine unüberschaubare Vielfalt an Syntaxen entwickelt hat.

Anzeige
Anzeige

Mit dem Aloha Editor sollen Nutzer in der Lage sein, Inhalte einfach und intuitiv zu bearbeiten, ohne eine Markup-Sprache oder eine sonstige Syntax erlernen zu müssen. Alle Formatierungen folgen den Empfehlungen des HTML5-Standards. So sind
beispielsweise Formatierungen wie CENTER, STRIKE und U nicht
implementiert, weil diese in HTML5 nicht mehr unsterstützt werden.
Parallel mit der Unterstützung durch Browser implementiert der Aloha Editor auch
neue Konzepte wie SECTION, ARTICLE, DATALIST und weitere Elemente. Im Gegensatz zu anderen Editoren stellt Aloha Editor dem Redakteur allerdings keine Möglichkeit zur Verfügung, den Quellcode direkt zu verändern. Mit Hilfe von Plugins kann man jedoch beliebige in HTML realisierbare Formatierungen oder Objekte zur Verfügung stellen. So beinhaltet die aktuelle Version bereits drei Plugins (Format, Table, List), die verdeutlichen, wie das Plugin-System funktioniert.

Frontend-Editing mit Floating-Menü

Viele webbasierte Systeme stellen dem Redakteur Rich-Text-Editoren (RTEs) wie TinyMCE oder CKEditor zur Verfügung, damit diese keine Markup-Sprache oder Syntax lernen müssen. Dadurch lassen sich bestimmte Teile einer Seite in einem Textfeld bearbeiten.

Außerdem ermöglichen diese Editoren es den Nutzern, Teile der Seite durch Markieren mit der Maus oder Tastatur sowie mit Hilfe eines oft sehr umfangreichen und überladenen Menü zu strukturieren und zu formatieren. Die teilweise drei- bis vierzeiligen Menüs mit mehr als 50 Icons sind nicht selten unübersichtlich und machen es dem Nutzer schwer, die Symbole den dahinter stehenden Funktionen zuzuordnen.

Anzeige
Anzeige
Das Floating-Menü des Aloha Editors zeigt immer nur die Funktionen, die im jeweiligen Kontext benötigt werden.

Das Floating-Menü des Aloha Editors zeigt immer nur die Funktionen, die im jeweiligen Kontext benötigt werden.

Der Aloha Editor setzt dieser Problematik ein Floating-Menü entgegen, das direkt oberhalb des zu bearbeitenden Bereichs eingeblendet wird und in seiner Größe nicht veränderbar ist. Dieses Menü ermöglicht es Redaktueren, die gesamte Seite als Ganzes zu bearbeiten. Es bietet Platz für maximal 15 Menü-Icons und einige Tabs mit textueller Beschreibung.

Das Floating-Menü stellt dabei immer genau die Funktionen zur Verfügung, die Redakteure in dem zu bearbeitenden Kontext auch einsetzen können. So erscheinen zum Beispiel beim Markieren einer Tabellenspalte sofort die Tabellenspaltenfunktionen. Mit Hilfe der Tabs kann der Redakteur auf weitere Funktionen zugreifen. Die Bezeichnungen der Tabs sind dabei so gewählt, dass der zu erwartende Arbeitsprozess und die verfügbaren Funktionen darunter klar erkennbar sind. Möchte er beispielsweise ein Bild oder eine Tabelle einfügen, so klickt der Redakteur auf den Tab „Einfügen“ und erhält genau jene Funktionen oder Objekte, die er an der aktuellen Stelle einfügen darf.

No Popup, just edit

In gängigen Rich-Text-Editoren kann der Redakteur meist nur erahnen, wie der Inhalt auf der Website aussehen wird. Mit Hilfe von ein paar CSS-Tricks kann der Inhalt zwar so ähnlich wie das Endergebnis aussehen. Der gesamte Bearbeitungsprozess gestaltet sich für den Benutzer allerdings in der Regel dennoch recht umständlich. Möchte er einen Text auf einer Website verändern, muss er einen Bearbeiten-Link anklicken, der ein Fenster oder eine neue Seite mit dem Textfeld und dem Inhalt lädt. Erst dann kann der Redakteur den Text bearbeiten.

Anzeige
Anzeige

Möchte er allerdings eine Vorschau haben, die zeigt, wie der Text im Kontext aussieht, muss er in eine Vorschauansicht wechseln. Dieses Vorgehen ist auch nötig, wenn der Redakteur lediglich wissen möchte, ob eine Überschrift beispielsweise in Wirklichkeit einzeilig ist oder ob ein Wort in die zweite Zeile rutscht. Falls die Vorschau nicht passt, muss er wieder zurück wechseln, Änderungen vornehmen und so weiter.

Aloha Editor ist als Inline-Editor direkt in die Website eingebunden. Wenn der Redakteur die Maus bewegt, werden die Textbereiche gelb hervorgehoben, die er bearbeiten kann. Ein Klick in einen Bereich, der bearbeitet werden kann (zum Beispiel Überschrift, Teaser oder Textbereich), markiert diesen blau. Das Floating-Menü steht direkt über dem zu bearbeitenden Block (Absatz, Liste, Tabelle etc.) zur Verfügung. Drückt der Redakteur die Esc-Taste oder klickt er in einen nicht bearbeitbaren Bereich, ist das Endergebnis der Website sofort und ohne Ladeverzögerung sichtbar. Da keine Popups, Reloads oder sonstige Lade- oder Renderingvorgänge notwendig sind, ist der Prozess besonders schnell und gibt das exakte Endergebnis aus. Man kann den Aloha Editor dabei direkt im Frontend oder auch im Backend einbinden.

Tabellen und Liste

Die aktuellen Rich-Text-Editoren sind darauf ausgerichtet, möglichst viele technische Funktionen anzubieten. Dies ist gut und sinnvoll, unterstützt aber unbedarfte Redakteure in ihrer Arbeit nur bedingt. So ist beispielsweise das Bearbeiten von Tabellen möglich, jedoch bedarf es dazu häufiger Wechsel von Mausklicks und Tastatureingaben. Außerdem sind in den Dialogfeldern Attribute vorgesehen, die für einen Redakteur nur schwer verständlich sind.

Anzeige
Anzeige
Aloha Editor soll das komplizierte Editieren von Tabellen vereinfachen.

Aloha Editor soll das komplizierte Editieren von Tabellen vereinfachen.

Mit dem Aloha Editor kann ein Redakteur innerhalb von Tabellen mit der Tabulator-Taste weiter springen. Erreicht er die letzte Zelle und drückt erneut die Tab-Taste, fügt der Editor eine neue Tabellenzeile hinzu. Außerdem kann der Redakteur eine Tabelle ohne umständliches Popup-Fenster einfügen. Beim Klicken auf „Tabelle Einfügen“ kann man durch Ziehen mit der Maus die gewünschte Größe festlegen. Dialogfelder oder sonstige Interaktionen erscheinen so reduziert wie möglich, damit für unbedarfte Benutzer das Bearbeiten einfach bleibt. Dennoch soll es für Poweruser möglich sein, spezifischere Funktionen zu verwenden. Listen-Elemente kann der Redakteur einfach durch Drücken der TAB-Taste eine Ebene tiefer oder durch UMSCH+TAB eine Ebene höher verschieben. Diese Details sind auch unbedarfte Redakteure von gängigen Office-Produkten gewohnt und führen zu einer intuitiven Bedienung.

Fazit

Der Aloha Editor ermöglicht über das erstmals in HTML5 spezifizierte Attribut „contenteditable“ browserübergreifendes Inline-Bearbeiten von Content. Das bietet CMS-, Wiki-, Blog- oder Applikationsherstellern völlig neue Möglichkeiten zum Bearbeiten von Inhalten. Das Plugin-System bietet darüber hinaus Platz für systemspezifische und funktionale Erweiterungen. Durch die Orientierung der Formatierungs- und Bearbeitungsoptionen am kommenden HTML5-Standard ist der Aloha Editor auch für die Zukunft bestens gerüstet. Obwohl Aloha noch ein „Early Bird“ ist, bietet der Editor Entwicklern und Systemherstellern bereits jetzt die Chance, die Technologie auszuprobieren. Die Produktionsreife ist derzeit für den Herbst 2010 geplant.

Einige Open-Source-Projekte zeigen bereits jetzt großes Interesse am Aloha Editor. So haben die Core-Entwickler von TYPO3 beschlossen, dass Aloha der Inline-Editor in der neuenTYPO3-Version 5.0 Phoenix werden soll [6] und
präsentieren mit dem Sprint-Release 3 (Erscheinungsdatum 20. August) einen ersten Prototyp. Auch die
Entwickler des Open-Source-CMS Midgard haben den Aloha Editor bereits integriert und
experimentieren nun an semantischen Plugins [7].
Weitere Systeme wie Contao (ehemals TYPOlight) und Modx diskutieren bereits öffentlich über Möglichkeiten, den Aloha Editor zu integrieren.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
2 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

elonmir

Das Datum 01.01.1970 kann ich mir nicht als ganz glaubwürdig vorstellen :)

Antworten
Martin Brüggemann

Ja. Das ist definitv ein Fehler im System. Schauen wir uns gleich nächste Woche an! Besten Dank für den Hinweis!

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige