31

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

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

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

4

7 回答 7

32

没有 JQUERY，只有 CSS

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

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

于 2018-03-22T16:45:25.343 回答
30

一些谷歌搜索表明它在 CodeMirror 中不受支持，但您可以使用jQuery UI实现它：

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  lineNumbers: true,
});
$('.CodeMirror').resizable({
  resize: function() {
    editor.setSize($(this).width(), $(this).height());
  }
});
于 2012-12-20T20:00:44.347 回答
10

我做了这个小例子。

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

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

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

或者，考虑使用源自此示例的 @Sphinxxx尝试此插件。

于 2017-04-12T07:06:55.583 回答
1

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

相反，这里：

  1. 使用容器 DIV，与
  2. 一个普通的 CSS 调整大小句柄，和
  3. 调整大小事件ResizeObserver通过/代理到 CM MutationObserver（因为onResize只为 触发window，只是为了让 Web 编程更加悲惨；））。

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

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

但是检测 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 片段旨在被视为伪代码。；）如果保留了该方法的简单性，一个真实的、经过优化的实现是非常受欢迎的！ )

（另见CodePen ...）

于 2018-03-13T03:28:36.437 回答
1 
.CodeMirror__wrapper {
    resize: both;
    overflow: auto !important;
}

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

于 2019-09-18T11:56:38.533 回答
0 
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 版本感兴趣（顺便说一句。谢谢你）。

于 2017-09-10T12:58:43.973 回答
-4

你试过什么？

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

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

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

于 2012-12-20T19:27:11.003 回答