ACE代码编辑器 - 多个编辑器的自动高度

Question

我正在尝试在同一html页面上做以下所有事情：

1. 将多个ACE编辑器放在同一页面
2. 无需定义每个编辑器自己的ID标签
3. 无需定义每个编辑器自己的高度
4. 每个编辑器的高度将根据其默认文本自动初始初始化
5. 在添加文本时，每个编辑器的高度将自动增长并在删除文本时自动减少

我使用此代码：https：//stackoverflow.com/a/27114508/5354360 for 1.和2。

我使用此代码：https：//stackoverflow.com/a/13579233/5354360 for 3. 4. 4. 5.

每个代码本身都非常有效，但是当我尝试组合它们并在同一页面中创建多个编辑器时，根据最后一个编辑器设置高度。

我应该如何修复代码？

谢谢！

我的代码：

<script type = "text/javascript" src = "http://code.jquery.com/jquery.min.js"></script>
<script src = "https://ace.c9.io/build/src/ace.js" type = "text/javascript" charset = "utf-8"></script>
<script>
$(document).ready(function()
{
	$('.ace_editor').each(function()
	{
		var editor = ace.edit(this);
		editor.setTheme("ace/theme/monokai");
		editor.getSession().setMode("ace/mode/c_cpp");
		var heightUpdateFunction = function()
		{
			var newHeight = editor.getSession().getScreenLength() * editor.renderer.lineHeight;
			editor.setOptions({ maxLines: Infinity });
			editor.resize();
		};
		heightUpdateFunction();
		editor.getSession().on('change', heightUpdateFunction);
	});
});
</script>
<pre class = "ace_editor" style = "width:50%;">
#include < iostream >
usimg namespcse std;
int main ()
{
	for (int i = 0; i < 10; i++)
		printf ("%d", i);
	return 0;
}
</pre>
<br>
<pre class = "ace_editor" style = "width:50%;">
for (int i = 0; i < 10; i++)
	printf ("%d", i);
}
</pre>

Answer 1

您使用的是全局编辑器变量，因此HeeperUpDateFunction始终在最后一个编辑器上使用。

，最好将内置的方法用于调整大小

editor.setAutoScrollEditorIntoView(true);
editor.setOption("maxLines", 30);

https://github.com/ajaxorg/ace/blob/v1.2.6/demo/autoresize.html#l40-l41

Answer 2

好吧，我发现自己的错误。刚替换：$（'。编辑器'）。高度（newHeight.toString（） " px"）;和：editor.setoptions（{maxlines：infinity}）;并全部修复。