Работа с событиями документа
API редактора предоставляет удобную систему событий, которая позволяет надстройкам реагировать на разнообразные действия пользователя и внутренние изменения системы.
На эти события можно подписаться, обрабатывать их, а так же отменять регистрацию если отпала необходимость их отслеживания.
Основные события редактора
DocumentChange
Генерируется каждый раз, когда изменяется содержание документа, будь то изменения самого пользователя или изменения, сделанные коллегами в режиме совместного редактирования.
export default {
onInit() {
editorApi.events.subscribe('documentChange', (payload) => {
console.log('Изменился документ:', payload);
});
},
};
EditorError
Запускается при появлении внутренних ошибок в редакторе.
Обычно такое событие сигнализирует о проблемах с внутренними компонентами и требует внимания разработчиков.
export default {
onInit() {
editorApi.events.subscribe('error', (payload) => {
console.error('Ошибка в редакторе:', payload);
});
},
};
SelectionChange
Срабатывает всякий раз, когда меняется состояние выделения текста или позиция курсора.
Оно полезно для синхронизации поведения разных компонентов, зависящих от активности пользователя.
export default {
onInit() {
editorApi.events.subscribe('selectionChange', (payload) => {
console.log('Состояние выделения изменилось:', payload);
});
},
};
ViewportChange
Выполняется при каждой смене видимой области документа, например, при прокрутке или масштабировании.
Используется для оптимизации загрузки контента или адаптации UI-компонентов.
export default {
onInit() {
editorApi.events.subscribe('viewportChange', (payload) => {
console.log('Видимая область изменилась:', payload);
});
},
};
Временная регистрация событий
Также возможно подписываться на события всего лишь на короткий промежуток времени, после которого автоматически прекращается обработка события.
Пример временной подписки:
export default {
onInit() {
let timeoutHandle;
// Подписываемся на событие viewportChange
const unsubscribe = editorApi.events.subscribe('viewportChange', (payload) => {
clearTimeout(timeoutHandle); // Сбрасываем таймаут, если сработало раньше
console.log('viewportChange произошло в течение первых 5 сек.', payload);
});
// Устанавливаем таймер отмены подписки через 5 секунд
timeoutHandle = setTimeout(unsubscribe, 5000);
},
};
Подписка на событие один раз
Если необходимо подписаться на событие всего единожды, то можно воспользоваться специальным методом subscribeOnce, который автоматически отписывает обработчик после первого же срабатывания события.
Пример однократной подписки на событие изменения видимости окна редактора:
export default {
onInit() {
// Однократная подписка на событие изменения видимой области документа
editorApi.events.subscribeOnce('viewportChange', (payload) => {
console.log('Видимая область изменилась:', payload);
});
},
};
Особенности метода
- Обработчик вызывается только один раз.
- Автоматическое удаление обработчика после первого запуска события.
- Удобно для простых случаев, когда нужно произвести какое-то действие всего один раз (например, загрузить начальные данные или провести первую настройку компонента).
Альтернативный вариант: временная подписка через обычную подписку и таймер
Если по каким-то причинам не хочется использовать метод subscribeOnce, можно самостоятельно установить временное ограничение через классический таймер как описано выше.