DokuWiki Prosemirror Plugin

A modern approach on DokuWiki WYSIWYG

Benutzer-Werkzeuge

Webseiten-Werkzeuge


de:why

Dies ist eine alte Version des Dokuments!


Warum ein neues WYSIWYG Plugin?

Für DokuWiki existieren eine Reihe von Plugins die versuchen einen WYSIWYG Editor zu integrieren. Das populärste ist dabei sicherlich das von Myron Turner gepflegte CKGEdit.

Um zu verstehen warum der von CKGEdit und ähnlichen Plugins für Wikis nicht ideal ist müssen wir ein wenig ausholen…

Das Bearbeiten von Inhalten im Browser ist kompliziert. Browser verstehen nur ein Format um Inhalte formatiert darzustellen: HTML1). HTML ist sehr mächtig und erlaubt es die komplexesten Inhalte darzustellen. Das manuelle Bearbeiten von HTML ist allerdings sehr mühsam und benötigt viel Sorgfalt und Erfahrung - keine gute Voraussetzung um mal eben etwas schnell aufzuschreiben.

Eine der Vorteile die Wikis so populär gemacht haben, ist es Anwendern zu erlauben Webseiten zu erstellen ohne auch nur eine Zeile Code zu schreiben. Etwas Text und ein bisschen Syntax und das Wiki erzeugt daraus HTML. Bearbeitet wird immer die Syntax selbst. Das ist ein sehr einfaches und sehr stabiles System. Aus einfacher Syntax wird komplexes HTML.

Der Wiki Syntax Ansatz

WYSIWYG Editoren haben einen anderen Ansatz. Sie erlauben direkt das Bearbeiten des HTML Codes. Allerdings eben nicht als rohen HTML code, sondern als WYSIWYG. Konkret bedeutet das, gerendertes HTML wird direkt manipuliert. Da HTML komplex ist und Browser eigentlich nur Darstellungs-Maschinen sind, ist das Entwickeln eines solchen Editors bereits relative aufwändig auch wenn man als Eingangs- und Ausgangsformat „nur“ HTML hat.

Für Wikis kommt eine weitere Hürde hinzu: man möchte erfahrenen Nutzern weiterhin die Möglichkeit geben Wiki-Syntax zu nutzen2). Das bedeutet es muss zwischen HTML und Wiki-Syntax hin- und her konvertiert werden. Von Wiki Syntax nach HTML ist dies einfach, die andere Richtung ist komplizierter: ein komplexes System muss sinnvoll in ein weniger komplexes überführt werden.

Der tradtionelle WYSIWYG Ansatz

Der traditionelle Ansatz stößt schnell an seine Grenzen: was wenn ich einen roten Text (zum Beispiel per Copy'n'Paste) in den WYSIWYG Editor einfüge? Roter Text ist valides HTML und wird erstmal vom Browser auch so dargestellt. Speichere ich das ganze als Wiki Syntax, geht das rot natürlich verloren. Das bedeutet aber ich habe keinen What you see is what you get Editor mehr. Ich sehe roten Text, bekomme aber schwarzen Text.

Das bedeutet, dass eigentlich der Editor selbst schon sehr genau Bescheid wissen muss was das dahinterliegende Wiki-System eigentlich kann, um dann die Eingaben darauf zu beschränken.

Dies ist genau der Ansatz den das Prosemirror toolkit geht. Prosemirror ist eine Bibliothek die die Grundmechanismen für einen WYSIWYG Ediotr bereitstellt, aber keinerlei Annahmen zum Ein- und Ausgangsformat stellt. Stattdessen arbeitet der Editor intern mit einem abstrakten Modell des bearbeiteten Dokumentes. Ein Schema definiert wie dieses Dokument aufgebaut sein darf.

Der Editor konvertiert das Dokument nach HTML für die Darstellung und führt Nutzereingaben wieder in das Dokument zurück. Beim speichern wird dann das abstrakte Dokument wieder in Syntax konvertiert - da das Schema bereits sicherstellt, dass das Dokument well-formed ist dieser letzte Schritt wieder vergleichsweise trivial.

Der Prosemirror Ansatz

1)
genaugenommen eine Kombination von HTML und CSS, aber der Einfachheit halber fassen wir das hier unter HTML zusammen
2)
Tatsächlich haben einige Wikis, wie zum Beispiel Confluence, diesen Anspruch komplett aufgegeben und bieten nur noch einen WYSIWYG Editor – Inhalte werden einfach als HTML gespeichert
de/why.1530774706.txt.gz · Zuletzt geändert: 2018/07/05 09:11 von 2003:e9:ef11:ef00:794f:38a4:d059:6e3e

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki