1

I am working on making a textarea editable by multiple people - using mobwrite. mobwrite uses diff-match-patch in its working. It does the job well of synchronizing the textarea between various people. Now, what I wanted was to highlight the patches coming from different users in different colors.

For doing this, I will have to somehow colorize a "range of text" in a textarea? (with out ofcourse editing the textarea itself directly!)

I have already read about two syntax highlighters - codemirror and editarea. They have useful functions for obtaining start and end of "range of text". But, I couldn't find a way of colorizing this selection range without loading LOT OF unnecessary javascript code.

Please suggest how I can achieve "colorizing a range of text in a textarea". Thank you.

Prasanth
  • 5,230
  • 2
  • 29
  • 61
  • You may want to have a look at this question: http://stackoverflow.com/questions/6240139/highlight-text-range-using-javascript – T. Junghans Mar 16 '12 at 11:39

1 Answers1

0

One method I'm aware of is to set the opacity of the textarea to 0 and place a div behind it. It must have the same width/height/position/text-sizes/etc. Then you just need to send all input from the textarea to the div. Once that is complete you will be able to put buttons on the page that initiate a javascript function that retrieves selected text range and then alter the div based on that.

One issue with this is that the user won't see their text being highlighted so that will need to be emulated.

This should get you started:

<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>
fie
  • 407
  • 3
  • 10
  • Why that won't just do is, the innerHTML can contain whitespace characters(newline, tab etc) that won't be properly displayed on the div. Also, making the textarea opacity:0 doesn't display blinking text-cursor. – Prasanth Mar 16 '12 at 13:45