WYSISYG-Editor: execCommand

[Matthias Scharwies]

Servus!

Hallo Matthias,

angesichts der Komplexität eines WYSIWYG Editors würde ich mir überlegen, das Thema nicht als Tutorial aufzugreifen.

Ja und nein!

Ja!

Die Umsetzung eines einfachsten Editors als Verbesserung der HTML-Spielwiese scheint wohl mit nur wenig Code zu gehen. contenteditable scheint die gesamte Arbeit zu machen. Was 200x mit getSelection() und createRange() alles von Hand gemacht werden musste, ist jetzt schon drin (in diesem schon wieder obsoleten execCommand). In contenteditable gibt's aber wohl einige Bugs (Enter erzeugt div anstelle von br! - siehe Wiki-Artikel). So ein Beispiel ist nicht praktikabel!

Solche Überlappungen sauber zu erkennen ist absolut nicht trivial. Der Kollege, den Du da bei Stackoverflow verlinkst, benennt sicher nicht zu Unrecht immense Zeitaufwände bei der Umsetzung.

Nein, oder doch?

Im Originalartikel ging's drum mit getSelection() und createRange Text zu markieren, zu selektieren und dann eben die Tags (damals BBCode, heute HTML) vorne und hinten dran zu basteln.

Evtl. könnte man den fehlerhaften, buggigen contenteditable-Editor vorstellen, problematisieren und dann diese Methoden vorstellen.

Zum Schluss kann man auf die MDN verlinken:

• Making content editable
  • A simple but complete rich text editor
  • more complete rich-text editor example.

Wir müssen uns die Frage stellen, was wir leisten können: Anfänger-Tutorials auf Deutsch, oder ab und zu eben auch was Fortgeschrittenes. Ich stoße da schon lange an meine Grenzen.

Der Redakteur von working-draft schlug vor, etwas zu react zu schreiben. Dann sollten wir (der Verein, die Community) aber auch in der Lage sein, dies per peer review zu begutachten und in ein paar Jahren zu aktualisieren.

Herzliche Grüße

Matthias Scharwies