What I am trying to do is something similar to how collaborative editor works. I want to allow two people to edit the same document. And for this I have to simulate an artificial caret. I can extract the other user's activity in term of addition and deletion at specified location in a textarea.

I will then transmit the location, along with the action to the other document. There I need to carry out the required change at the sent coordinate. I have searched and found enough ways to set the caret location and insert or delete text at the current caret location, but the problem is that the caret of the document moves to the location at which I make the change.

I don't want that, I want to have two carets, one each for the two users. Transmit their changes to each other documents and make the changes at their respective locations, while showing two different carets.

I just need to know if there are certain libraries that I can use, or even if I have to make this on my own, then how and where do I start. I don't even know how a textarea is represented within a browser. How can I characterize locations within a textarea, if I know that then I save the locations in memory and make the changes based on the input received.

I hope I make sense, thanks for any help.

What I am trying to do is something similar to how collaborative editor works. I want to allow two people to edit the same document. And for this I have to simulate an artificial caret. I can extract the other user's activity in term of addition and deletion at specified location in a textarea.

I will then transmit the location, along with the action to the other document. There I need to carry out the required change at the sent coordinate. I have searched and found enough ways to set the caret location and insert or delete text at the current caret location, but the problem is that the caret of the document moves to the location at which I make the change.

I don't want that, I want to have two carets, one each for the two users. Transmit their changes to each other documents and make the changes at their respective locations, while showing two different carets.

I just need to know if there are certain libraries that I can use, or even if I have to make this on my own, then how and where do I start. I don't even know how a textarea is represented within a browser. How can I characterize locations within a textarea, if I know that then I save the locations in memory and make the changes based on the input received.

I hope I make sense, thanks for any help.

• javascript
• jquery
• textarea
• caret

• 1 Not sure if the textarea is a good starting point; maybe you can abuse the HTML5 Canvas for this project then at the end somehow convert it to textarea or doc format e.g. PDF or Word, which among those I know, allows text to be added at specific areas relatively easily. – Jake Commented May 28, 2012 at 8:05
• But if I have to make a collaborative editor I have to work on the textarea. I believe I can make some progress if I can find out how are locations within a text area specified. I mean If I have my caret at position x while typing, then in what terms this position is described – Sachin Commented May 28, 2012 at 8:27
• It's in terms of the number of characters, is it not? eg. if x is 24, then the caret blinks at the 24th character. No? – Jake Commented May 28, 2012 at 8:29
• If that is the case then I am in for trouble! – Sachin Commented May 28, 2012 at 10:11
• You can mess with contenteditable or go like Google Docs and write a huge custom framework to capture keystrokes and the like... – gengkev Commented May 29, 2012 at 4:47

3 Answers 3

have you seen this?

https://github./benjamn/kix-standalone/

This is how google docs does it:

https://drive.googleblog./2010/05/whats-different-about-new-google-docs.html

You could mimic a caret with a special character and do the regex to insert the partner text and move his caret, and you can use the real one. This is the simplest design I can think. To get the idead, you could use the pipe | as a artificial caret. but this would easily conflict with user insert a pipe, to avoid this you can use sort of unmon bination, or find some unicode character to act as a caret.

A real solution but way more plicated is not use a textarea, and use a DIV. this means that you need to handle all the key events and insert the character pressed manually to the document, and register the cursor position. But this way you can insert how many carets you want not just 2, something like this <span class="caret1"></span> you can make it blink, style with css, have diferent color for each caret, etc.

Have you tried Draft.js, from facebook ? https://facebook.github.io/draft-js/

"Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences.

Draft.js makes it easy to build any type of rich text input, whether you're just looking to support a few inline text styles or building a plex text editor for posing long-form articles.

In Draft.js, everything is customizable – we provide the building blocks so that you have full control over the user interface."