CodeMirror textarea 中的 onresize 事件

Question

当用户调整 CodeMirror 文本区域的大小时，我想调用一个函数。 但是我在 CodeMirror文档的事件列表中找不到 resize 事件。 有什么方法可以做到这一点。 我想做如下。

editor.on('resize', function(){
   consolo.log('editor resized');
});

Answer 1

您可以为其使用refresh事件：

editor.on("refresh", function () {
  console.log('editor resized');
});

根据 CodeMirror 的文档：它在编辑器刷新或调整大小时触发。

Answer 2

CodeMirror 没有内置事件，当用户更改编辑器的大小时会触发该事件。 但是，您可以使用"refresh" (instance: CodeMirror) 。 它在使用 setSize 以编程方式更改编辑器的大小时触发。

“刷新”（例如：CodeMirror）

当编辑器被刷新或调整大小时触发。 主要用于使取决于编辑器或字符大小的缓存值无效。

---

使用ResizeObserver可以很容易地观察任何 DOM 元素的ResizeObserver 。

调整大小观察者

ResizeObserver 接口报告对 Element 的内容或边框框或 SVGElement 边框的尺寸的更改。 -https://developer.mozilla.org

  // create an Observer instance
  const resizeObserver = new ResizeObserver((entries) => {
    const height = entries[0].target.clientHeight;
    console.log("div.CodeMirror.CodeMirror-wrap height changed:", height);
  });
  const codeMirror = document.querySelector("div.CodeMirror.CodeMirror-wrap");
  resizeObserver.observe(codeMirror);

在上面的代码中，我观察了CodeMirror最外层元素的大小。 你可以缩小范围。