Wiki-Push: Formulare

[Matthias Scharwies]

Hier schon erwähnt: es gibt einige (ver)alt(et)e Artikel im Wiki, die kurzfristg als solche gekennzeichnet werden sollten, langfristig aber überarbeitet 😀 oder schlimmstenfalls doch depubliziert 😟 werden sollten.

Ich habe alles, was wir im JS-Bereich zum Thema Formulare hatten, in einem Kurs zusammengefasst:

JavaScript/Tutorials/Formulare

• Die ersten zwei Kapitel müssen durchgeschaut und korrigiert werden!

• Verkettete Auswahllisten (Chained Selects) ist von 2006 und verlinkte weder auf select, noch wurde von dort dahin verlinkt. Wer opfert sich und schreibt ein modernes Beispiel?

• WYSIWYG-Editor hieß bis eben noch "Formulare: Text an Cursorposition einfügen" und beschireb, wie man den Inhalt einer textarea mit BBCode anreichert. Mir schwebt ein WYSIWYG-Editor mit nur 3-4 Buttons vor, der einfach zeigt, wie's geht. Interessanterweise hatte ich diese Spielwiese in unserem Wiki gefunden: HTML-Spielwiese

Ich würde mich freuen, wenn mir da jemand helfen würde, indem er einen Teil der Aufgaben übernimmt.

[Matthias Scharwies]

Servus!

• WYSIWYG-Editor hieß bis eben noch "Formulare: Text an Cursorposition einfügen" und beschireb, wie man den Inhalt einer textarea mit BBCode anreichert. Mir schwebt ein WYSIWYG-Editor mit nur 3-4 Buttons vor, der einfach zeigt, wie's geht.

Ich hatte eigentlich an contenteditable und document.execCommand gedacht. Dies ist jedoch obsolet:

• MDN: execCommand
• SO: execCommand() is now obsolete, what's the alternative?

I would not say that document.execCommand() is completely dead because some parts of it still work fine. Unfortunately the primary issue for me was that browsers use a lot of different code to generate those styles which are not recognized by screen readers used by those who are blind or nearly so.

Würdet ihr's trotzdem verwenden oder zu Fuß gehen und den selektierten Text mit createElement in Tags packen?

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

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

Eine der größten Schwierigkeiten ist, das Markup bei mehrfachen Aktionen korrekt zu halten.

Zum Besipiel^[1]: "Dieser Satz kein Verb".

Markiere: Satz kein. Setze: FETT

Dieser <span class="bold">Satz kein</span> Verb

Rendert zu: "Dieser Satz kein Verb".

Soweit, so gut.

Markiere: kein Verb. Setze: KURSIV

Naive Logik macht daraus:

Dieser <span class="bold">Satz <span class="italic">kein</span> Verb</span>

Rendert zu: "Dieser Satz kein Verb".

Sollte aber sein:

Dieser <span class="bold">Satz <span class="bold italic">kein</span> <span class="italic">Verb</span>

"Dieser Satz kein Verb".

Ein weiteres Problem ist das Abräumen unnötigen Markups, wenn Formatierungen entfernt werden. Ich habe das in den 80ern bei Wordperfect gehasst (und es nicht lange benutzt), und der WYSIWYMG Editor von MS Sharepoint baut auch heute noch schwere Unfälle.

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.

Rolf

---

1. Das Besipiel ist ein Raubtier aus der Gattung der Orthographoben (Familie Tipfelariae)^[2]. Es lebt unter den Tasten von Computertastaturen und beißt immer wieder einmal unvermittelt zu. Als besonders tückisch ist die Subspezies Fallbesipiel bekannt, die unter der Zimmerdecke Nester baut und sich von dort auf den arglosen Tipper stürrrrffdwq1 ↩︎

2. Auch wenn Tante Google 85200 extante Exemplare der Art zählt, ist dies ist keine Grundlage für ein Zitat! ↩︎

[Der Martin]

Hallo Rolf,

Fallbesipiel

echt jetzt? 😉

Zu deinen restlichen Ausführungen: Volle Zustimmung.

