突出显示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中不同颜色的字符串

回答

相关问题