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

Question

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

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

Answer 1

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

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

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

TinyMCE использует аналогичную технику, но с полем ввода (вместо тела, доступного для редактирования)