Revision 395: ProseMirror und TipTap

Published: Aug. 30, 2019, 8:42 a.m.

In dieser Revision kitzelte unser Gast Philipp K\xfchn (Webseite, Github, Twitter),\nseines Zeichens Gr\xfcnder von Ueberdosis und Scrumpy, unsere Nerven mit den\nneuesten Gruselgeschichten aus der WYSIWYG-Krypta und erz\xe4hlte uns alles \xfcber\nsein eigenes WYSIWYG-Werk Tiptap.\n\n\nUNSER SPONSOR\n\nStoryblok ist ein headless CMS, das die Grenze zwischen einem traditionellen CMS\nund einem Pagebuilder sprengt. Das Verwalten digitaler Inhalte mit einem CMS\nkann eine schwierige Aufgabe sein. Ohne eine visuelle Vorschau arbeiten\nRedakteure oft blind vor sich hin und ben\xf6tigen selbst f\xfcr einfache \xc4nderungen\nAnweisungen. Storyblok bietet die Benutzererfahrung eines Pagebuilders mit einer\nmodernen, vollst\xe4ndig API-basierten Architektur. Das gibt dem Entwickler die\nFreiheit bei der Wahl der Technologie und dem Editor eine selbsterkl\xe4rende und\nintuitive Oberfl\xe4che.\n\n\n\nDu kannst mehr \xfcber Storyblok lesen und ihren kostenlosen Plan ausprobieren, sie\nauf Twitter oder in ihrem Live-Chat erreichen.\n\n\nSCHAUNOTIZEN\n\n[00:03:20] WYSIWYG\n\nWir beginnen mir einer Bestandsaufnahme: das olle HTML-Standard-Attribut\ncontenteditable ist noch immer so gruselig wie es in der Kreidezeit bereits war\nuns seine etablierten Nutzer CKEditor und TinyMCE sind ebenso solide wie\nangestaubt. Leider f\xfchren die diversen Alternativen wie der Medium Editor und\nQuill auf der Haben-Seite kein \u201esolide\u201c zu Felde, sondern gl\xe4nzen eher durch\nBugs (Medium Editor) und Einschr\xe4nkungen (Qill). Solidit\xe4t w\xe4re aber eine der\nKern-Anforderungen einer modernen WYSIWYG-L\xf6sung, zusammen mit stetiger\nWeiterentwicklung (wg. vieler Edge Cases), extremer Anpassbarkeit des UI sowie\nder Unterst\xfctzung dynamischer Inhalte (z.b. @username-Referenzen in Text). Die\nheute g\xe4ngige Grundlage eines jeden WYSIWYG-Editors mit Unterst\xfctzung f\xfcr die\ngenannten Features ist ProseMirror aus der Feder von Marijn Haverbeke (Webseite,\nGithub, Twitter), das eher ein Editor-Toolkit als ein WYSIWYG-Editor ist.\nProseMirror ist, anders als CodeMirror, sehr lowlevelig und sogleich verlieren\nwir uns in diversen Details. Damit sich aber nicht jeder Entwickler in Details\nverlieren muss, hat Philipp TipTap entwickelt, einen CodeMirror-basierten\nWYSIWYG-Baukausten f\xfcr VueJS. Tiptap ist highleveliger als Code Mirror und\nrenderless, was wir ausgiebig bequatschen, ebenso wie Collaboration-Features,\ndas junge, knackige Vue und sein \xd6kosystem und contenteditable 2.0 als m\xf6gliches\nneues (standardbasierte) Fundament f\xfcr die WYSIWYG-Editoren von morgen.