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

Posted 2023-05-07

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

【英文标题】：CodeMirror (JS Code Highlight) text in textarea exceeds textarea width

【发布时间】：2011-08-19 18:56:18

【问题描述】：

我今天一直在使用 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 或百分比）。您也可以添加最大高度，但如果您这样做，您可能需要设置 overflow-y 才能滚动。

【问题讨论】：

这似乎对我不起作用，滚动条被隐藏/不起作用

自从代码运行完美以来已经有几个月没有研究它了。

@ChrisEdwards 嘿，你能找到解决办法吗？遇到了类似的问题，但这个解决方案对我不起作用。

@newbie 哦哇这就像 5 年前一样，不知道抱歉。不再参与该项目：-/

最好发布self-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>

【参考方案2】：

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

【参考方案3】：

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

不过，在 CSS 中添加 max-width: ...ex; 似乎会强制水平滚动条。

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