67

Ace エディターをページに追加しようとしていますが、コンテンツの長さに基づいて高さを自動的に設定する方法がわかりません。

コンテンツが変更されたときに高さが再計算されるように機能するのが理想的ですが、ページの読み込み時に高さが設定されるだけで十分です。

JavaScript の初心者の場合、コードの長さ、コードの長さ、新しい高さ、DOM を更新してこれを反映する方法を理解するのを手伝ってくれる人はいますか?

Google グループでこの提案を見つけましたが、それが何をしているのか、高さを調整する方法がよくわかりません。

editor.getSession().getDocument().getLength() *
editor.renderer.lineHeight + editor.renderer.scrollBar.getWidth()
4

9 に答える 9

98

（更新：現時点ではこれに取り組んでいませんが、私の答えは古くなっている可能性があります。他の人が提供したものを試して組み込むために、minLines および maxLines プロパティの言及をエコーし​​ます。

editor.setOptions({
    maxLines: Infinity
});

どうやら無限大は「非常に大きなドキュメントでも仮想ビューポートが無効になるため、あまり良い考えではありません」。したがって、制限を選択する方が良い場合があります。

歴史のために、古い答えは次のとおりです。

あなたが引用した投稿は、文字の高さがわかっている固定幅フォントであり、ドキュメントの行数がわかっているという前提で動作しているだけです。これを掛け合わせると、コンテンツの高さのピクセル数が得られます。文字が押されるかカット/ペーストが発生するたびに (行が追加または削除される可能性があります)、JavaScript を使用して、この具体的な新しいサイズを CSS スタイルで DOM 内の項目に適用することをお勧めします。

（彼らはスクロールバーの「幅」を高さの計算に投入します。正直なところ、その背後に理論的根拠があるかどうかはわかりません。他の誰かにその部分を理解させます。）

とにかく...ソフト ラップをオンにしている場合、レンダリングされたスクリーンの行数は、ドキュメント内の「実際の」行数よりも多くなる場合があります。editor.getSession().getScreenLength()そのため、よりも使用する方が良いですeditor.getSession().getDocument().getLength()。

エディター (位置: 絶対) をセクション (位置: 相対) 内に配置しましたが、それはそのセクションに存在する唯一の項目です。このコードは今のところ機能しているようです。詳細がわかり次第更新します...!

$(document).ready(function(){

    var heightUpdateFunction = function() {

        // http://stackoverflow.com/questions/11584061/
        var newHeight =
                  editor.getSession().getScreenLength()
                  * editor.renderer.lineHeight
                  + editor.renderer.scrollBar.getWidth();

        $('#editor').height(newHeight.toString() + "px");
        $('#editor-section').height(newHeight.toString() + "px");

        // This call is required for the editor to fix all of
        // its inner structure for adapting to a change in size
        editor.resize();
    };

    // Set initial size to match initial content
    heightUpdateFunction();

    // Whenever a change happens inside the ACE editor, update
    // the size again
    editor.getSession().on('change', heightUpdateFunction);
}
于 2012-11-27T07:21:23.403 に答える
35

Ace は次のオプションを提供していますmaxLines。

editor.setOptions({
    maxLines: 15
});

http://jsfiddle.net/cirosantilli/9xdkszbz/

于 2013-10-08T07:24:19.900 に答える
13

更新: Dickeylth の回答を参照してください。これはすべてまだ機能します (そして、人々はまだ便利だと思っているようです) が、基本的な機能は現在 ACE に組み込まれています。

「Ace Cloud9 エディターのコンテンツの高さを自動的に調整する」には、コンテンツが編集されるたびに、それを含む div に合わせてエディターのサイズを変更するだけです。あなたがから始めたと仮定すると<div id=editor>...

var editor = ace.edit("editor");                   // the editor object
var editorDiv = document.getElementById("editor");     // its container
var doc = editor.getSession().getDocument();  // a reference to the doc

editor.on("change", function() {
    var lineHeight = editor.renderer.lineHeight;
    editorDiv.style.height = lineHeight * doc.getLength() + "px";
    editor.resize();
});

エディターが存在する div のサイズを変更し、呼び出しeditor.resizeてエディターに div を補充させます。

ACE を行の折り返しに設定して、長い行を含むコンテンツを貼り付けると、新しい行の数と実際にレンダリングされる行の数が異なるため、エディターがスクロールします。このコードはそれを修正しますが、代わりに水平スクロールが表示されます。

editor.getSession().setUseWrapMode(false)
于 2013-10-28T04:38:53.033 に答える
1

私が好むことを除いて、受け入れられた回答に同意しeditor.getSession().getScreenLength()ます。

問題は、折り返しモードを有効にすると、長い行が複数の行に分割される可能性があることです。したがって、 で正しい行数を取得することはできませんeditor.getSession().getDocument().getLength()。

于 2013-10-12T03:11:07.390 に答える
0

純粋な JavaScript でeditor-containerの私のメソッド (正しい ID に置き換えます)。

function adaptEditor() {
    document.getElementById('editor-container').style.height = window.innerHeight + 'px';
    editor.resize();
}
window.onresize = function(event) {
    adaptEditor();
};
adaptEditor();
于 2014-06-28T17:25:31.757 に答える