javascript codemirror-textarea 像标准 textarea 一样可调整大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13977276/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
codemirror-textarea resizable like a standard textarea
提问by Zo72
Does anybody know how to make a codemirror textarea resizable like text-area ?
有人知道如何使 codemirror textarea 像 text-area 一样可调整大小吗？
So that the codemirror textarea can be resized by dragging their bottom down grabber corner.
这样 codemirror textarea 就可以通过拖动它们的底部抓取器角来调整大小。
I know it's possible for html divs (see div resizable like text-area) but I have not managed to achieve the same thing on code mirror.
我知道 html div 是可能的（请参阅div 可调整大小，如 text-area），但我还没有设法在代码镜像上实现相同的目标。
回答by brianpeiris
Some Googling suggests that it is not supported in CodeMirrorbut you can achieve itwith jQuery UI:
一些谷歌搜索表明CodeMirror 不支持它，但您可以使用jQuery UI实现它：
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
});
$('.CodeMirror').resizable({
resize: function() {
editor.setSize($(this).width(), $(this).height());
}
});
回答by Tadeu Marques
WITHOUT JQUERY, CSS only
没有 JQUERY，只有 CSS
.CodeMirror {
resize: vertical;
overflow: auto !important;
}
After some struggle, this simple code actually worked for me. I got a resizable Codemirror Instance vertically with scroll working properly.
经过一番挣扎，这个简单的代码实际上对我有用。我垂直获得了一个可调整大小的 Codemirror 实例，滚动正常。
回答by mindplay.dk
I made this little example.
我做了这个小例子。
Note that this resizes vertically only, which is probably what you really want? The horizontal resize ability of a normal textarea tends to break layouts - it's usually much easier to come up with a layout where the editor has a fixed width and the content below it gets pushed down if you resize.
请注意，这仅垂直调整大小，这可能是您真正想要的？普通 textarea 的水平调整大小能力往往会破坏布局 - 通常更容易提出一个布局，其中编辑器具有固定宽度，如果调整大小，则其下方的内容会被推下。
I haven't seen the design in which you intend for this to fit, so I'm guessing.
我还没有看到你打算让它适合的设计，所以我猜。
It shouldn't be too hard to modify this and get a working resize widget that works in both directions though, if that's what you wanted.
如果这是您想要的，那么修改它并获得一个可以在两个方向上工作的调整大小小部件应该不会太难。
Alternatively, consider trying this pluginby @Sphinxxx which was derived from this example.
或者，考虑通过源自本示例的@Sphinxxx尝试使用此插件。
回答by TH3C120W
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);
});
}
If someone is interested in shorter and more jQuery version of @mindplay.dk answer ( btw. thanks for this ).
如果有人对@mindplay.dk 的更短和更多 jQuery 版本感兴趣，请回答（顺便说一句。谢谢）。
回答by Sz.
If jQuery is not an option, and you can live without resizing in IE (and Edge, until it catches up with CSS resize:...), here's a proof-of-conceptexampleof a pleasantly simple & light technique that doesn't require the drag-and-drop hack pioneered by @mindplay.dk.
如果jQuery是不是一种选择，你可以生活在没有在IE中调整大小（和边缘，直到它与CSS赶上resize:......），这里有一个验证的概念，例如一个惊喜简单和光技术，它不要求由@mindplay.dk 开创的拖放式 hack。
Instead, here:
相反，这里：
- a container DIVis used, with
- a plain CSS resize handle, and
- the resize events are proxiedover to CM via
ResizeObserver/MutationObserver(sinceonResizeonly fires forwindow, just to make web programming that much more miserable ;) ).
- 使用容器 DIV，
- 一个普通的 CSS 调整大小句柄，以及
- 该调整大小事件代理通过到CM
ResizeObserver/MutationObserver（因为onResize只火的window，只是为了让Web编程这更悲惨的;））。
One issue to iron out (in CM? in WebKit? or as a workaround I haven't had the patience + time to distill...) is the extra bottom padding added for the "CM on WebKit"scenario, where the CSS resize handle would get overlapped by CM's own pots and pans. OTOH, Firefox draws it on top of all else, so despite CM is unaware of the handle and draws its various (several!) rectangles there, Firefox still manages to win rescuing it, and resizing would work, albeit the handle would get pasted over the scrollbar arrows. (Playing with z-indexor styling the crap out of CM didn't help for me.)
要解决的一个问题（在 CM 中？在 WebKit 中？或者作为一种解决方法，我没有耐心+时间来提炼......）是为“WebKit 上的 CM”场景添加了额外的底部填充，其中 CSS 调整大小手柄会被 CM 自己的锅碗瓢盆重叠。OTOH，Firefox 将它绘制在所有其他东西之上，所以尽管 CM 不知道手柄并在那里绘制了它的各种（几个！）矩形，Firefox 仍然设法赢得拯救它，并且调整大小会起作用，尽管手柄会被粘贴滚动条箭头。（在z-indexCM 中玩弄或设计废话对我没有帮助。）
BTW, note:this means that plain CSS overflow: hidden; resize: both;, directly applied on the main .CodeMirrorDIV, almostworks in Firefox without any magic (no extra frame, no geometry tweaks etc.). Hooking the resize events (the same way as noted above) for a cm.setSize(cm_div.clientWidth, cm_div.clientHeight)would still be needed, though.
顺便说一句，注意：这意味着overflow: hidden; resize: both;直接应用在主.CodeMirrorDIV上的纯 CSS几乎可以在 Firefox 中运行而没有任何魔法（没有额外的框架，没有几何调整等）。cm.setSize(cm_div.clientWidth, cm_div.clientHeight)不过，仍然需要为 a 挂钩调整大小事件（与上述相同的方式）。
But detecting Firefox vs. Chrome to optimize it out would probably make the code muchmore complicated than just leaving it the same for both...
但检测与火狐浏览器来优化它很可能使代码得多不仅仅是离开它上是相同的情况复杂得多...
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>(Again: this is just an example, demonstrating that the technique works. The JS snippet is meant to be read as pseudocode. ;) A real, polished implementation, provided that the simplicity of the approach is preserved, is very welcome, though!)
（同样：这只是一个示例，证明该技术有效。JS 代码段旨在作为伪代码阅读。;）不过，如果保留方法的简单性，则非常受欢迎！ )
(See also on CodePen...)
（另见CodePen...）
回答by Skip
.CodeMirror__wrapper {
resize: both;
overflow: auto !important;
}
Tried adding resizeto .CodeMirrorbut that didn't work. Adding the resize to the wrapper worked for me though.
尝试添加resize，.CodeMirror但没有奏效。不过，将调整大小添加到包装器对我有用。
回答by HBP
What have you tried?
你试过什么？
I just downloaded the development snapshot of CodeMirror from http://codemirror.net/
我刚刚从http://codemirror.net/下载了 CodeMirror 的开发快照
Running complete.html from the demo directory has a nice resizeable text area (in my Chrome browser). In fact at least some other demos also have resizeable textareas.
从演示目录运行 complete.html 有一个很好的可调整大小的文本区域（在我的 Chrome 浏览器中）。事实上，至少其他一些演示也有可调整大小的文本区域。
If this does not answer your question, please update it with more specific information about what you have tried and what does not work.
如果这不能回答您的问题，请使用有关您尝试过的方法和无效方法的更具体信息进行更新。
