CodeMirror (выделение кода JS) текст в текстовом поле превышает ширину текстового поля

сегодня я работаю с CodeMirror, чтобы создать небольшую среду, где я могу редактировать некоторый PHP-код, который хранится в базе данных (да, я знаю, что это может быть вредным, но PHP-код не доступен для обычных пользователей).

все отлично работает, редактор работает, подсветка кода работает, вкладки отступов работают, но есть одна вещь, которая беспокоит меня некоторое время, и я не могу найти решения для этого. Код, который находится в моем CodeMirror редактор textarea в, который длиннее textarea превышает textarea и исчезнет где-то из моего экрана (см. скриншот в конце этого сообщения).

Я хотел бы, чтобы этот код продолжался в строке ниже (без добавления дополнительного номера строки). Это известная проблема и/или легко исправить?

вот скриншот: http://www.pendemo.nl/codemirror.png

спасибо заранее.

/ / Edit: это исправлено

хорошо, понял, казалось, все в файле 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 добавить полосу прокрутки вместо превышения ширины текстового поля. И они дают фиксированную ширину (в пикселях или процентах). Вы также можете добавить max-height, но если вы это сделаете, вам, возможно, придется установить overflow-y для прокрутки aswel.

10
codemirror css overflow textarea

3 ответов

легко включить перенос слов в 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>
8

это исправлено, см. вопрос для деталей, если кто-то еще может столкнуться с этой проблемой.

6

как прокомментировал Крис выше, решение, описанное в вопросе, не делает (всегда?) работать больше.

добавление max-width: ...ex; CSS, похоже, заставляет горизонтальную полосу прокрутки.

(без этого, например, просто используя width: ..., только настройка CodeMirror с lineWrapping: true (как в ответе fywe) может помешать ему явно растягивать коробку для длинных строк, но lineWrapping имеет свои недостатки (например, навигация-недружественная домашняя/конечная обработка), так что это не может действительно помощь.)

1