Detect Ende von Draft.js Editor mit bestimmter Höhe

Question

Ich versuche, einen einfachen Test-Editor mit Draft.js und React zu machen.

Ich möchte, dass mein Editor wie Word oder LibreOffice aussieht: Eine Seite mit einer bestimmten Höhe und eine neue Seite wird erstellt, wenn Sie den unteren Rand der Seite erreicht haben.

Ich habe einen Editor mit der guten Größe, aber ich habe keinen Weg gefunden zu erkennen, dass die Seite gefüllt ist und eine neue Seite erstellt werden muss.

Hat jemand eine Ahnung davon? Gibt es etwas, was ich in der API verpasst habe, oder muss ich das manuell implementieren?

Answer 1

Sie werden keine einfache Antwort auf diese finden, weil HTML ein Konzept der „Seiten“

nicht

habe ich auf einem Reagieren Komponente gerade arbeite, die die Höhe des Inhalts erkennt und versucht, zu skalieren die Anzahl der Seiten, die für den Inhalt benötigt werden.

https://github.com/moodysalem/react-page-div/

Sie können den Editor innerhalb der Seite div reagieren verwenden, aber beinhalten keine Kontrollen, die sichtbar wird, wenn gedruckt.

Answer 2

Bei meinem Projekt konnte ich den gleichen Ansatz wie Moody anwenden. Manuelles Überprüfen der Höhe des Editor-Containers in ComponentDidUpdate und Hinzufügen eines Div inline mit dem Editor-Container, der einen Rahmen hat und der absolut oben positioniert ist, entspricht der Höhe des Papiers (z. B. 11 Zoll).