contenteditable

[Matthias Scharwies]

Servus!

Ich würde gerne eine editierbare Tabelle realisieren und hatte irgendwie gedacht, dass das ein Use-Case für contenteditable wäre.

Da ich aber nur Zahleneingaben in einer Spalte haben möchte, eignet sich hier input type="number"wohl besser, da ich mir dann die Validierung mit JS erspare. Oder sollte ich nur die td auf contenteditable="true" setzen?

Bezüglich contenteditable an sich habe ich ein bisschen (auch im Forum) recherchiert, das ist ja wohl wieder so etwas, was die Welt so nicht braucht.

Besonders lustig fand ich den im Forum angesprochenen Umbruch von

<br type="_moz">

bzw.

<br type="_moz"></br>

Welchen use case könntet ihr euch vorstellen, indem so etwas besser als ein textarea-Element ist? Was ist eigentlich Rich text - bzw. welchen Nutzen hat das im WebDesign?

Zur Benutzerfreundlichkeit/ Formatierung mit CSS? Wie sollte man dem Benutzer kenntlich machen, dass er hier editieren darf? Nur mit einer Textbotschaft? Das Texteingabezeichen (caret) erscheint ja erst, wenn man reinklickt. Also müsste man irgendwie einen Stift anzeigen, evtl als cursor-Symbol oder gleich als Pseudoelement an alle zu ändernden Bereiche dranflanschen?

Ich bitte um eure Anregungen und Vorstellungen!

Herzliche Grüße

Matthias Scharwies

[marctrix]

Hej Matthias,

Zur Benutzerfreundlichkeit/ Formatierung mit CSS? Wie sollte man dem Benutzer kenntlich machen, dass er hier editieren darf?

Ich würde es wie ein Texteingabefeld gestalten.

Marc

[Felix Riesterer]

Lieber Matthias,

Ich würde gerne eine editierbare Tabelle realisieren

was genau soll man editieren können? "Nur" die Zelleninhalte, oder auch die Anzahl Spalten/Zeilen?

und hatte irgendwie gedacht, dass das ein Use-Case für contenteditable wäre.

Vielleicht, aber da musst Du Deinen Anwendungsfall noch genauer beschreiben.

Da ich aber nur Zahleneingaben in einer Spalte haben möchte, eignet sich hier input type="number"wohl besser, da ich mir dann die Validierung mit JS erspare.

Eben!

Oder sollte ich nur die td auf contenteditable="true" setzen?

Zu welchem Zweck? Willst Du als Ergebnis das Folgende haben?

<td>
    <b>7</b><i>5</i>
    <a href="https://de.wikipedia.org.de">Wikipedia-Artikel</a>
    <h1>20 Dinge, die Dich täglich schlauer machen</h1>
</td>

Bezüglich contenteditable an sich habe ich ein bisschen (auch im Forum) recherchiert, das ist ja wohl wieder so etwas, was die Welt so nicht braucht.

Doch, WYSIWYG-Editoren wie z.B. TinyMCE bauen darauf auf. Meines Wissens nach sogar die Syntaxhighlighter, die schon beim Eingeben von Code diesen einfärben/gestalten. Probiere doch einmal ein Frickel unter Entwicklertools aus!

Besonders lustig fand ich den im Forum angesprochenen Umbruch von

<br type="_moz">

bzw.

<br type="_moz"></br>

Damit wurde wohl (war zu faul den Link zu klicken) das bekannte Usability-Problem gelöst, wie man nach einer Tabelle als letztem Element im Dokument eine Leerzeile für neue Texteingaben schaffen kann. Die WYSIWYG-Editoren nutzen eine sehr ähnliche Herangehensweise für diese Dinge.

Welchen use case könntet ihr euch vorstellen, indem so etwas besser als ein textarea-Element ist?

Im Grunde eine Art "online word processor", also alles, was einen WYSIWYG-Editor benötigt. Man kann Elemente im Dokument "auf Knopfdruck" editierbar machen, wobei ihr Platz im Dokument vorübergehend zu einem Editierfenster wird, um so eine Grundstruktur des Dokuments zu erhalten. Oder, oder oder.

