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

Question

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

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

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

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

Answer 1

Один из известных мне методов состоит в том, чтобы установить непрозрачность текстовой области в 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>