無法在Ace編輯器中滾動和突出顯示代碼

Question

在這個社區的幫助下，我使ace編輯器達到了全高度，因此當用戶鍵入或修改它時，編輯器將隨代碼一起增長。 我最近意識到這可以防止用戶嘗試突出顯示代碼。 當您開始突出顯示代碼並在到達窗口底部時開始向下拖動時，它停止了，它不會像您期望的那樣向下滾動窗口。

這是我用來使編輯器全高的代碼。 到JSFiddle的鏈接在下面

var editor = ace.edit("editor-html");

setEditorOptions(editor, 'html');

setTimeout(function() {
    heightUpdateFunction();
}, 100);    

function setEditorOptions(editor, type) {
    editor.setShowPrintMargin(false);
    editor.setTheme("ace/theme/clouds");
    editor.getSession().setMode("ace/mode/"+type);
    editor.getSession().on('change', heightUpdateFunction);
}
function heightUpdateFunction() {
    var newHeight = (editor.getSession().getScreenLength() + 1) * editor.renderer.lineHeight + editor.renderer.scrollBar.getWidth();
    $('#editor-html').css('height', newHeight.toString() + "px");
    editor.resize();

    if (newHeight <= 1) {   
        setTimeout(function() {
            heightUpdateFunction();
        }, 100);    
    }
}

我已經從jsfiddle.net上傳了一個示例來嘗試此操作 。

用戶嘗試突出顯示文本時，有什么方法可以解決滾動問題？

Answer 1

您應該使用maxLines和autoScrollEditorIntoView選項。 像這樣：

var editor = ace.edit("editor-html");
editor.setOptions({
    maxLines: 1000,
    autoScrollEditorIntoView: true,
    theme: "ace/theme/clouds",
    showPrintMargin: false,
    mode: "ace/mode/html"
})

參見https://github.com/ajaxorg/ace/blob/master/demo/autoresize.html#L39 。

需要注意的是heightUpdateFunction建議時maxLines選擇是尚不可用，它不能很好地工作。 您應該使用maxLines代替它。

Answer 2

如果將scrollSpeed設置為零，也會發生這種情況。

editor.setScrollSpeed(0); // no scrolling

editor.setScrollSpeed(.5); // scrolling

我使用了integer來存儲scrollSpeed值，當我傳遞.5時將其轉換為0，因為integers只能是整數，並且禁用了滾動。 我改用允許小數的Number或float ，並且滾動再次開始工作。