web-dev-qa-db-ja.com

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

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

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

JavaScript初心者の場合、誰かがコードの長さ、それがまたがる行数、新しい高さ、そしてこれを反映するためにDOMを更新する方法を見つけるのを手伝ってくれますか？

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

editor.getSession().getDocument().getLength() *
editor.renderer.lineHeight + editor.renderer.scrollBar.getWidth()
javascriptace-editor
57
limitlessloop

（更新：私は現時点ではこれを使用していませんが、私の答えは古くなっている可能性があります。他の人が提供したものを試して取り入れるために、

_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);
}
_
83
HostileFork

Aceには次のオプションがあります：maxLines

editor.setOptions({
    maxLines: 15
});

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

32
Dickeylth

更新： Dickeylth's answer を参照してください。これはすべて機能します（そして、人々はそれがまだ有用であると思われます）が、基本的な機能は現在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)
11
Carl Smith

解決策は、エディターの行数をカウントしてから、これらの行に合わせてサイズを変更することだと思います。

editor.setOptions({
     maxLines: editor.session.getLength()
});

お役に立てれば。

7
René Fernández

JQueryを使用できます。

 var length_editor = editor.session.getLength();
 var rows_editor = length_editor * 17;

 $('#editor').css('height',rows_editor);
2
JohnDoe Doe

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

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

1
AKFish

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

function adaptEditor() {
    document.getElementById('editor-container').style.height = window.innerHeight + 'px';
    editor.resize();
}
window.onresize = function(event) {
    adaptEditor();
};
adaptEditor();
0
Fabien Sa

時々editor.renderer.lineHeightが1を返すので、このバリアントは私にとってはうまく機能します。

    var resize = function() {
     var minHt = 16;
     var sl = editor.getSession().getScreenLength();
     var sw = editor.renderer.scrollBar.getWidth();
     var lh = Math.max(editor.renderer.lineHeight, minHt);
     var ht = Math.max(((sl * lh) + sw), minHt);
     $('#myEditorDiv').height(ht);
     editor.resize();
   };
0
Paul