Wie funktionieren Texteingaben für Websites wie Codepen, Codecademy und Google Docs?

Question

Sie sind editierbar und verfügen dennoch über benutzerdefinierte Hervorhebungen.

Sie verwenden nicht Textarea. Sie setzen offensichtlich Elemente dort ein, wo es der Text hätte sein sollen. Gibt es einen Guide, der so etwas aufbaut und zeigt, wie Sie herausfinden, wo der Cursor hingeht und so weiter?

neben Reddit sehr wenige populäre Website tatsächlich verwenden Sie das Standard-HTML-Textelement.

Die meisten haben benutzerdefinierte Hervorhebung und alle möglichen Dinge, für die sie HTML generieren, die Aussehen Sie gerade bearbeiten gibt, aber es ist Javascript Nachahmung Textarea/Texteingabe.

Answer 1

Codepen scheint CodeMirror zu verwenden: https://github.com/codemirror/codemirror. Es ist eine freie Open-Source-Bibliothek, die die Anzeige eines Code-Editors ermöglicht.

Die allgemeine Idee ist, dass sie jede Mausposition bei jedem Mausklick (javascript get x and y coordinates on mouse click) erkennen, um einen falschen Cursor anzuzeigen/auszublenden. Sobald der Cursor platziert ist, erkennen sie jeden Tastendruck, um zu bestimmen, was zu tun ist.

Eine Alternative zur Verwendung von komplexem JavaScript ist die Verwendung der contenteditable-Eigenschaft in HTML. Der Inhalt eines solchen div ist in CSS lesbar und kann mit normalem JavaScript bearbeitet werden, was die Manipulation erleichtert. Dies ist, wie Facebook ihre Eingaben macht: