2012-12-20 38 views

回答

28

一些谷歌搜索表明,這是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()); 
    } 
}); 
+4

不要忘記在設置新的大小後添加editor.refresh()。 debouncing refresh()也是一個好主意。 – Sergio

+0

@Sergio什麼是* debouncing *? –

+0

@TomášZatofor debouncing check http://underscorejs.org/#debounce – Sergio

-4

你有什麼試過?

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

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

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

+0

沒有調整大小手柄在這裏可見:https://codemirror.net/demo/complete.html –

3

我做this little example

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

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

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

+0

多麼優雅和乾淨的外觀..我真的很喜歡這個! –

+0

從你的例子中得到這個:https://github.com/Sphinxxxx/cm-resize – Sphinxxx

0
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答案(順便說一句,感謝這一點)。

相關問題