Question

我正在尝试在同一个HTML页面上执行以下所有操作：

在同一页面中放置多个ACE编辑器
不需要为每个编辑器定义自己的ID标签
不需要为每个编辑器定义自己的HEIGHT
每个编辑器的高度将根据其默认文本
每个编辑器的高度在添加文本时会自动增长，并在从文本中删除时自动缩小

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

我使用此代码：https://stackoverflow.com/a/13579233/5354360表示3. 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

您正在使用全局编辑器变量，因此heightUpdateFunction始终适用于最后一个编辑器。

但最好使用内置方法来调整大小

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

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

Answer 2

好的，我发现了自己的错误。刚刚更换： $（＆＃39; .editor＆＃39;）。height（newHeight.toString（）+＆＃34; px＆＃34;）; 有： editor.setOptions（{maxLines：Infinity}）; 并且全部修好了。

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

2 个答案: