Question

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

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

我知道它可能用于html div（请参阅div resizable like text-area），但我还没有设法在代码镜像上实现相同的功能。

Answer 1

一些谷歌搜索表明它是not supported in CodeMirror但您可以achieve it jQuery UI：

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

Answer 2

没有JQUERY ，仅限CSS

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

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

Answer 3

我做了this little example。

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

我没有看到你想要的设计，所以我猜。

如果这是你想要的，那么修改它并获得一个可以双向工作的工作调整大小小部件应该不会太难。

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);
    });
}

如果有人对@ mindplay.dk答案的更短和更多jQuery版本感兴趣（顺便说一下，谢谢你）。

Answer 5

如果jQuery不是一个选项，你可以在没有调整IE（和Edge，直到它赶上CSS resize: ...）的情况下继续生活，这里有证明 - 概念 示例简单易懂的＆amp;光技术并不需要@ mindplay.dk开创的拖放式黑客攻击。

相反，在这里：

使用容器DIV ，
一个普通CSS调整大小句柄和
通过ResizeObserver / MutationObserver将调整大小事件代理转移到CM（因为onResize仅针对window触发，只是为了制作网络编程更悲惨;））。

要解决的一个问题（在CM中？在WebKit中？或作为一种解决方法我没有耐心+时间来提炼......）是为＆＃34添加的额外底部填充; CM在WebKit＆＃34; 场景中，CSS调整大小句柄将被CM自己的底池和平底锅重叠。 OTOH，Firefox最重要的是它，所以尽管CM不知道手柄并在那里绘制各种（几个！）矩形，Firefox仍然设法赢得救援，并且调整大小会起作用，尽管手柄会被粘贴滚动条箭头。 （与z-index一起玩或者用CM设计废话对我来说没什么用。）

BTW，请注意：这意味着直接应用于主overflow: hidden; resize: both; DIV，几乎的普通CSS .CodeMirror在Firefox中无需任何工作魔术（没有额外的框架，没有几何调整等）。尽管如此，仍然需要为cm.setSize(cm_div.clientWidth, cm_div.clientHeight)挂钩调整大小事件（与上面提到的相同）。

但是检测Firefox与Chrome以优化它可能会使代码更多更复杂，而不是让两者都相同......

＆＃13;

document.addEventListener("DOMContentLoaded", function(event) {
  
  fr = document.querySelector("#cm-resize-frame")
  
  // This 5-6 lines below is only for the WRAP/NOWRAP demo switch:
  cm = null
  reset = document.getElementById("wrap").onclick = function() {
    cm && cm.toTextArea() // clean up previous CM instance
    cm = CodeMirror.fromTextArea(document.getElementById("cm"),
        {lineWrapping: document.getElementById("wrap").checked,
         lineNumbers: true } // just to see if CM is actually alive & resizing
    )

    function cm_resize() {
        cm.setSize(fr.clientWidth + 2,   // chrome needs +2, others don't mind...
                   fr.clientHeight - 10) // and CM needs room for the resize handle :-/
    }

    // Needed (on FF, Edge & IE11, but not Chrome) for the scrollbars to properly initialize:
    cm_resize()

    // This is the actual "business logic" of the whole thing! ;)
    if (window.ResizeObserver) // Chrome 64+
        new ResizeObserver(cm_resize).observe(fr)
    else if (window.MutationObserver) // others
        new MutationObserver(cm_resize).observe(fr, {attributes: true})
  }
  reset()
})

＆＃13;

#cm-resize-frame {
  overflow: hidden; /* CM will manage its own scrollbars. */
  resize: both;
  
  height: 10em; /* A fixed initial height is required in Chrome both for the resize handle to appear and to not fall into a shrinking loop due to the neg. offset in cm_resize()! */

  /* Optional... */
  border: 1px solid lightgrey;
  width: 20em;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/codemirror.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/codemirror.min.js"></script>

<div id="cm-resize-frame">
<textarea id="cm">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc rhoncus ornare diam eget consequat. Suspendisse potenti.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
  
Sed scelerisque, ex nec pharetra ultrices, ipsum mi aliquam arcu, sit amet pulvinar erat mauris sit amet mi.
Fusce pulvinar vel ex semper imperdiet. Quisque dapibus purus eu commodo volutpat.

Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
  
Sed scelerisque, ex nec pharetra ultrices, ipsum mi aliquam arcu, sit amet pulvinar erat mauris sit amet mi.
Fusce pulvinar vel ex semper imperdiet. Quisque dapibus purus eu commodo volutpat.</textarea>
</div>

WRAP: <input id="wrap" type="checkbox" checked>

＆＃13;

（再次：这只是一个例子，证明该技术有效.ZM片段应该被读作伪代码。;）一个真实，精致的实现，只要保持方法的简单性，非常受欢迎！）

（另请参阅on CodePen ...）

Answer 6

.CodeMirror__wrapper {
    resize: both;
    overflow: auto !important;
}

尝试向.CodeMirror添加调整大小，但这没有用。不过，将调整大小添加到包装器中对我来说很有效。

Answer 7

你有什么尝试？

我刚刚从http://codemirror.net/

下载了CodeMirror的开发快照

从demo目录运行complete.html有一个很好的可调整大小的文本区域（在我的Chrome浏览器中）。事实上，至少其他一些演示也有可调整的textareas。

如果这不能回答您的问题，请使用有关您尝试过的内容和不起作用的更具体信息进行更新。

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

7 个答案: