3

So, I'm looking at implementing a real time collaborative editor, as some of the pre made ones (such as etherpad) lack the features of a dedicated editor.

I currently use CKEditor, but am looking to switch to Aloha Editor.

I am going to be using Pusher for push notifications / update to places around my app so that everything can be as real time as possible as multiple people use the software.

Now, initially my thought process on how to implement a collaborative editor seems really slow -- To constantly swap out entire text fields using pusher... but moving giant blocks of text around would get terribly ugly fast, and I'm not really sure what to do when there are multiple ( > 5 ) people working on text at the same time.. So... there MUST be an easier, more network efficient way to go about doing collaborative editing.

Ideas?

NullVoxPopuli
  • 51,415
  • 69
  • 184
  • 335
  • not a whole lot on implementation (I haven't really found any details). just existing editors. – NullVoxPopuli Jan 31 '12 at 14:57
  • 1
    Maybe do some background research, then you can ask a slightly more specific question than "How do I do it"? – Marcin Jan 31 '12 at 14:58
  • well, judging by the answer by @Sergio Tulentsev, I think I'd need to write a plugin for CKEditor or Aloha that is intregrated with Pusher for smart deltas... And calculate the offset at certain locations for each editor until an update is made. – NullVoxPopuli Jan 31 '12 at 15:03
  • Yes, it's a very hard problem, so you'll want to use an existing library / service. Here's an article we put together discussing the various generic (meaning not tied to any specific UI component) solutions: https://convergencelabs.com/realtime-collaboration-technology-guide/ – alalonde Jan 29 '19 at 19:12

2 Answers2

5

A real time collaboration plugin for the Aloha-Editor called Aloha-Wikdiocs was released at the jQuery conference 2012. It's still alpha but already works quite well.

It's not open source. The real-time collaboration is provided as a service that can be integrated with existing systems. Currently there is no fee for this service.

There is a demo and some documentation on how to integrate the service on the website.

Inshallah
  • 4,646
  • 25
  • 24
  • you are my new best friend o.o – NullVoxPopuli Feb 14 '12 at 16:54
  • @TheLindyHop, Hmm, did you get an API Key and replace the corresponding values in the sample code? I got the example working for me: http://github.com/Aloha-Wikidocs/Example – Inshallah Feb 14 '12 at 17:26
  • @TheLindyHop, I have it working in Google Chrome 16.0.912.77. What version are you using? Are there any errors in the console? – Inshallah Feb 14 '12 at 17:29
  • no errors, just nothing happens when I try to connect to facebook. – NullVoxPopuli Feb 14 '12 at 17:46
  • and I have version 17. something (latest stable, I think(also not the dev version -- that one breaks a lot)) – NullVoxPopuli Feb 14 '12 at 17:47
  • 2
    Try to clone the github example. There is no Facebook involved and it should work out of the box. The only thing to do is to touch a file with the API key. https://github.com/Aloha-Wikidocs/Example – Haymo Meran Feb 14 '12 at 18:41
  • @TheLindyHop, when you click the "connect" button, does a popup open? If yes, does logging in with facebook make the red box with the "connect" button vanish? – Inshallah Feb 14 '12 at 19:04
  • nope, no popup. There is something wrong with my chrome though, as the downloads bar doesn't even show up when I download stuff. o.o idk. Not sure if problem with my chrome or what. – NullVoxPopuli Feb 14 '12 at 19:15
1

Group changes together and calculate smart deltas.

For example, a user presses keys 'h', 'e', 'l', 'l', 'o'. Your javascript groups them and reports to the server: "User A inserted text 'hello' at position X".

You get the idea.

Sergio Tulentsev
  • 210,238
  • 40
  • 347
  • 343