Was ist eigentlich Rich text - bzw. welchen Nutzen hat das im WebDesign?

Welches Suchergebnis hat bei Dir Zweifel zurück gelassen?

Zur Benutzerfreundlichkeit/ Formatierung mit CSS?

Nein, mit (hoffentlich meist) semantischen Elementen wie <em>/<strong> oder <i>/<b> und Dingen wie Hyperlinks. Um Listen, Tabellen oder andere verschachtelte Strukturen einfügen zu können, benötigt man entweder einen Editor (also eine JS-gesteuerte Eingabehilfe), oder man macht copy&paste aus anderen Quellen.

Wie sollte man dem Benutzer kenntlich machen, dass er hier editieren darf? Nur mit einer Textbotschaft?

Mit einem passenden Symbol?

Das Texteingabezeichen (caret) erscheint ja erst, wenn man reinklickt. Also müsste man irgendwie einen Stift anzeigen, evtl als cursor-Symbol oder gleich als Pseudoelement an alle zu ändernden Bereiche dranflanschen?

Eben. Die Usability oder user experience wird durch contenteditable nicht automatisch gewährleistet.

Liebe Grüße,

Felix Riesterer.

[Matthias Scharwies]

Servus!

Ich würde gerne eine editierbare Tabelle realisieren

was genau soll man editieren können? "Nur" die Zelleninhalte, oder auch die Anzahl Spalten/Zeilen?

Da ich aber nur Zahleneingaben in einer Spalte haben möchte, eignet sich hier input type="number"wohl besser, da ich mir dann die Validierung mit JS erspare.

Eben!

Also, kein Anwendungsfall für contenteditable!

Oder sollte ich nur die td auf contenteditable="true" setzen?

Bezüglich contenteditable an sich habe ich ein bisschen (auch im Forum) recherchiert, das ist ja wohl wieder so etwas, was die Welt so nicht braucht.

Doch, WYSIWYG-Editoren wie z.B. TinyMCE bauen darauf auf. Meines Wissens nach sogar die Syntaxhighlighter, die schon beim Eingeben von Code diesen einfärben/gestalten. Probiere doch einmal ein Frickel unter Entwicklertools aus!

Ja, das wäre ein Anwendungsfall! Die meisten Beispielen (auch unseres) lassen nur ein p-Element editierbar.

Bis jetzt habe ich gefunden:

• Editor - da würde ich aber gerne wissen, wie das funktioniert. Ein Zeilenumbruch löst einen neuen Absatz oder ein li aus, aber wie füge ich jetzt inline-Elemente oder eine neue Tabellenzeile ein? Wsl. mit einem Kontextmenü o.ä

• Test für ein Seitenlayout - body auf contenteditable setzen und ausprobieren. Wenn's gefällt, Änderungen speichern

• CSS durch style scoped und style {display: block;} sichtbar machen und Änderungen am CSS gleich ausprobieren.

Besonders lustig fand ich den im Forum angesprochenen Umbruch von

<br type="_moz">

bzw.

<br type="_moz"></br>

Damit wurde wohl (war zu faul den Link zu klicken) das bekannte Usability-Problem gelöst, wie man nach einer Tabelle als letztem Element im Dokument eine Leerzeile für neue Texteingaben schaffen kann. Die WYSIWYG-Editoren nutzen eine sehr ähnliche Herangehensweise für diese Dinge.

Nein, leere Absätze und leere Tabellenfelder haben das als Inhalt.

In Chrome wird's so dargestellt <td></td> == $0

Welchen use case könntet ihr euch vorstellen, indem so etwas besser als ein textarea-Element ist?

Im Grunde eine Art "online word processor", also alles, was einen WYSIWYG-Editor benötigt. Man kann Elemente im Dokument "auf Knopfdruck" editierbar machen, wobei ihr Platz im Dokument vorübergehend zu einem Editierfenster wird, um so eine Grundstruktur des Dokuments zu erhalten. Oder, oder oder.