Live long and pros healthy,
 Martin

[MudGuard]

Hi,

Fallbesipiel

echt jetzt? 😉

Meinten Sie: Fallbeilspiel? ;-)

cu,
Andreas a/k/a MudGuard

[kai345]

Fallbesipiel

echt jetzt? 😉

Meinten Sie: Fallbeilspiel? ;-)

Nicht gut. Mit zuviel Spiel kann es sich verklemmen und ist nicht mehr zuverlässig. Wieder korrekt justiert: Hilft zuverlässig bei Nackenschmerzen.

[Der Martin]

Hallo,

Fallbesipiel

echt jetzt? 😉

Meinten Sie: Fallbeilspiel? ;-)

nein, Spielfallbeil.

Live long and pros healthy,
 Martin

[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

[Rolf B]

Hallo Matthias,

also grundsätzlich würde ich heute kein Beispiel mehr schreiben, das auf execCommand aufbaut. Vermutlich funktioniert das auch in 10 Jahren noch, aber es wird dennoch davon abgeraten. Und es ist definitiv keine saubere Schnittstelle, wenn man irgendeiner Dokument-Funktion Befehle für das gerade aktive Eingabefeld rüberwirft.

Es wäre ja zu hoffen, dass das W3C dazu irgendwas standardisiert, aber ich habe dazu jetzt nichts gefunden. Offenbar gehen sie davon aus, dass man es mit einer JS Libary löst.

Ich weiß ja nicht, was die Browserhersteller sich dabei denken. Wo ist der Sinn von contenteditable geblieben, wenn keine Formatierungen möglich sind. Dann kann man doch gleich eine Textarea einbauen.

Das w3.org Wiki fasst es prägnant zusammen:

Dave Raggett: execCommand is a mess

Es gab ja sogar einmal eine HTML Editing API Group beim W3C, um mit der mess aufzuräumen, und auch ein Draft Document dazu. Letzter Stand ist von 2014, und es beginnt mit den Worten (Fettsatz von mir):

The features documented herein are obsolete. Authors should not use these features directly, but instead use JavaScript editing libraries. The features described in this document are not implemented consistently or fully by user agents, and it is not expected that this will change in the foreseeable future.

The mess piles up 😟

Aus meiner Sicht könnte man das Wiki-Beispiel auf den IE+Gecko Zweig reduzieren, dann kurz die Probleme diskutieren und sich danach damit befassen, wie man eine solche Lib verwendet. Dazu müssten sich diejenigen, die sich damit auskennen, eine nicht allzu komplexe Lib dieser Art auswählen. Ja, ich weiß, solche Entscheidungen sind kaum möglich, weil jeder seine eigene Lib mag, und man weiß nie, welche Lib heute top und morgen flop ist.

Mein Problem: Ich habe hier keine Expertise.

Rolf

[Felix Riesterer]

Lieber Rolf,

Aus meiner Sicht könnte man das Wiki-Beispiel auf den IE+Gecko Zweig reduzieren, dann kurz die Probleme diskutieren und sich danach damit befassen, wie man eine solche Lib verwendet.

volle Zustimmung!

Dazu müssten sich diejenigen, die sich damit auskennen, eine nicht allzu komplexe Lib dieser Art auswählen.

TinyMCE!

1. ZIP-Datei downloaden
2. Formular entsprechend erstellen

Ja, ich weiß, solche Entscheidungen sind kaum möglich, weil jeder seine eigene Lib mag, und man weiß nie, welche Lib heute top und morgen flop ist.

Jein. Es haben sich in meinen Augen diese zwei major players in diesem Bereich etabliert, die es schon seit mehr als 10 Jahren gibt:

1. TinyMCE
2. CKEditor

Liebe Grüße

Felix Riesterer

[Tabellenkalk]

Hallo,

Als besonders tückisch ist die Subspezies Fallbesipiel bekannt, die unter der Zimmerdecke Nester baut und sich von dort auf den arglosen Tipper stürrrrffdwq1

Vermutlich ein Verwandter der Tüpfelhäher…

Gruß
Kalk