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

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

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

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

360和290是我需要用来说明占据页面顶部垂直空间的所有菜单和选项卡的数字。相应调整。