☰

Ace Cloud 9 エディターでコンテンツの高さを自動的に調整する 質問する

tag-icon • tag-icon javascript ace-editor
Ace Cloud 9 エディターでコンテンツの高さを自動的に調整する 質問する

私は追加しようとしていますエース編集者ページに要素を追加したいのですが、その内容の長さに応じて高さを自動的に設定する方法がわかりません。

理想的には、コンテンツが変更されると高さが再計算されるように機能しますが、ページの読み込み時に高さが設定されれば満足です。

JavaScript 初心者の私に対して、コードの長さ、コードが何行に及ぶか、新しい高さはどれくらいか、これを反映するために DOM をどのように更新するかなど、どのように計算すればよいか教えていただけませんか?

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

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

ベストアンサー1

（更新：私は現在これに取り組んでいませんが、私の回答は古くなっている可能性があります。他の人が提供したものを取り入れるために、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);
}

おすすめ記事