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

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 */
}

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

Answer 1

通过将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>

Answer 2

它是固定的,如果有人可能碰到这个问题,请查看详细信息.