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答案（顺便说一句，感谢这一点）。