Webmasterpro Editor

5 | 7034 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Webmasterpro Editor" mit Ihrem Wissen!

Anzeige Hier werben

Idee des Editors

Ziel ist es ein logisches, strukturiertes und semantisches Dokument zu erstellen und Trotzdem nicht auf die visuelle Bearbeitung zu verzichten.

Hierbei wird Wert auf einen semantisch korrekten Aufbau gelegt und rein visuelle Formatierungen vermieden.

WYSIWYM

What You See Is What You Get bedeutet im allgemeinen, "dass man das Resultat seines Bearbeitungsvorgangs sofort sieht".

Dagegen bedeutet What You See Is What You Mean, dass man nicht nur das Aussehen, sondern auch die Struktur und Logik schon sieht und bearbeitet.

Der Webmasterpro Editor ist das Herzstück zur Erstellung von Inhalten auf Webmasterpro. Er ist ein grafisches Textverarbeitungsprogramm mit dem einerseits komfortabel und einfach gearbeitet werden kann, aber auch korrekt semantischer Code erstellt wird.

Der Editor unterscheidet sich signifikant von anderen online verfügbaren Editoren in Browser, indem er abseits der nativen Browserimplementierungen Werkzeuge zur Textbearbeitung und (vor allem) Strukturierung bietet.

Motivation

Der WMP-Editor wurde auf Grund vieler Unzulänglichkeiten der bestehenden Editoren erstellt. Die bis dahin verfügbaren Editoren (TinyMCE, FCKeditor, HTMLArea, WYMeditor. ...) konnten leider nicht so weit angepasst werden um unsere Anforderungen zu erfüllen.

Die Anforderungen:

  • Leichte Erstellung semantisch korrekten Codes: Nicht strukturierter Code wird prinzipiell unmöglich, dennoch auch für Benutzer ohne HTML-Kenntnisse verwendbar
  • Schnelle Bedienung durch kontextbezogene Werkzeuge: Nur aktuell relevante Werkzeuge werden angezeigt und somit ist Interface übersichtlicher. Auf Pop-Up-Fenster kann verzichtet werden.
  • Bearbeitung komplexer HTML-Strukturen: z.B sollen Bilder mit Bildunterschriften mit einem Klick eingefügt und bearbeitet werden können ohne die einzelnen HTML-Elemente aus denen das besteht zu bearbeiten, sondern das Objekt als ganzes.
  • Extrem sauberer und valider Code: Auch das Einfügen von anderen Webseiten/Word sollten unzulässige/falsche Elemente ausgefiltert werden. Elementen sollen nun, bestimmte Klassen und Attribute zugewiesen werden können. Erzeugung von XHTML Code.

Sie waren auch zu sehr an Microsoft Word angelehnt, was aber leider für die Erzeugung von strukturierten Inhalten nicht sehr geeignet ist. Es sollte ein Editor geschaffen werden, der es leicht ermöglicht semantische korrekte Inhalte zu erzeugen ohne zu weit von WYSIWYG abzuweichen.

Vorteile

Bild zu Webmasterpro Editor
Das Logo des WMP-Editors
Bild zu Webmasterpro Editor
Bearbeiten eines Bildes
  • Echter WYSIWYM-Editor (nicht nur WYSIWYG)
  • Erzeugung semantisch korrekten, barrierefreien Codes wird erzwungen
  • Ausgabe von echtem XHTML(5) Code
  • Sauber eingerückter Quelltext
  • Kontextbezogene Werkzeuge
  • Ohne Pop-Up Fenster bedienbar
  • Sauberes, aufgeräumtes Interface ohne unnötige Funktionen
  • Anpassbar

Bedienung

Im Editor lassen sich einzelne Elemente zu einem Dokument hinzufügen und darin verschieben. Diese Elemente sind zum Beispiel:

  • Absätze: Einfacher Fließtext
  • Überschriften
  • Listen
  • Bilder
  • Zitate
  • Meldungen

Erklärung der einzelnen Elemente

  • Block: Elemente können in Blöcken gruppiert werden um sie so rechts/links Auszurichten oder speziell hervorzuheben
  • Bild: Ein Bild, optional mit Bildunterschrift. Kann auch links oder rechts umflossen werden.

Tastenkürzel

Eine Reihe von Tastenkürzeln beschleunigen die Benutzung des Editors erheblich:

  • Eingabetaste: Fügt einen neuen Absatz/Listenpunkt ein
  • Shift+Eingabetaste: Fügt einen Zeilenumbruch ein
  • Tab/Shift+Tab: Wechselt zum vorherigen/Nächste Abschnitt
  • Strg+Entf: Löscht ein Element
  • Strg+Hoch/Strg+Runter: Abschnitt verschieben

Elemente einfügen:

  • Strg+H: Überschrift hinzufügen
  • Strg+P: Absatz hinzufügen

  • Strg+Z: Rückgängig

Kürzel zur Textformatierung:

  • Strg+B: Text Fett
  • Strg+L: Link einfügen

Technische Realisierung

Der Editor ist mit Javascript programmiert. Wie alle anderen Richt-Text Editoren in Browsern benutzt er die contentEditable/designMode Funktion des Browsers.

Im Gegensatz zu anderen Editoren werden aber browserinterne Funktionen wenigstmöglich genutzt und weitgehend selbst per Javascript nachgebildet. Das hat erhebliche Vorteile:

  • Browserübergreifend einheitliche Handhabung (unabhängiger von Browserbugs und unterschiedlichen Implementierungen)
  • erweiterte Funktionalität und Bearbeitung komplexerer Strukturen möglich
  • semantisch korrekterer Code (z.B. <strong> statt <b>)
  • kontextabhängige Werkzeuge durch Auslesen der Cursorposition möglich

Der WMPEditor ist auf dem Mootools 1.2 Framework aufbauend entwickelt. Dadurch ist der Code übersichtlich geschrieben und sehr klein. Hinzu kommt noch eine Bibliothek um im Internet Explorer die Cursorposition auszulesen.

Der WMPEditor ist modular aufgebaut. Jedes HTML-Element (<p>,<h1>,<ul>) oder komplexes Strukturelemente (Bild mit Bildunterschrift, Codeblock mit Titel, Blöcke) besitzt eine Klasse, die dessen Handhabung steuert. Eigene Module können nach Belieben hinzugefügt werden.

Lizenz

Der Editor ist momentan außerhalb von Webmasterpro noch nicht verfügbar. Da in dem Editor aber sehr viel Arbeit steckt und schon öfters Fragen zur weiteren Verwendungsmöglichkeiten gestellt wurden, wird der Editor wohl bald in einer Open-Source Lizenz zu Verfügung gestellt werden. Dies wird wahrscheinlich LGPL oder die BSD-Lizenz sein.

Browserunterstützung

Firefox3.6Unterstützt4+Unbekannt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unbekannt
1+Unbekannt
Safari4Unterstützt5Unterstützt
Editor

Der Editor läuft auf allen modernen Browsern. Im speziellen sind dies:

  • Ab Firefox 2/3: Volle Unterstützung
  • Ab Opera 9: Volle Unterstützung
  • Ab Safari 3: Volle Unterstützung
  • IE7: Volle Unterstützung
  • IE6: Keine Unterstützung

Todo

  • Screenshots
  • Als Open Source freigeben
  • Lokalisation
  • Smartphone kompatiblität (Android, iPhone etc...)

Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 9 Personen an der Seite "Webmasterpro Editor" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Webmasterpro Editor" hier bearbeiten.