Вопрос или проблема
Мне нужно отслеживать изменения содержимого в редакторе Ace. Я изучил множество способов сделать это и хотел бы узнать лучший / наиболее адекватный / канонический способ.
- Меня интересуют только изменения содержимого. Обработчик событий должен срабатывать, когда пользователь вводит/удаляет символы, и мне не нужно знать содержимое.
- У меня нет “мульти-редактора”: одна сессия редактора, без вкладок. Хотя в будущем поддержка нескольких сессий может быть интересной, если это не требует дополнительных затрат.
Вопросы:
- Должен ли я использовать Editor или EditSession?
- Если использовать сессию редактирования, должен ли я обращаться к ней через геттер или напрямую к свойству? (геттер должен быть рекомендованным, но свойство также доступно…)
- Должен ли я слушать “change” или “input”? Примечания:
- Нативные <textarea> используют “input”.
- Есть
editor.on('input', ...),editor.on('change', ...),editSession.on('change', ...), но нетeditSession.on('input', ...).
Ссылки на API:
editor.sessioneditor.getSession()editor.on('input', () => ...)editor.on('change', delta => ...)editSession.on('change', () => ...)
Дополнительный вопрос: при использовании editSession.on('change', () => ...) я заметил, что колбек получает объект “delta”, в то время как ожидается, что колбек не будет предоставлять параметры. Если у кого-то есть объяснение этого…
Ответ или решение
Для эффективного отслеживания изменений содержимого в редакторе Ace необходимо рассмотреть несколько ключевых аспектов, чтобы правильно настроить необходимые обработчики событий. В этом ответе будет дано четкое руководство с ответами на все ваши вопросы.
Выбор между Editor и EditSession
Для вашей задачи правильнее будет использовать объект Editor. Это связано с тем, что Editor предоставляет более высокий уровень абстракции и включает в себя все необходимые функциональные возможности для работы с текстом. Объект EditSession более специализирован и предназначен для управления конкретными аспектами сессии редактирования, таким как изменение текста и его состояние. Однако в вашем случае, когда вы хотите отслеживать только изменения содержимого, использование Editor упростит код и сделает его более читаемым.
Доступ к EditSession: getter или свойство?
Хотя оба способа — использование метода getSession() и прямого доступа к свойству editor.session — работают, предпочтительней использовать getter editor.getSession(). Это соответствует принципам инкапсуляции и чистоты кода. Кроме того, использование геттеров AIDS в понимании структуры API и его изменений в будущих обновлениях.
Слушать "change" или "input"?
В вашем случае лучшим выбором будет прослушивание события "change". Хотя native <textarea> используют событие "input", API Ace предоставляет два варианта: editor.on('input', ...) и editor.on('change', ...). Событие "input" может не срабатывать в некоторых ситуациях, таких как программные изменения содержимого, тогда как событие "change" всегда будет срабатывать при любом изменении сессии, что необходимо для полной уверенности в отслеживании изменений.
Обработка delta-объекта
При использовании editSession.on('change', ...) ваш обработчик будет получать объект delta в качестве параметра, что позволяет вам понимать, какие именно изменения произошли. Если ваш обработчик не ожидает параметров, вы можете его просто игнорировать следующим образом:
editSession.on('change', (delta) => {
// Здесь можно учитывать изменения, если это необходимо
console.log("Изменения произошли, но параметры игнорируются");
});Таким образом, передачи параметра в обработчик — это стандартный подход в Ace Editor, который гарантирует, что ваш обработчик события всегда будет получать актуальную информацию.
Заключение
Итак, обобщая вышесказанное:
- Используйте Editor вместо EditSession для отслеживания изменений.
- Вызывайте метод getSession(), чтобы получить доступ к сессии.
- Подписывайтесь на событие change для надежного реагирования на изменения.
- Не забудьте игнорировать параметр delta в вашем обработчике, если параметры не нужны.
Это обеспечит вам надежную и эффективную систему для отслеживания изменений в содержимом вашего редактора Ace.