Как пронумеровать строки в textarea?

Question

[gereedschapskist]

Нужно максимально приблизить textarea к виду html-редактора.

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

Так что ищу:
1. Простые решения по нумерации строк в textarea (например, создать еще одну textarea рядом и как-то синхронизировать).
2. Возможно, код для выделения html тегов (но это не обязательно).
3. Готовые решения по этой теме с возможностью впоследствии как-то обратиться к получившемуся элементу.
4. Ссылки на полезные примеры/методы.

Спасибо!

Answer 1

[iDennis]

<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<textarea id="code" >
ваш
код
тут
</textarea>


<script>
 var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        lineNumbers: true,
        lineWrapping:true,
        autofocus:true
      });

editor.setCursor(2,2);     // это значит поместить курсор на 3 строку (отсчёт от 0), символ 3

var pos=editor.posFromIndex(3);  //получить координаты 3-ей позиции (строку и символ)
editor.setCursor(pos.line,pos.ch);       

</script>

с textarea лучше такого не делать, смотрите codemirror, вот api

Comments

[gereedschapskist]

codemirror сам предлагает из textarea создать это окошко и, как я понимаю, сам потом textarea и формирует, но я не знаю, как к нему обратиться в js

[iDennis]

codemirror это не textarea

[gereedschapskist]

а как тогда к получившемуся элементу обращаться и менять в нем положение курсора? (а еще нужно вложить в него текст из файла, делаю это с помощью php)

[iDennis]

в документации всё написано

[gereedschapskist]

@iDennis простите, туплю. но как мне использовать этот метод doc.setCursor(pos: {line, ch}|number, ?ch: number, ?options: object)?
Как ни пробую, ошибку выдает. Допустим, нужно поставить на букву под номером 52.
Если в скрипте пишу doc.setCursor(number, 52), пишет, что doc undefined. Как правильно сформулировать метод? Спасибо! :)

[iDennis]

сейчас ...

[gereedschapskist]

@iDennis спасибо! а как перейти к символу по его общему номеру, а не номеру строка,символ?

[iDennis]

а смысл?

[gereedschapskist]

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

[gereedschapskist]

(использую indexof() для поиска места ключевого слова)

[iDennis]

сейчас...

[gereedschapskist]

Ура! Все работает! Просто огромное спасибо, что возились со мной! :) Теперь могу дальше работать.

Answer 2

[Eugene Obrezkov]

Можете Ace ипспользовать.