Jump to content

Playing with contenteditable


callumacrae
 Share

Recommended Posts

I'm trying to create something similar to annotate mode in openoffice for a website I'm developing. Basically, the user is presented with an input containing text. Any text they delete is not deleted, but marked as deleted; made red and strikethrough. Any text they add is green. The original text remains black. I'm not really sure how to do this. I know that I'll need to use contenteditable as textareas do not support styled text. I'll need one of two approaches: either I'll need to capture all user input and insert it manually, highlighting it as necessary, or I'll need to get the updated text from the input, compare it to the old text, and apply highlighting as necessary. Which would be the best approach, and how would I go about implementing it? There doesn't appear to be a way to get the caret position, so I'm not sure how I'll do it. Is there a better way I'm not aware of? I'm sure that people must have ran into this problem before; for example, the WYSIWYG editor this forum uses must do something similar. Thanks.

Edited by callumacrae
Link to comment
Share on other sites

You may be able to use the mouseup event to look for text that they just highlighted, and save that as well as the entire text in a buffer (hopefully including the position of the highlighted text in the full text, so that you can add it back later). I guess for a keyup event then you would compare the current value in the field with the complete text and the previously highlighted text, and insert the highlighted text back into the full text. The problem I see is doing an effective "diff" on the new vs. old text to accurately identify things that were added or deleted. Doing an accurate diff is certainly not a trivial problem. As for a "highlight" event, there's a discussion about that here: http://stackoverflow...highlight-event Of course, highlighting and overwriting isn't the only way to replace text, they can just backspace or delete as well. Or Select All -> Paste, for that matter. A diff might be the only way.

Link to comment
Share on other sites

if you took "aa" out of "aaaaaaaa", the end result is still "aaaaaa", so what's the problem with that? take it from the beginning, take it from the end, take it from the middle, whatever. what's the difference?

Link to comment
Share on other sites

if you took "aa" out of "aaaaaaaa", the end result is still "aaaaaa", so what's the problem with that? take it from the beginning, take it from the end, take it from the middle, whatever. what's the difference?
"Any text they delete is not deleted, but marked as deleted" In effect, if I select "aa" and delete it, I won't know whether to display "aaaaaaaa" or "aaaaaaaa".
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...