codemirror-textarea可以像标准textarea一样调整大小

Question

有谁知道如何使codemirror textarea像text-area一样可调整大小？

这样可以通过拖动它们的底部向下抓取器角来调整codemirror textarea的大小.

我知道有可能是html div(请参阅div可调整文本区域),但我还没有设法在代码镜像上实现相同的功能.

Answer 1

一些谷歌搜索表明CodeMirror不支持它,但您可以使用jQuery UI 实现它:

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

Answer 2

我做了这个小例子.

请注意,这只是垂直调整大小,这可能是你真正想要的吗？普通文本区域的水平调整大小的能力往往会打破布局 - 通常更容易想出一个布局,其中编辑器具有固定宽度,并且如果调整大小,则其下方的内容会被推下.

我还没有看到你想要的设计,所以我猜.

如果这是你想要的,那么修改它并获得一个可以在两个方向上工作的工作调整大小小部件应该不会太难.

Answer 3

没有JQUERY,只有CSS

.CodeMirror {
      resize: vertical;
      overflow: auto !important;
    }

经过一番努力,这个简单的代码实际上对我有用.我有一个可调整大小的Codemirror实例,滚动工作正常.