Tracking the changes made to a field on a web page using jscript?

We've had a a client add a new "requirement" to a project we're about to start and it's thrown us a little bit. From the end users perspective it's simple, but as a developer I have no idea how to implement it!

What our user would like is for a web form text box (ideally a rich text editor, such as CKEditor) to track the changes a user makes to the content. Note this is not to track if a change has been made but to actually highlight those changes. Basically they're after Microsoft Word's "Track Chan开发者_JAVA百科ges" feature!

The idea is as a request goes between users if one users alters a text box containing a large amount of text the next user will be easily able to identify what's changed.

I'd love to hear if anybody has ever done something similar or anybody's thoughts on if or how it may be possible?

Some one already posted an excellent answer here:

How to highlight changes/difference in one text paragraph from the other?

Hmmm... well you could store the contents of the box in a variable, then use a diff algorithm (there must be some out there, surely) to check the changes onChange and format appropriately, but will only display the difference when the user clicks outside the box. Will that be good enough? If not, you could compare the onkeypress event with the onkeyup event, and apply formatting to the difference?

Well, you need some kind of content management solution for that. It needs to have versioning so you can store different versions of the content. If your content is just text it won't be hard to do diff. If it is structured in some way (HTML or other format different from text) it might be pretty hard to identify changes. I think in the latter case you could mark new text with invisible tags, something like <edition version="1.0"> </edition> that the editor will highlight. You could also make tag for deleted text. And you could just not highlight the text and don't show the deletions as an option.