等待渲染王牌编辑器

Question

我怎么能等待渲染编辑器

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

不幸的是,ace编辑器没有'onload'事件.我正在尝试使用'change'事件,但是这个事件会多次触发,并且在渲染html之前最后一次触发.

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

小提琴:jsfiddle.net/SdN2Y

Answer 1

这似乎是编辑器滚动功能中的一个错误,它不会检查编辑器和字体大小缓存是否是最新的.

您可以调用ace.resize(true)强制同步重新渲染.(注意:不要经常使用此功能,因为它很慢)

Answer 2

实际上,您可以:

[TL; DR]:

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

Ace API不会显示所有事件,但您可以在其repo上使用"_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>