13

我今天一直在使用 CodeMirror 创建一个小环境，我可以在其中编辑一些存储在数据库中的 PHP 代码（是的，我知道这可能是有害的，但是普通用户无法访问 PHP 代码）。

一切都很好，编辑器工作，代码突出显示工作，缩进标签工作，但有一件事让我困扰了一段时间，我似乎无法找到解决方案。我的 CodeMirror 编辑器 textarea 中的代码比 textarea 长，超过了 textarea 并且会消失在我屏幕的某个地方（请参阅本文末尾的屏幕截图）。

我想让这段代码在下面的一行继续（当然不添加额外的行号）。这是一个已知问题和/或易于修复吗？

这是一个截图： http ://www.pendemo.nl/codemirror.png

提前致谢。

//编辑：已修复

好的，搞清楚了，似乎都在CSS文件中！这是任何有兴趣的人的修复：

.CodeMirror {
  overflow-y: auto;
  overflow-x: scroll;
  width: 700px;
  height: auto;
  line-height: 1em;
  font-family: monospace;
  _position: relative; /* IE6 hack */
}

overflow-y: auto（高度是自动完成的，所以不需要垂直滚动条）。溢出-x：滚动；强制 CodeMirror 添加滚动条而不是超出文本区域的宽度。它们给出了固定的宽度（px 或百分比）。你也可以添加一个最大高度，但如果你这样做了，你可能必须设置溢出-y 来滚动 aswel。

4

3 回答 3

9

lineWrapping通过将选项设置为.可以很容易地在 CodeMirror 中启用自动换行true。例子：

    <textarea id="code" name="code">
      ...
    </textarea>

    <script>
      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        tabMode: "indent",
        matchBrackets: true,
        theme: "night",
        lineNumbers: true,
        lineWrapping: true,
        indentUnit: 4,
        mode: "text/javascript"
      });
    </script>
于 2012-05-13T15:04:27.550 回答
6

它已修复，如果其他人可能遇到此问题，请参阅问题以获取详细信息。

于 2011-05-06T11:00:04.870 回答
2

正如克里斯上面评论的那样，问题中描述的解决方案不再（总是？）工作。

但是，添加max-width: ...ex;到 CSS 似乎确实会强制水平滚动条。

（没有它，例如仅使用width: ...，仅使用（如 fywe 的回答）配置 CodeMirrorlineWrapping: true可以防止它公然拉伸长线框，但 lineWrapping 有其自身的缺点（例如导航不友好的 Home/End 处理），因此可能没有真正的帮助。）

于 2013-05-13T00:52:29.813 回答