Zur Bearbeitung von Texten innerhalb einer Webseite gibt es verschiedene Lösungen: TinyMCE, CodeMirror (wird von CodiMD verwendet), HyperMD.
Leider basteln alle diese Editoren irgendwas mit versteckten Eingabefeldern und vielem Voodoo zusammen, weshalb es zu Problemen kommt:
- Am Ende funktionieren die Tastenkombinationen des Browsers nicht, da ich bei mir nicht die Standardbelegung verwende,
- die mittlere Maustaste funktioniert nicht zum Einfügen,
- die reguläre Zwischenablage funktioniert bei CodiMD auch nicht,
- die Rechtschreibkontrolle funktioniert nicht oder wird selbst nachgebaut
Deshalb suche ich noch nach einem brauchbaren Editor mit Markdown-Unterstützung. Man kann eigentlich mit dem Attribut contenteditable ein div zu einem Eingabefeld machen und darin auch die Formatierung realisieren. Mit einem entsprechenden Event-Handler für input sollte sich eine Formatierung während der Eingabe erreichen lassen.
## Eine Überschrift
Absatz in rot.
Auch unformatierter Text lässt sich darstellen
`<title>Überschrift …</title>` und [Verweise](/), nur sollte man bei diesen das Click-Event nur mit
Shift durchlassen.
Weiteres
Übersichten
- Liste von Editoren mit contenteditable bei Stackoverflow
- Online-Editoren in der deutschen und englischen Wikipedia
- Artikel über mehrere Editoren
Editoren
- Prosemirror als WYSIWYG-Editor mit
Markdown-Unterstützung und
Bildern.
- das Linting-Beispiel sieht auch sehr interessant aus.
- Create.js ist ein Framework für Editoren
- in Kombination mit Hallo-Editor und kann Markdown erzeugen; verwendet allerdings jQuery
- Medium-Editor: zeigt über einer Markierung eine Leiste zur Formatierung an; klein, aber sehr handlich; es gibt Anpassungen für React und Erweiterungen für Bilder und Tabellen
- Etch.js ein Editor mit backbone.js
Technische Details
- Eine Anleitung zur Erstellung eines einfachen Editors mit contenteditable
- Blog-Post von WhatWG zu contenteditable
- eine Analyse anhand des Medium-Editors, weshalb contenteditable und das erzeugte HTML unbrauchbar ist
- Todo: Beherrschen die Editoren von Stackoverflow oder Github noch irgendwas interessantes?