Ace Cloud 9 편집기에서 콘텐츠 높이 자동 조정

Ace Cloud 9 편집기에서 콘텐츠 높이 자동 조정

---

Ace 편집기 를 페이지 에 추가하려고하는데 콘텐츠 길이에 따라 높이를 자동으로 설정하는 방법을 모르겠습니다.

이상적으로는 콘텐츠가 변경 될 때 높이가 다시 계산되도록 작동하지만 페이지로드시 높이가 설정되면 만족할 것입니다.

JavaScript 초보자의 경우 누군가 코드 길이, 줄 수, 새 높이,이를 반영하도록 DOM을 업데이트하는 방법을 알아낼 수 있습니까?

Google 그룹 에서이 제안 을 찾았 지만 그것이 무엇을하는지, 높이를 조정하는 방법을 이해하지 못합니다.

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

---

(업데이트 : 현재이 작업을 수행하고 있지 않지만 내 답변이 오래되었을 수 있습니다. 다른 사용자가 제공 한 것을 통합하기 위해 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);
}

---

Ace는 다음과 같은 옵션을 제공합니다 maxLines.

editor.setOptions({
    maxLines: 15
});

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

---

업데이트 : Dickeylth의 답변을 참조하십시오 . 이 모든 것이 여전히 작동하지만 사람들은 여전히 ​​유용하다고 생각하지만 기본 기능은 이제 ACE에 내장되어 있습니다.

---

To "automatically adjust height to contents in Ace Cloud9 editor", you just need to resize the editor to fit the div that contains it, whenever the content is edited. Assuming you started with <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();
});

You resize the div the editor lives in, then call editor.resize to get the editor to refill the div.

If you paste content with long lines, with ACE set to wrap lines, the number of new lines and actual rendered lines will differ, so the editor will scroll. This code will fix that, but you will get horizontal scrolling instead.

editor.getSession().setUseWrapMode(false)

---

I think that a solution might be counting the number of lines in the editor and then resize it to fit these lines:

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

Hope this helps.

---

You can use jQuery:

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

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

---

I agree with the accepted answer, except that I would prefer editor.getSession().getScreenLength().

The issue is that if you enable wrap mode, a long line may break into multiple lines. Thus you will not be able to get correct line count with editor.getSession().getDocument().getLength().

---

This variant works better for me as sometimes the editor.renderer.lineHeight returns 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();
   };

---

My method in pure JavaScript (replace editor-container with the right id).

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

참고URL : https://stackoverflow.com/questions/11584061/automatically-adjust-height-to-contents-in-ace-cloud-9-editor