callumacrae Posted February 21, 2013 Share Posted February 21, 2013 (edited) 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 February 21, 2013 by callumacrae Link to comment Share on other sites More sharing options...
jeffman Posted February 21, 2013 Share Posted February 21, 2013 I tried this once, a few years ago, and gave up. You end up getting into text ranges and a lot of things that don't work the way you want them to. Do you know tinyMCE Link to comment Share on other sites More sharing options...
callumacrae Posted February 21, 2013 Author Share Posted February 21, 2013 Yup. I don't want to make a WYSIWYG editor though, I just want to make a textarea-like element which will show what has been changed. Link to comment Share on other sites More sharing options...
justsomeguy Posted February 22, 2013 Share Posted February 22, 2013 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 More sharing options...
callumacrae Posted February 22, 2013 Author Share Posted February 22, 2013 If the contents of the form are "aaaaaaaa" and the user selects "aa", I have no way of knowing which "aa" they have selected. that method isn't really viable. Link to comment Share on other sites More sharing options...
thescientist Posted February 22, 2013 Share Posted February 22, 2013 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 More sharing options...
callumacrae Posted February 22, 2013 Author Share Posted February 22, 2013 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 More sharing options...
thescientist Posted February 22, 2013 Share Posted February 22, 2013 ah, i see. Link to comment Share on other sites More sharing options...
callumacrae Posted February 22, 2013 Author Share Posted February 22, 2013 I'm trying a different approach, which is using a transparent(ish) textarea over a div and diffing them. Deletion isn't working properly, though, and I'm not sure how to solve it: http://jsfiddle.net/Dgn4z/1/ Link to comment Share on other sites More sharing options...
justsomeguy Posted February 22, 2013 Share Posted February 22, 2013 That doesn't look bad, although there are some alignment and wrapping issues in Opera. It looks decent in Chrome though. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now