Текст CodeMirror (JS Code Highlight) в текстовой области превышает ширину текстовой области - PullRequest
Новая
       25

Текст CodeMirror (JS Code Highlight) в текстовой области превышает ширину текстовой области

11 голосов
/ 06 мая 2011

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

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

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

Ответы [ 3 ]

8 голосов
/ 13 мая 2012

Легко включить перенос слов в CodeMirror, установив для параметра lineWrapping значение 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>
6 голосов
/ 06 мая 2011

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

2 голосов
/ 13 мая 2013

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

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

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

...