HTML5 редактор (contentEditable) со страницами, такими как Google Docs

Question

Я пытаюсь создать веб-приложение для текстового процессора, похожее на Google Docs. Я начал использовать Mercury Editor (который опирается на атрибут contentEditable) и создал редактируемый элемент div, который выглядит как бумажная страница (как это делает Google Документы).

Теперь большая проблема заключается в том, как работать с несколькими страницами, то есть , как определить, когда текст (или другой контент) переполняет высоту страницы, а затем создать новую страницу с разделением контента. Есть несколько сценариев, когда это может произойти:

• Пользователь вводит разрывную строку в конце страницы. Новая страница должна быть создана.
• Пользователь вводит слово и достигает конца страницы. Должна быть создана новая страница, и это слово следует переместить на новую страницу.
• Пользователь вставляет большой текст, и он не помещается полностью на текущей странице. Должна быть создана новая страница, и только новый текст, который не помещается, должен быть перемещен на новую.
• Пользователь вставляет любой другой элемент (например, изображение), который не помещается на текущей странице. С этим элементом должна быть создана новая страница.

Я пытался погрузиться в код Google Docs JS, но выполнить его практически невозможно, так как он сжат. Существует автономная версия Google Docs с украшенным кодом, однако она старая и не обрабатывает несколько страниц.

Любой намек на то, как этого добиться, будет принят.

Answer 1

По сути, вам нужно два div, как это

<div id='pageWrapper'>
    <div id='page' style='max-height: 600px; overflow: hidden;'>
    </div>
</div>

Все, что делает #pageWrapper - это сидеть и выглядеть как страница, весь контент, который кто-то добавляет, добавляется на #page. Каждый раз, когда кто-то добавляет контент, либо вставляя, либо печатая, проверяйте scrollHeight # страницы против ее offsetHeight. Если scrollHeight больше, вы переполнили страницу, и вы можете начать перемещать контент (слово за словом или элемент за элементом) на следующую страницу, пока scrollHeight снова не станет равным offsetHeight.

Если пользователь вставляет разрыв страницы, просто установите высоту # страницы, где бы разрыв страницы не находился, чтобы все, что последует после этого, переполняло страницу. С большими документами это будет непросто, поскольку, если кто-то переполняет страницу 1, контент придется корректировать до любой другой страницы, но я думаю, именно поэтому в Документах Google нет страниц.

Answer 2

Если ваш контейнер имеет фиксированный размер, вы можете использовать событие переполнения для его обнаружения.

window.addEventListener ("overflow", yourFunction, false);