Was ist eigentlich Rich text - bzw. welchen Nutzen hat das im WebDesign?

Welches Suchergebnis hat bei Dir Zweifel zurück gelassen?

Die Stichwörter Microsoft und rtf. Ich kann mir im Augenblick nur vorstellen, dass man so Kommentare besser formatieren kann.

Und einen Kommentar, bei dem ich die HTML-Struktur vorgebe, würde ich mit mehreren Eingabefeldern (Name, h2, Kommentartext) abdecken.

Aus bei den 3 genannten Fällen, wobei der erste für ein Frickl-Beispiel wohl zu komplex ist, kann ich mir immer noch keinen weiteren Anwendungsfall vorstellen.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

style scoped

Ja gibt’s denn sowas? Nein. War mal so’ne Idee. Wegen fehlender Browserunterstützung wieder aus dem Standard rausgeflogen.

LLAP 🖖

[Matthias Scharwies]

Servus!

style scoped

Ja gibt’s denn sowas? Nein. War mal so’ne Idee. Wegen fehlender Browserunterstützung wieder aus dem Standard rausgeflogen.

Ja, ist mir bei der Auflistung durchgerutscht. Der Wiki-Eintrag ist aber aktuell gewesen.

Ich habe mal eine Unterseite angelegt:

• HTML/Universalattribute/contenteditable

Habt ihr noch Ideen?

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Habt ihr noch Ideen?

1. fertige Layouts als HTML-Spielwiese

Sollte man die „fertigen Layouts“ analog zu diesem Beispiel (contenteditable#HTML-Spielwiese) zu einer HTML-Spielwiese umbauen? Dann bräuchte man nur einen kleinen Hinweis, dass das contenteditable-Attribut wieder aus dem body entfernt werden müsste.

2. primitiver WYSIWYG-Editor

bei createElement gibt es dieses Beispiel (createElement#ein_primitiver_HTML-Editor). Könnte man den mit contenteditable modernisieren? So etwas wie

document.Formular.Elementtyp.options[document.Formular.Elementtyp.selectedIndex].value

würde man heut wohl auch anders lösen. Ein Grundgerüst h1,p,ul,li und dann ein Menü, mit dem selektierter Text einem Element zugeordnet würde. Das würde dann mit createElement und einer Überprüfung (kein h1 innerhalb von p oder ul) erzeugt werden. Was haltet ihr davon?

Hätte jemand Interesse?

Herzliche Grüße

Matthias Scharwies

[marctrix]

Hej Matthias,

Hätte jemand Interesse?

Ja, aber aktuell leider überhaupt keine Zeit. Und was noch wichtiger ist, mir fehlen die nötigen JavaScript-Kenntnisse.

Ich kann aber gerne mal Testen, Rückmeldung geben, mithelfen halt.

Marc

[Matthias Scharwies]

Servus!

Bezüglich contenteditable an sich habe ich ein bisschen (auch im Forum) recherchiert, das ist ja wohl wieder so etwas, was die Welt so nicht braucht.

Doch, WYSIWYG-Editoren wie z.B. TinyMCE bauen darauf auf. Meines Wissens nach sogar die Syntaxhighlighter, die schon beim Eingeben von Code diesen einfärben/gestalten. Probiere doch einmal ein Frickel unter Entwicklertools aus!

Ich habe jetzt lang gesucht, aber dort ist es imho ein textarea und kein normales div mit contenteditable.

Herzliche Grüße

Matthias Scharwies

[Felix Riesterer]

Lieber Matthias,

Bezüglich contenteditable

also gerade interessiere ich mich eher für contentedible...

Liebe Grüße,

Felix Riesterer.

[Matthias Scharwies]

Servus!

Lieber Matthias,

Bezüglich contenteditable

also gerade interessiere ich mich eher für contentedible...

Unsere Mägen sind genau so inhaltsleer wie dein Beitrag. :-)

Liebe Grüße,

Felix Riesterer.

Herzliche Grüße

Matthias Scharwies