Question

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

Everythings工作得很好，编辑工作，代码突出显示工作，缩进标签工作，但有一件事困扰我一段时间，我似乎无法找到解决方案。我的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 */
}

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

Answer 1

通过将lineWrapping选项设置为true，可以轻松在CodeMirror中启用自动换行。例如：

    <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>

Answer 2

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

Answer 3

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

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

（没有它，例如只使用width: ...，只使用lineWrapping: true配置CodeMirror（如在fywe的回答中）可以防止它公然拉伸长行的框，但是lineWrapping有其自身的缺点（例如导航不友好的家庭/结束处理），所以可能没有真正的帮助。）

textarea中的CodeMirror（JS代码突出显示）文本超出textarea宽度

3 个答案: