Синхронная прокрутка редактора Ace
У меня есть две одновременные сессии редактора Ace, работающие бок о бок, я пытаюсь синхронизировать вертикальную прокрутку обоих редакторов. Я нашел простой метод jQuery, который работает с обычными дивами, но как я могу адаптировать его для правильной работы с Ace?
Метод JQuery:
$("#editor1").scroll(function () {
$("#editor2").scrollTop($("#editor1").scrollTop());
$("#editor2").scrollLeft($("#editor1").scrollLeft());
});
$("#editor2").scroll(function () {
$("#editor1").scrollTop($("#editor2").scrollTop());
$("#editor1").scrollLeft($("#editor2").scrollLeft());
});
Очевидно, что вышеописанный метод не работает с Ace. Я просматривал здесь API Ace: виртуальный рендерер для решения проблемы, но я даже не могу установить обратный вызов функция при прокрутке в Редакторе.
В API есть ссылка на полосу прокрутки здесь, но никак не могу заставить его что-нибудь сделать. Ив'е попробовал проверить это таким образом...
editor.ScrollBar.on('scroll', function() {
alert('Callback?');
});
Не мог бы кто-нибудь помочь мне в этом деле? :) Спасибо.
EDIT
Решение, приведенное ниже, действительно работает, но (в моем случае) оно почти сразу же приводит к сбою браузера (Chrome). Я установил функцию таймаута на нем, чтобы ограничить, как быстро он может стрелять, но это все равно неизбежно крахи. Идеи?
editor.getSession().on('changeScrollTop', function(scroll) {
setTimeout(function() {
editor2.getSession().setScrollTop(scroll);
}, 1000);
});
2 ответа:
Информация: я добавил обходной путь для сбоя, происходящего при прокрутке к началу
Наконец-то понял:
editor.getSession().on('changeScrollTop', function(scroll) { editor2.getSession().setScrollTop(parseInt(scroll) || 0) });
Вы можете увидеть рабочую демонстрацию здесь на CodePen
В ace есть ошибка, из-за которой ваш код переходит в бесконечный цикл на самом деле scroll-это не число, а объект и редактор.сессия.setScrollTop ({}) приводит к scrollTop = NaN. Следующий код работает нормально
s1 = editor1.session s2 = editor2.session s1.on('changeScrollTop', function() { s2.setScrollTop(s1.getScrollTop()) }); s2.on('changeScrollTop', function() { s1.setScrollTop(s2.getScrollTop()) });