Ответ 1
Исправлено, см. вопрос для деталей, если кто-то еще может столкнуться с этой проблемой.
Я работал с 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 (высота выполняется автоматически, поэтому нет необходимости в вертикальной полосе прокрутки). переполнение-x: прокрутка; чтобы заставить CodeMirror добавить полосу прокрутки, а не ширину текстовой области. И они дают фиксированную ширину (px или процент). Вы также можете добавить max-height, но если вам, возможно, придется установить overflow-y для прокрутки aswel.
Исправлено, см. вопрос для деталей, если кто-то еще может столкнуться с этой проблемой.
Легко включить перенос слов в 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>
Как заметил Крис выше, решение, описанное в вопросе, больше не работает (всегда?).
Однако добавление max-width: ...ex;
в CSS, похоже, вынуждает горизонтальную полосу прокрутки.
(Без этого, например, просто используя width: ...
, только конфигурация CodeMirror с lineWrapping: true
(как в ответе на fywe) может помешать ей явно нарисовать поле для длинных строк, но у lineWrapping есть свои недостатки (например, навигация недружественная Home/End), чтобы это не помогло.)