|
Если вкратце, то редактор состоит из следующих составляющих:
1) Элемент ввода-вывода текста. Как правило это невидимая textarea, которой и принадлежит фокус ввода, и которая подставляется под мышку при правом клике. Все изменения содержимого отлавливаются редактором и отражаются в области отображения кода. Впринципе, вместо текстарии можно использовать div.contenteditable для всего редактора и либо ставить курсор в невидимый элемент и эмулировать его через какойнибудь span, либо оставить реальным. Однако тут будут проблемы с firefox, так как он не позволяет отлавливать копирование/вставку текста. Плюс много других проблем.
2) Область отображения текста. Тут все довольно просто, если не нужно особой производительности. Имеем кучу div-ов - каждый div представляет собой строку. В нем уже идут span-ы, представляющие собой токены. Все изменения содержимого редактора отражаются тут. Для больших документов используется хитрый трюк - создаются div-ы только для видимых в данный момент элементов, а при прокрутке они меняются, создается впечатление прокрутки. При этом скроллбар выносится в отдельный элемент. Прокрутка колесом мыши полностью управляется редактором.
3) область подсветки выделенного текста, и других выделений. Тоесть тут отображаем фэйковое выделение.
Внутри же редактор это обычно:
Selection - отвечает за выделение
Tokenizer - обычно работает в отдельном потоке как webworker, чтоб не тормозить UI. Берет набор правил ввиде массива состояний и регулярок. Запоминает начальные состяния каждой строки, чтоб при изменении пере-размечать текст начиная с измененной линии, а не с начала. Должен уметь прерываться, чтоб при частом изменении документа не выполнять лишнюю работу.
UndoManager - запоминает изменения. В хорошей реализации держит в памяти только дельты, то-есть разницы, а не целиком тексты
CommandManager - набор команд и управление ими. Часто даже элементарные действия как перемещение курсора стрелкой также хранятся и управляются тут же.
Как я помню, CodeMirror изначально работал на iframe+designMode, имел натуральный курсор и выделение. (прошлый век)
Потом стал использоваться contenteditable. (много проблем, особенно из-за FireFox)
Затем если не ошибаюсь - textarea для ввода + имитация выделения и курсора. (самый эффективный способ, хотя и тут есть куча недостатков)
Я не рекомендую CodeMirror для изучения, хотя он проще чем Ace.
Дело в том что в нем все свалено в одну кучу, в один файл. Код не особо читабелен. Разработчик одно время считал что это улучшает производительность (я про один файл, а не читабельность)
В Ace все сделано очень грамотно и красиво (местами не очень), рекомендую для изучения исходников. Хотя реализация достаточно сложная (в угоду производительности и функциональности)
Кстати, ща работаю над расширением для Chrome, которое позволит заменять на сайтах текстарии редактором (Ace). Например на этом сайте будет удобно писать куски кода на javascript. Можно сказать, будет встроенный Sublime Text в браузер, причем на любом желаемом сайте.
|