10

ブラウザーのサイズに基づいて ACE エディターのサイズを変更できるようにしたいと考えています。ただし、エディター要素は、ace エディターの API によって初期化されるように明示的にサイズ設定する必要があります。

width:100%/height:400px に設定すると、エディターが機能します。この設定により、エディターの幅をブラウザーの幅に対応させることができます。ただし、エディターの高さには反応しません。

ブラウザのサイズに応じて、エディタのサイズをより柔軟にする方法はありますか?

ありがとう

4

3 に答える 3

12 
function resizeAce() {
  return $('#editor').height($(window).height());
};
//listen for changes
$(window).resize(resizeAce);
//set initially
resizeAce();
于 2012-10-04T02:04:05.487 に答える
4

jpillora の優れたガイダンスの拡張:

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

window.innerHeightIE8+でサポートされており、画面の使用可能領域を取得するのに信頼できるようです. IE9、FF、およびChromeで同じ結果になりました。onまた、ウィンドウのサイズ変更イベントを確実にキャッチするには、jQuery 構文を使用する必要があることもわかりました。

私の場合、コード エディターの右側にcssある要素 (コーディング ヘルプを表示) のサイズを変更しているため、jQuery を使用する必要がありましたが、これが 2 つの要素をまったく同じ高さにする唯一の方法でした。pre

360とは290、ページ上部の垂直方向のスペースを占めるすべてのメニューとタブを説明するために使用する必要があった数字です。それに応じて調整します。

于 2014-03-19T06:00:58.053 に答える
4

https://github.com/ajaxorg/ace-builds/blob/master/editor.html#L14position:absolute;top:0; bottom:0 のように設定します

于 2013-01-01T13:31:57.633 に答える