Выделение строк разными цветами в текстовой области

Я работаю над созданием текстового поля, редактируемого несколькими людьми, используя mobwrite. mobwrite использует diff-match-patch в своей работе. Он хорошо справляется с синхронизацией текстовой области между разными людьми. Теперь я хотел выделить патчи от разных пользователей разными цветами.

Для этого мне нужно будет как-то раскрасить «диапазон текста» в текстовой области? (конечно, не редактируя непосредственно текстовое поле!)

Я уже читал о двух подсветчиках синтаксиса — codemirror и editarea. У них есть полезные функции для получения начала и конца «диапазона текста». Но я не мог найти способ раскрасить этот диапазон выбора, не загружая МНОГО ненужного кода javascript.

Пожалуйста, предложите, как я могу добиться «раскрашивания диапазона текста в текстовой области». Спасибо.


javascript highlight textarea textrange colorize
person Prasanth    schedule 16.03.2012    source источник
comment
Вы можете взглянуть на этот вопрос: stackoverflow. com/questions/6240139/   -  person T. Junghans    schedule 16.03.2012

Ответы (1)


arrow_upward
0
arrow_downward

Один известный мне метод — установить непрозрачность текстовой области на 0 и поместить div позади. Он должен иметь одинаковую ширину/высоту/положение/размер текста/и т. д. Затем вам просто нужно отправить весь ввод из текстовой области в div. Как только это будет завершено, вы сможете размещать кнопки на странице, которые инициируют функцию javascript, которая извлекает выбранный текстовый диапазон, а затем изменяет div на основе этого.

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

Это должно помочь вам начать:

<textarea onKeyDown="document.getElementById('ta_disp').innerHTML = this.value;" style="z-index: 100; position: absolute; left: 0; top: 0; width: 300px; height: 100px; opacity: 0;-moz-opacity: 0;filter: alpha(opacity=0); outline: 1px solid #f00;"></textarea>
<div id="ta_disp" style="z-index: 99; position: absolute; left: 0; top: 0; width: 300px; height: 100px; outline: 1px solid #f00;"></div>
person fie    schedule 16.03.2012
comment
Почему это не сработает, так это то, что innerHTML может содержать символы пробела (перевод строки, табуляция и т. д.), которые не будут правильно отображаться в div. Кроме того, создание непрозрачности текстового поля: 0 не отображает мигающий текстовый курсор. - person Prasanth; 16.03.2012