Question

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

第二部分（2）没有问题，消息来来往往，没有任何问题。但我找不到合适的方法来获取类型化的字符并将它们附加到其他对等的编辑器窗口。

现在我使用： tinyMCE.activeEditor.getContent（）来获取文本， tinyMCE.activeEditor.setContent（target_textarea）将其设置在另一侧。问题是第二种方法取代了同行编辑器中的所有内容，同时删除了已写入的内容。

我也尝试过使用第二个变量的concat（），但这也不行。

也许某人有关于如何实现此协作编辑器的提示。

谢谢！

代码：

...

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');
    };


...

Answer 1

我还没有使用过tinyMce，并且没有看过API。但是，我认为可以提供的一个建议是，您可能希望改变您的方法。

您可能希望：而不是传输和替换整个文本： - 确定键入/插入的新文本 - 发送给第二个用户（Socket.io） - 在第二个用户的编辑器中，插入此新文本（使用相关API，即使用某些文本范围api插入相同位置）

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

Answer 2

我通过PHP laravel和带有Node JS的Socket io开发了一个协作的tinymce编辑器。代替替换整个内容，最好的方法是从编辑器中查找上一个和下一个元素。

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

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

2 个答案: