9

我目前正在使用 CodeMirror 在浏览器的文本区域中编辑 CODE。如果我有超过 20 行代码，它会在右侧添加一个垂直滚动条。但我不需要这个滚动条。相反，我需要编辑器大小垂直增长。

任何人都可以帮忙吗？

4

3 回答 3

9

在 CodeMirror 3 中，有一个禁用滚动条的选项：scrollbarStyle: "null"

从文档中：

滚动条样式：字符串

选择滚动条实现。默认为“native”，显示原生滚动条。核心库还提供了“null”样式，它完全隐藏了滚动条。插件可以实现额外的滚动条模型。

将其与：

  • 自动高度：height: auto& viewportMargin: Infinity（示例：http ://codemirror.net/demo/resize.html ）
  • 包装线：lineWrapping: true

然后控制父div的高度/宽度效果很好

于 2014-12-18T21:23:32.957 回答
7

CodeMirror文档讨论了一种样式CodeMirror-scroll，它控制是否出现滚动条，以及 textarea 是否扩展以适应内容。具体来说，它说：

CodeMirror-scroll 编辑器是否滚动（溢出：自动+固定高度）。默认情况下，确实如此。将 CodeMirror 类设置为 height: auto 并赋予该类 overflow-x: auto; 溢出-y：隐藏；将导致编辑器调整大小以适应其内容。

因此，想法是添加到您自己的 CSS 中，例如：

.CodeMirror {
  border: 1px solid #eee;
  height: auto;
}
.CodeMirror-scroll {
  overflow-y: hidden;
  overflow-x: auto;
}

如CodeMirror -scroll样式文档随附的官方演示中所示。

什么对我有用：

对于我使用 CodeMirror 2.34 的个人情况，我所做的只是将以下样式添加到我自己的样式表中：

div.CodeMirror-scroll { height: auto!important; overflow: visible; }

代码镜像 3：

在我对 CodeMirror 3 的简短初始测试中，上述两种技术都不起作用，我仍然得到滚动条。有趣的是，因为您认为有关主题的官方文档是有效的 - 除非 CodeMirror 3 稍微改变了它的样式并且文档还没有赶上……

于 2012-12-26T11:15:44.873 回答
0

对我来说，将 codemirror textarea 包裹在一个元素上display:flex，修复了不需要的水平滚动问题：

<div style='display: flex'>
  <textarea></textarea>
</div>
<script>
//codemirror setup
</script>
于 2020-04-18T14:42:20.990 回答