contenteditable

[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.