Question

我想让ACE编辑器根据浏览器进行调整尺寸。但是，必须明确调整编辑器元素的大小由ace编辑器的API初始化。

当我设置宽度时编辑器工作：100％/高度：400px。使用此设置允许编辑器的宽度响应浏览器的宽度。但是，对编辑的高度没有反应。

有没有办法通过响应浏览器的大小来使编辑器的大小更灵活？

由于

Answer 1

function resizeAce() {
  return $('#editor').height($(window).height());
};
//listen for changes
$(window).resize(resizeAce);
//set initially
resizeAce();

Answer 2

设置position:absolute;top:0; bottom:0 比如https://github.com/ajaxorg/ace-builds/blob/master/editor.html#L14

Answer 3

扩展jpillora的出色指导：

function resizeAce() {
    var h = window.innerHeight;
    if (h > 360) {
        $('#editor').css('height', (h - 290).toString() + 'px');
    }
};
$(window).on('resize', function () {
    resizeAce();
});
resizeAce();

IE8 +支持

window.innerHeight，并且对于获取屏幕的可用区域似乎可靠。我在IE9，FF和Chrome上得到了相同的结果。我还发现我必须使用jQuery on语法来可靠地捕获窗口大小调整事件。

我需要使用jQuery css，因为在我的情况下，我正在调整位于代码编辑器右侧的pre元素（显示编码帮助），这是唯一的方法使这两个元素达到完全相同的高度。

360和290是我需要用来计算占据页面顶部垂直空间的所有菜单和标签的数字。相应调整。

根据浏览器的大小调整ajax.org ACE编辑器的大小

3 个答案: