Например, взять тот же гуглодок, что там на главной странице?
Если положить просто textarea, набирать текст в нем можно, и каким-то образом отправлять изменения на сервер тоже. Но как только потребуется возможность одновременного редактирования несколькими пользователями, textarea уже не подходит: прилетают с сервера данные, что кто-то впечатал новое слово в начале документа. Обновить лишь часть текста в textarea нельзя, гонять весь текст - накладно. К меня пока такие варианты:
1. Представить страницу документа как цепочку span'ов (одно слово - один span), и на js реализовать логику текстового контрола. Т.е. когда набираем текст, ловим нажатия клавиш, и добавляем их в текущий span (все на js, без перезагрузки страницы естественно). Если с сервера приходят данные о неком изменении в тексте, дергаем нужный span.
2. Представить страницу документа как анимацию, т.е. с помощью какой-нибудь либы рендерить текст. Тут, кроме логики нажатий клавиш (и, кстати, выделения фрагментов текста с shift), еще придется на js написать логику скрола по документу.
Первый вариант видится проще, но может можно еще проще?
Теоретически можно. Знаю по такому решению «висячих строк». Требует прохода по всему документу. Крайне накладно.
Представить страницу документа как цепочку span'ов (одно слово - один span)
Именно так и поступает Google, только span используется внутри блочных элементов, чтобы грамотно считать clientRects. Блоки а-ля «параграф» преобразуются в блочный элемент (конечно же div, кто бы сомневался). Технически верно, иначе придётся лопатить весь код, а это... Описано в п.1.
Представить страницу документа как анимацию
Поход с div и span зело способствует и анимации. Почему нет?
Если либа анимаций дает нам возможность просто отрисовать текст в заданном XY, получается, что надо на JS написать код, фактически полностью повторяющий логику textarea: курсор, рисовать его, двигать по нажатию стрелок, выделение текста по зажатому шифту, удаление/замена выделенного текста, ввод символов, прокрутка текста и пр. Чувствую сильный запах велосипедов. Нет?
@TimeCoder даже немного не так, как я описал. Вовсе не каждое слово в span. Нам нужен span, чтобы грамотно считать clientRects. Но отдельные слова нет смысла заключать в span — просто текстовые ноды.
А так да — любая работа с Range и Selection однозначно велосипед. Только в этой области решения обычно представляют собой такие комбайны... Не вопрос — подключайте их. На примере обработки висячих строк я понял, как далеки они от народа:)
