Revision 395: ProseMirror und TipTap

In dieser Revision kitzelte unser Gast Philipp Kühn (Webseite, Github, Twitter), seines Zeichens Gründer von Ueberdosis und Scrumpy, unsere Nerven mit den neuesten Gruselgeschichten aus der WYSIWYG-Krypta und erzählte uns alles über sein eigenes WYSIWYG-Werk Tiptap. a.message_link { float: right; margin: 1rem 2rem; width: 100%; width: 400px; border-bottom: 0; } Unser Sponsor Storyblok ist ein headless CMS, das die Grenze zwischen einem traditionellen CMS und einem Pagebuilder sprengt. Das Verwalten digitaler Inhalte mit einem CMS kann eine schwierige Aufgabe sein. Ohne eine visuelle Vorschau arbeiten Redakteure oft blind vor sich hin und benötigen selbst für einfache Änderungen Anweisungen. Storyblok bietet die Benutzererfahrung eines Pagebuilders mit einer modernen, vollständig API-basierten Architektur. Das gibt dem Entwickler die Freiheit bei der Wahl der Technologie und dem Editor eine selbsterklärende und intuitive Oberfläche. Du kannst mehr über Storyblok lesen und ihren kostenlosen Plan ausprobieren, sie auf Twitter oder in ihrem Live-Chat erreichen. Schaunotizen [00:03:20] WYSIWYG Wir beginnen mir einer Bestandsaufnahme: das olle HTML-Standard-Attribut contenteditable ist noch immer so gruselig wie es in der Kreidezeit bereits war uns seine etablierten Nutzer CKEditor und TinyMCE sind ebenso solide wie angestaubt. Leider führen die diversen Alternativen wie der Medium Editor und Quill auf der Haben-Seite kein „solide“ zu Felde, sondern glänzen eher durch Bugs (Medium Editor) und Einschränkungen (Qill). Solidität wäre aber eine der Kern-Anforderungen einer modernen WYSIWYG-Lösung, zusammen mit stetiger Weiterentwicklung (wg. vieler Edge Cases), extremer Anpassbarkeit des UI sowie der Unterstützung dynamischer Inhalte (z.b. @username-Referenzen in Text). Die heute gängige Grundlage eines jeden WYSIWYG-Editors mit Unterstützung für die genannten Features ist ProseMirror aus der Feder von Marijn Haverbeke (Webseite, Github, Twitter), das eher ein Editor-Toolkit als ein WYSIWYG-Editor ist. ProseMirror ist, anders als CodeMirror, sehr lowlevelig und sogleich verlieren wir uns in diversen Details. Damit sich aber nicht jeder Entwickler in Details verlieren muss, hat Philipp TipTap entwickelt, einen CodeMirror-basierten WYSIWYG-Baukausten für VueJS. Tiptap ist highleveliger als Code Mirror und renderless, was wir ausgiebig bequatschen, ebenso wie Collaboration-Features, das junge, knackige Vue und sein Ökosystem und contenteditable 2.0 als mögliches neues (standardbasierte) Fundament für die WYSIWYG-Editoren von morgen.