Online-Editor mit "Live-Vorschau": links befindet sich ein Textfeld und rechts ein Vorschaudiv. Immer wenn sich der Textbereich ändert, wird die Vorschau aktualisiert.
Dies funktioniert gut für kleine Dokumente; Bei sehr langen Dokumenten wird es jedoch träge, da die Vorschau viele DOM-Elemente enthält, die ständig neu gezeichnet werden.
Es wäre besser, nur den Teil des Textfelds an die Vorschau zu senden, der gerade sichtbar ist (da es das ist, das in der Vorschau angezeigt werden muss).
Es gibt eine heuristische Methode, um die erste sichtbare Zeile des Textfelds zu erhalten:
Dies funktioniert jedoch nur für "kurze" Zeilen, also Zeilen, die nicht umbrechen. Im Allgemeinen ist die Anzahl der "Zeilen" in einem Textfeld nicht die Anzahl der Zeilenumbrüche ; eine lange Linie ohne Zeilenumbrüche, Wraps und könnte viele "Zeilenräume" belegen.
Man könnte versuchen, die durchschnittliche Anzahl von "Zeilenräumen" zu berechnen, die eine Zeile belegt (durchschnittliche Anzahl von Zeichen zwischen Zeilenumbrüchen, Textbreite, Schriftgröße ...), aber das ist sehr ungenau.
Gibt es eine Möglichkeit, die Position der ersten und letzten sichtbaren Zeichen in einem Textfeld zu kennen?
Nun, als eine verrückte Möglichkeit, es zu tun, können Sie sehen, wie ACE den Text in Leinwand-Linien konvertiert. Ich nehme an, mit diesem Ansatz können Sie die genaue Position bestimmen (oder besser gesagt, die genauen line Objekte, die derzeit sichtbar sind.
Aber das könnte auch eine Art Teufelskreis sein, wenn der Text, der mit der Zeichenfläche erzeugt wird, in der Komplexität kompatibel ist, die Sie in der Vorschau haben.
Alternativ können Sie eine Schriftart mit fester Breite verwenden, die Ihnen die genaue Anzahl der Zeichen in der einzelnen Zeile und damit die genaue Berechnung der ersten / letzten Zeile anzeigt.
Tags und Links javascript textarea