突出顯示textarea中不同顏色的字符串

我正在製作一個由多人編輯的textarea - 使用mobwrite。 mobwrite在其工作中使用diff-match-patch。它在各個人之間同步文本區方面做得很好。現在，我想要的是突出顯示來自不同用戶的不同顏色的補丁。突出顯示textarea中不同顏色的字符串

爲此，我將不得不以某種方式着色textarea中的「文本範圍」？（不用直接編輯textarea本身！）

我已經閱讀了關於兩種語法熒光筆 - codemirror和editarea。它們對於獲得「文本範圍」的開始和結束有用。但是，如果不加載大量不必要的JavaScript代碼，我無法找到一種着色此選擇範圍的方法。

請建議我如何實現「在textarea中着色一定範圍的文本」。謝謝。

來源

2012-03-16 Prasanth

你可能想看看這個問題：http://stackoverflow.com/questions/6240139/highlight-text-range-using- javascript – 2012-03-16 11:39:34

我知道的一種方法是將textarea的不透明度設置爲0，並將放在後面。它必須具有相同的寬度/高度/位置/文字大小/等。那麼你只需要將所有輸入從textarea發送到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>

來源

2012-03-16 11:46:07 fie

爲什麼不能這麼做呢，innerHTML可以包含空格字符（換行符，製表符等），它們不會在div上正確顯示。另外，使textarea不透明度：0不會顯示閃爍的文本光標。 – Prasanth 2012-03-16 13:45:17

突出顯示textarea中不同顏色的字符串

回答

相關問題