使用tinyMCE和Node Js的协作文本编辑器项目？

I am trying to build a collaborative text editor using (1) tinyMCE as editor and (2) Node js + Socket.io for messaging between peers.

我正在尝试使用(1)tinyMCE作为编辑器和(2)节点js + Socket.io来构建协作文本编辑器,以便在对等体之间进行消息传递。

The second part (2) is no problem, messages are coming and going, without any problem. But I can't find the right method to get the typed characters and append these to the other peer's editor window.

第二部分(2)没问题,消息来来往往,没有任何问题。但是我找不到合适的方法来获取键入的字符并将它们附加到其他对等的编辑器窗口。

Right now I use: tinyMCE.activeEditor.getContent() to get the text and tinyMCE.activeEditor.setContent(target_textarea) to set it on the other side. The problem is that the second method replaces everything in the peer's editor deleting in the same time what was written already.

现在我使用:tinyMCE.activeEditor.getContent()来获取文本和tinyMCE.activeEditor.setContent(target_textarea)来设置它的另一面。问题是第二种方法取代了同行编辑器中的所有内容,同时删除了已写入的内容。

I have tried concat() as well using a second variable, but this won't work either.

我已尝试使用concat()以及第二个变量,但这也不起作用。

Maybe someone has a tip on how to achieve this collaborative editor.

也许有人对如何实现这个协作编辑器有一个提示。

Thanks!

code:

...

var text = '';
    socket.on('textarea_changed', function(textarea_content){
        console.log(textarea_content);
        //text = text + ' ' + (textarea_content);
        //console.log(text);
        $(tinyMCE.activeEditor.setContent(textarea_content));
    });


  //if any key is pressed
  function tinyMceKeydown(){  
        //send message
        console.log(tinyMCE.activeEditor.getContent());
        socket.emit('keypressed', 'tom');
    };


...

2 个解决方案

#1

I haven't used tinyMce and haven't had a look at the API. However one suggestion that i can offer, which i believe might help, is that you might want to change your approach.

我没有使用过tinyMce,也没有看过API。然而,我认为可以提供的一个建议是,您可能希望改变您的方法。

Rather than transmitting and replacing the entire text , you might want to: - Identify the new text typed/inserted - Send this to the second user (Socket.io) - In the editor of the second user, insert this new text (using the relevant API, i.e. insert at the same position using some text range api)

您可能希望: - 识别输入/插入的新文本 - 将其发送给第二个用户(Socket.io) - 在第二个用户的编辑器中插入此新文本(使用相关API,即使用某些文本范围api插入相同位置)

One of the other benefits (apart from losing changes that the other user made), is you only send incremental updates (only the changes), as opposed to sending the entire text.

除了丢失其他用户所做的更改之外,其他一个好处是,您只发送增量更新(仅更改),而不是发送整个文本。

#2

I have developed this, a collaborative tinymce editor with the help of PHP laravel and Socket io with Node JS. Rather than replacing the whole content, the best way to achieve this is to find the previous and next element from the editor.

我已经开发了这个,在PHP laravel和Socket io与Node JS的帮助下,一个协作的tinymce编辑器。而不是替换整个内容,实现这一目标的最佳方法是从编辑器中找到上一个和下一个元素。

Write a keydown/keyup event for the tinymce, inside that transfer the typed text and previousElementSibling of the current typed content. Transfer this object data to the opposite user and populate with in the other user's editor by finding the exact position from previousElementSibling and place the content. i have completed the project and achieved the collaboration with ease.

为tinymce编写一个keydown / keyup事件,在其中传输当前键入内容的类型化文本和previousElementSibling。将此对象数据传输给对方用户,并通过查找previousElementSibling中的确切位置并在其他用户的编辑器中填充并放置内容。我已经完成了项目并轻松实现了合作。

#1