codemirror-textarea可以像標準文本區域一樣調整大小

Question

有人知道如何使文本區域可以調整大小的codemirror textarea嗎？

因此，可以通過拖動它們的底部抓取器角來調整codemirror textarea的大小。

我知道這是可能的HTML divs（見div resizable like text-area），但我還沒有設法實現代碼鏡像上的同樣的事情。

Answer 1

一些谷歌搜索表明，這是not supported in CodeMirror，但你可以用achieve itjQuery UI：

var editor = CodeMirror.fromTextArea(document.getElementById("code"), { 
    lineNumbers: true, 
}); 
$('.CodeMirror').resizable({ 
    resize: function() { 
    editor.setSize($(this).width(), $(this).height()); 
    } 
}); 

Answer 2

你有什麼試過？

我剛剛下載CodeMirror的發展快照從http://codemirror.net/

從演示目錄中運行complete.html有一個很好的可調整大小的文本區域（在我的Chrome瀏覽器）。實際上至少有一些其他的演示也有可調整大小的textareas。

如果這不能解答您的問題，請更新您的問題，並提供更多關於您已經嘗試過以及哪些方面無法解決的具體信息。

Answer 3

我做this little example。

請注意，這只是垂直調整，這可能是你真正想要的嗎？正常textarea的水平調整大小的功能往往會破壞佈局 - 通常要想出一個佈局，其中編輯器具有固定寬度，並且如果調整大小，則其下方的內容會被壓低。

我還沒有看到你打算這樣做的設計，所以我猜測。

它不應該太難改變這個，並得到一個工作調整大小部件，雙向工作，如果這是你想要的。

Answer 4

let CodeMirrorCustomResize = (params) => { 
    var start_x, start_y, start_h, 
     minHeight = params && params.minHeight ? params.minHeight : 150, 
     resizableObj = params && params.resizableObj ? params.resizableObj : '.handle' 

    let onDrag = (e) => { 
     sqlEditor.setSize(null, `${Math.max(minHeight, (start_h + e.pageY - start_y))}px`); 
    } 

    let onRelease = (e) => { 
     $('body').off("mousemove", onDrag); 
     $(window).off("mouseup", onRelease); 
    } 

    $('body').on("mousedown", resizableObj, (e) => { 
     start_x = e.pageX; 
     start_y = e.pageY; 
     start_h = $('.CodeMirror').height(); 

     $('body').on("mousemove", onDrag); 
     $(window).on("mouseup", onRelease); 
    }); 
} 

如果有人有興趣在更短的jQuery版本@ mindplay.dk答案（順便說一句，感謝這一點）。