Wait rendering ace editor

Question

How can i wait rendering editor after

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

Unfortunately, ace editor doesn't has 'onload' events. I'm trying to use 'change' event, but this event fires many times and last time it fires before rendering html.

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

Fiddle : jsfiddle.net/SdN2Y

Answer 1

This appears to be a bug in editor scrolling functions which do not check if editor and font size caches are up to date.

You can call ace.resize(true) to force synchronous rerendering. (note: do not use this function often since it is slow)

Answer 2

Actually, you can:

[TL;DR]:

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

Ace API does not show all events, but you can search for them with "_signal" keyword on their repo.

More in detail, this is the line in their code that publishes the "afterRender" event: " this._signal("afterRender"); "

In the snippet I'm getting the layout config after a render, please take a look.

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>

Answer 3

Ace doesn't do any async loading by itself, so this depends on the way you are loading ace. If you are using minified script included into page then it will be loaded with page. If you use require or something to download script on demand it's easy to get load event from that.

 ace.edit()

just creates editor synchronously.

You may as well check for DOM ready like :

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

Or by calling out :

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

after the body closing tag </body>.

Answer 4

Using 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");
})()