Автоматическая настройка высоты содержимого в редакторе Ace Cloud 9

Ответ 1

(ОБНОВЛЕНИЕ: Я сейчас не работаю с этим, но мой ответ может быть устаревшим. Чтобы попытаться включить то, что предоставили другие, я расскажу им об упоминании свойств minLines и maxLines, например

editor.setOptions({
    maxLines: Infinity
});

По-видимому, бесконечность - "не очень хорошая идея, так как она отключит виртуальный видоискатель даже для очень больших документов". Таким образом, выбор лимита может быть лучше.

Для истории, старый ответ был:

Сообщение, которое вы цитируете, работает только при условии, что это шрифт фиксированной ширины, высота символа которого вы знаете, и что вы знаете количество строк в документе. Умножьте, что вместе вы получите количество пикселей для того, насколько высок контент. Предполагается, что каждый раз, когда нажимается символ или вырезается/вставляется (что может добавлять или удалять строки), вы используете JavaScript для применения этого конкретного нового размера к элементам вашего DOM с стилями CSS.

(Они вбрасывают "ширину" полосы прокрутки в расчет высоты, и я честно не могу сказать вам, есть ли обоснование этого или нет. Я позволю кому-то еще понять эту часть.)

Во всяком случае... если у вас есть мягкая обертка, количество отображаемых строк экрана может быть больше, чем количество "реальных" строк в документе. Поэтому лучше использовать editor.getSession().getScreenLength(), чем editor.getSession().getDocument().getLength().

Я помещаю редактор (положение: абсолютный) внутри секции (позиция: относительный), и это единственный элемент, живущий в этом разделе. Этот код, по-видимому, сейчас работает для меня, я обновлю его, если узнаю больше...!

(Примечание. Мое общее понимание кода, представленного в StackOverflow, заключается в том, что мы не собираемся завершаться в 8-строчном ядре Oracle против Google., и вы можете использовать по своему усмотрению. Но поскольку я был отправлен по электронной почте об этом, в частности, я добавил явный менее строгий лицензионный термин для этих подобных незначительных строк.: -P)

// The following code snippet is released under the MIT license,
// -or- FreeBSD license, -or- an unrestrictive license of your
// choice including CC-ZERO or public domain.
//
// (those are GPL and Apache compatible, in any case)
//
// http://en.wikipedia.org/wiki/MIT_License
// http://en.wikipedia.org/wiki/BSD_licenses

$(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);
}

Ответ 2

Ace предоставляет возможность: maxLines, чтобы вы могли просто попробовать:

editor.setOptions({
    maxLines: 15
});

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

Ответ 3

Обновление: см. Dickeylth answer. Это все еще работает (и люди по-прежнему считают это полезным), но базовые функции теперь встроены в ACE.

Чтобы "автоматически регулировать высоту до содержимого в редакторе Ace Cloud9", вам просто нужно изменить размер редактора, чтобы он соответствовал содержащему его элементу, всякий раз, когда содержимое редактируется. Предполагая, что вы начали с <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)

Ответ 4

Я думаю, что решение может рассчитывать количество строк в редакторе, а затем изменять его размер в соответствии с этими строками:

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

Надеюсь, что это поможет.

Ответ 5

Я согласен с принятым ответом, за исключением того, что я бы предпочел editor.getSession().getScreenLength().

Проблема заключается в том, что если вы включаете режим обхода, длинная строка может разбиться на несколько строк. Таким образом, вы не сможете получить правильный счетчик строк с помощью editor.getSession().getDocument().getLength().

Ответ 6

Вы можете использовать jQuery:

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

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

Ответ 7

Мой метод в чистом JavaScript (замените editor-container на правильный id).

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

Ответ 8

Этот вариант работает лучше для меня, поскольку иногда редактор .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();
   };