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>

Answer 3

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>之后。

Answer 4

使用es7异步/等待。

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

等待渲染王牌编辑器

4 个答案: