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

Question

有人知道如何让 codemirror textarea 像 text-area 一样调整大小吗？

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

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

Answer 1

没有 JQUERY，只有 CSS

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

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

Answer 2

一些谷歌搜索表明它是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 3

我发了this little example。

请注意，这只是垂直调整大小，这可能是您真正想要的？普通 textarea 的水平调整大小功能往往会破坏布局 - 通常更容易设计出编辑器具有固定宽度的布局，如果调整大小，则其下方的内容会被下推。

我还没有看到你打算让它适合的设计，所以我猜。

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

或者，考虑尝试@Sphinxxx 的this plugin，它源自此示例。

Answer 4

如果 jQuery 不是一个选项，并且您可以在 IE（和 Edge，直到它赶上 CSS resize:...）的情况下不调整大小，这里是一个概念验证 示例，这是一种简单而轻松的技术，不需要@mindplay.dk 开创的拖放黑客。

相反，这里：

1. 使用了一个 container DIV，与
2. 简单的 CSS 调整大小句柄，以及
3. resize 事件被代理通过ResizeObserver/MutationObserver 转移到CM（因为onResize 只为window 触发，只是为了让Web 编程更加痛苦；）） .

要解决的一个问题（在 CM 中？在 WebKit 中？或者作为一种解决方法，我没有耐心 + 时间来提炼...）是为 “WebKit 上的 CM”添加了额外的底部填充 场景，其中 CSS 调整大小句柄将与 CM 自己的锅碗瓢盆重叠。 OTOH，Firefox 将它绘制在所有其他之上，因此尽管 CM 不知道手柄并在那里绘制了各种（几个！）矩形，Firefox 仍然设法赢得了拯救它，并且调整大小会起作用，尽管手柄会被粘贴滚动条箭头。 （玩 z-index 或用 CM 设计废话对我没有帮助。）

顺便说一句，注意：这意味着纯 CSS overflow: hidden; resize: both;，直接应用于主 .CodeMirror DIV，几乎在 Firefox 中没有任何魔法（没有额外的框架，没有几何调整等）。不过，仍然需要为 cm.setSize(cm_div.clientWidth, cm_div.clientHeight) 挂钩调整大小事件（与上述相同）。

但是检测 Firefox 和 Chrome 以对其进行优化可能会使代码复杂得多，而不仅仅是让两者保持相同...

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

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

<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>

---

（再次重申：这只是一个示例，证明该技术有效。JS sn-p 旨在被视为伪代码。;） 不过，如果保留方法的简单性，一个真正的、完善的实现是非常受欢迎的！）

（另见on CodePen...）

Answer 5

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

尝试将resize 添加到.CodeMirror，但没有成功。不过，将调整大小添加到包装器对我有用。

Answer 6

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 7

你试过什么？

我刚刚从http://codemirror.net/下载了CodeMirror的开发快照

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

如果这不能回答您的问题，请更新它，提供有关您尝试过的方法和无效的方法的更具体信息。