Дождитесь рендеринга редактора ace

Как я могу ждать редактор рендеринга после

editor = ace.edit("editorId");
editor.setValue(myCode, pos);

К сожалению, в редакторе ace нет событий загрузки. Я пытаюсь использовать событие «change», но это событие срабатывает много раз, и в последний раз оно срабатывает перед рендерингом html.

editor.on('change', function changeListener() {              
    if(isCodeInserted) {
         //do something        
         editor.removeEventListener('change', changeListener);
    }
});

Скрипт: jsfiddle.net/SdN2Y


javascript ace-editor
person Boris Kirov    schedule 17.01.2014    source источник
comment
jsfiddle.net/SdN2Y scrollToLine не работает, потому что редактор еще не виден.   -  person Boris Kirov    schedule 17.01.2014

Ответы (4)


arrow_upward
7
arrow_downward

Похоже, это ошибка в функциях прокрутки редактора, которые не проверяют актуальность кешей редактора и размера шрифта.

Вы можете вызвать ace.resize(true) для принудительного синхронного повторного рендеринга. (примечание: не используйте эту функцию часто, так как она работает медленно)

person a user    schedule 17.01.2014
comment
Спасибо за это! Мне нужно поместить значок внутри фрейма редактора (при изменении), но я хочу учитывать полосы прокрутки — я могу найти смещение полосы прокрутки следующим образом: $(".ace_scrollbar-v").css("width", "auto").width() - person dalgard; 27.04.2014

arrow_upward
7
arrow_downward

На самом деле вы можете:

[TL;DR]:

editor.renderer.on('afterRender', function() {
    // Your code...
});

Ace API не показывает все события, но вы можете искать их по ключевому слову "_signal" на их репо.

Более подробно, это строка в их коде, которая публикует событие "afterRender": " this._signal("afterRender"); "

Во фрагменте я получаю конфигурацию макета после рендера, пожалуйста, посмотрите.

var editor = ace.edit("anEditor");

editor.renderer.on('afterRender', function() {
  let config = editor.renderer.layerConfig;
  console.log("afterRender triggered " + JSON.stringify(config));
});
#anEditor {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
<script src="https://ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js"></script>
<pre id="anEditor">
  function helloWorld(){
    return "Hello, World!"
  }
</pre>

person David I. Samudio    schedule 13.06.2016

arrow_upward
0
arrow_downward

Ace сам по себе не выполняет асинхронную загрузку, так что это зависит от того, как вы загружаете ace. Если вы используете минимизированный скрипт, включенный в страницу, он будет загружен вместе со страницей. Если вы используете require или что-то еще для загрузки скрипта по запросу, из него легко получить событие загрузки.

 ace.edit()

просто создает редактор синхронно.

Вы также можете проверить готовность DOM, например:

$(document).ready(function() {
    editor = ace.edit("editorId");
    editor.setValue(myCode, pos);
});

Или по вызову:

    editor = ace.edit("editorId");
    editor.setValue(myCode, pos);

после закрывающего тега body </body>.

person Roy M J    schedule 17.01.2014
comment
Ace загружается синхронно, но html еще не готов. Сессия уже существует, но не HTML. - person Boris Kirov; 17.01.2014
comment
то есть код загружен в редактор, но еще не виден. Мне нужно знать, когда код будет виден. - person Boris Kirov; 17.01.2014
comment
Вы можете попробовать создать скрипку или ссылку на вашу проблему? - person Roy M J; 17.01.2014
comment
Я добавил пример - jsfiddle.net/SdN2Y - person Boris Kirov; 17.01.2014

arrow_upward
0
arrow_downward

Использование es7 async/await.

(async () => {
    await import('https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.7/ace.js').catch((error) => console.log('Loading failed' + error))
    let ed = await ace.edit("target_DIV_id");
})()
person NVRM    schedule 25.01.2020