Waiting for rendering ace editor

Question

How can I wait for the rendering editor after

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

Unfortunately, the ace editor has no "onload" events. I am trying to use the "change" event, but this event fires many times, and the last time it fires before html rendering.

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

Fiddle: jsfiddle.net/SdN2Y

Answer 1

This is apparently a bug in the scroll functions of the editor, which do not check if the caching in the editor and the font size are updated.

You can call ace.resize(true)to force synchronous repeat play. (note: do not use this function often, as it is slow)

Answer 2

, :

[TL; DR]:

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

API Ace , "_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.imtqy.com/ace-builds/src-min-noconflict/ace.js"></script>
<pre id="anEditor">
  function helloWorld(){
    return "Hello, World!"
  }
</pre>

Hide result

Answer 3

Ace async , . - script, , . - script , .

 ace.edit()

.

DOM :

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

, :

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

</body>.