Javascript текстовый процессор/редактор (или архитектура Google Docs)

Я подумал, что было бы интересно бросить свой собственный текстовый редактор a la Google Docs, просто для любопытства, конечно (ничего общего с изобретательством колеса). Мне было интересно, как приложения, такие как Docs и Zoho Writer, могут получить расширенный макет, например, разделение текста на разных страницах или сохранение заголовков вместе с их контентом, вы знаете, такие редакторы, как TinyMCE или nicedit не будет. Я знаю об использовании designMode и contenteditable, и я слышал, как люди использовали холст, но есть ли лучший способ? Как это удается для настольных офисных комплектов, таких как MS или LibreOffice? Разделение содержимого на отдельные страницы во время их редактирования?

С другой стороны, кто-нибудь знает, как работают новые Документы Google? Кажется, он не использует контент-доступность (Zoho использует designMode) или холст. Из того, что я нашел, это только очень глубокая иерархия <div> s.

Ответ 1

Ваш "вопрос" немного широк, но я постараюсь немного помочь вам:

Google Docs использует скрытый iframe (не display:none, просто тот, который пользователь не может его увидеть) с телом с редактируемым контентом (.docs-texteventtarget-iframe); когда вы видите мерцание каретки, это означает, что редактируемое тело сфокусировано, и все, что вы там пишете, вставлено в DOM (после дезинфекции специальных символов HTML)

Google Docs, как я уже сказал, использует модификацию DOM (не холст или svg); даже каретка немного мигает div.

TinyMCE использует подобный метод, но с полем ввода (вместо тела, редактируемого по содержанию)