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

有人知道如何使codemirror文本区域像文本区域一样可调整大小吗

这样，codemirror textarea就可以通过向下拖动其抓取角来调整大小

我知道html div是可能的（请参阅），但我还没有在代码镜像上实现同样的功能。

您尝试了什么

我刚从下载了CodeMirror的开发快照

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

---

如果这还不能回答您的问题，请用您尝试过的和无效的更具体的信息来更新它。

一些谷歌搜索建议是这样的，但您可以：

我做了

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

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

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

P>可选地，考虑由这个例子导出的@ Sphinxxx。< /P>

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 answer的jQuery版本感兴趣（顺便说一句，谢谢）。

如果jQuery不是一个选项，你可以不在IE中调整大小（和Edge，直到它赶上CSS

resize:

），这里有一个概念证明的例子，它是一种简单而轻巧的技术，不需要@mindplay.dk首创的拖放技术

相反，这里：

使用container DIV，带有

一个简单的CSS大小控制柄，以及

resize事件通过

ResizeObserver

/

MutationObserver

代理给CM（因为

onResize

只针对

窗口启动，只是为了让web编程更糟糕；）

需要解决的一个问题（在CM中？在WebKit中？或者作为一种解决方法，我没有耐心+时间来提取…）是为“CM在WebKit上”场景添加了额外的底部填充，在这种情况下CSS调整手柄将与CM自己的锅和盘重叠。OTOH，Firefox将其绘制在所有其他图形之上，因此尽管CM不知道手柄并在那里绘制了各种（几个！）矩形，但Firefox仍然成功地将其解救出来，并且可以调整大小，尽管手柄会粘贴在滚动条箭头上。（玩

z-index

或者用CM设计垃圾对我没有帮助。）

顺便说一句，注意：这意味着普通CSS

溢出：隐藏；调整大小：两者

，直接应用于主

.CodeMirror

DIV，在Firefox中几乎没有任何魔力（没有额外的帧，没有几何调整等）。不过，仍然需要为

cm.setSize（cm_div.clientWidth，cm_div.clientHeight）

挂起调整大小事件（与上面提到的方法相同）

但是检测Firefox和Chrome来优化它可能会使代码变得比两者都保持不变复杂得多

document.addEventListener（“DOMContentLoaded”），函数（事件）{
fr=document.querySelector（“cm调整框架大小”）
//以下5-6行仅适用于WRAP/NOWRAP演示开关：
cm=null
reset=document.getElementById（“wrap”）.onclick=function（）{
cm&&cm.toTextArea（）//清除以前的cm实例
cm=CodeMirror.fromTextArea（document.getElementById（“cm”），
{lineWrapping:document.getElementById（“wrapp”）。已选中，
lineNumbers:true}//只是为了查看CM是否实际处于活动状态并调整大小
)
函数cm_resize（）{
设置大小（fr.clientWidth+2，//chrome需要+2，其他人不介意。。。
fr.clientHeight-10）//CM需要空间来调整大小手柄：-/
}
//需要（在FF、Edge和IE11上，但不在Chrome上）滚动条才能正确初始化：
cm_resize（）
//这就是整个事情的实际“业务逻辑”；）
if（window.ResizeObserver）//chrome64+
新的调整大小观察者（cm_调整大小）。观察（fr）
else if（window.MutationObserver）//其他
新的MutationObserver（cm_resize）.observe（fr，{attributes:true}）
}
重置（）
})

#cm调整框架大小{
溢出：隐藏；/*CM将管理自己的滚动条*/
调整大小：两者；
高度：10em；/*在Chrome中需要固定的初始高度，以便显示调整大小手柄，并且不会由于cm_resize（）中的负偏移而陷入收缩循环*/
/*可选的*/
边框：1px纯色浅灰色；
宽度：20em；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。
大菱鲆的直径。潜力悬钩子。
根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。
塞德·斯克利斯，前法国总统，我的阿奎姆·阿库，我的普尔文纳·埃拉特·莫里斯，我的阿梅特·莫里斯。
从枕叶到枕叶。这是我们的共同目标。
潜力悬钩子。根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。
塞德·斯克利斯，前法国总统，我的阿奎姆·阿库，我的普尔文纳·埃拉特·莫里斯，我的阿梅特·莫里斯。
从枕叶到枕叶。这是我们的共同目标。
换行：不带JQUERY的

，仅CSS

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

经过一些努力，这个简单的代码实际上对我有效。我得到了一个垂直调整大小的Codemirror实例，scroll工作正常

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

尝试将

调整大小

添加到

.codemirr

中，但无效。不过，将调整大小添加到包装器对我来说很有效.CodeMirror__wrapper { resize: both; overflow: auto !important; }