Javascript: Getting and saving text selection ranges in a database

Question

I'm building a gramma-checker system for a client, where users can add comments/suggestions to a given text. When a user selects some text, a button appear to create a comment/suggestion to that given text selection. My problem comes when I want to save the text selection range in a database, along with the comment/suggestion.

I'm currently trying to solve the problem by using Rangy (http://rangy.googlecode.com/).

These are the ideas I'v tried so far:

• Using the rangy serializer to serialize the range. The problem with this approach is that the DOM is changing each time a new comment/suggestion is added, and therfore not allowing for a successful deserialization.
• Using the rangy selection wrapper and save that directly in the database, but like the idea above, the target elements content is changing with each comment/suggestion, which again makes the approach not work as intended.

Any suggestions to how I could solve this problem would be appriciated.

Answer 1

I haven't used rangy. But here is one way I would approach it.

1. Get a selected text from a element (tutorial here)

2. Then add a wrapper span with a specific id to it. (You might want to fetch a unique id from your server)

3. Then show a form to enter comments.

4. On Submit, send the span id and comment to server and store it in database.

5. When re rendering you can easily assign a class to this span to mark it and show comments on hover using css.

6. This will give you a system like google document where you can comment on text.

Let me know if that helps or you need more explanation on how to accomplish individual steps.

Advantage of this is you dont need to send the selected text back to server or worry about serializing. Just the id of span you wrapped it in.