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

Я пытаюсь добавить редактор Ace на страницу, но я не знаю, как автоматически установить высоту, основываясь на длине его содержимого.

В идеале это работало бы так, чтобы при изменении содержимого высота пересчитывалась, но я был бы рад, если бы высота была установлена ​​только при загрузке страницы.

Для новичка в JavaScript кто-то может помочь мне понять, как я вычисляю длину кода, сколько строк он охватывает, какова новая высота и как я обновляю DOM, чтобы отразить это?

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

editor.getSession().getDocument().getLength() *
editor.renderer.lineHeight + editor.renderer.scrollBar.getWidth()
Источник

9 ответов

Решение

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

editor.setOptions({
    maxLines: Infinity
});

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

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

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

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

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

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

$(document).ready(function(){

    var heightUpdateFunction = function() {

        // http://stackru.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/

Источник

Обновление: см . Ответ Диккилта. Это все еще работает (и люди все еще находят это полезным), но теперь базовая функциональность встроена в 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)
Источник

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

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

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

Источник

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

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

 $('#editor').css('height',rows_editor);
Источник

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

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

Источник

У меня была та же проблема, но я обнаружил, что так просто автоматически настроить высоту, получив высоту родительского элемента и передав ее #editorи вызвать изменение размера на editor.resize(). Это просто сработало как шарм! Ниже приведен код, который я использовал:

      let editor = ace.edit('editor'), $editorWrapper = $('.editor-wrapper');

$('#editor').height($editorWrapper.height());
 editor.resize();

Ну, я сделал это, когда пытался включить функцию максимизации в редакторе.

Источник

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

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

function adaptEditor() {
    document.getElementById('editor-container').style.height = window.innerHeight + 'px';
    editor.resize();
}
window.onresize = function(event) {
    adaptEditor();
};
adaptEditor();
Источник
Другие вопросы по тегам