1

所以我最近正在使用 React 和 socket.io开发这个协作式文本编辑器。

我的 app.js 看起来有点像这样：

const [content, updateContent] = useState('');
socket.on("update", (data)=>{
if(access === true){
currContent = data
updateContent(data)
}
  })

  const contentBlock = htmlToDraft(content);
  const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
  const editorState = EditorState.createWithContent(contentState);


  class ControlledEditor extends Component {
constructor(props) {
  super(props);

    this.state = {
      editorState,
    };
  }


onEditorStateChange: Function = (editorState) => {
  this.setState({
    editorState,
  });
  if(access===true && user==="Admin"){
  currContent = draftToHtml(convertToRaw(editorState.getCurrentContent()))
  socket.emit("message",[currContent,id])}
};

render() {
  const { editorState } = this.state;
  if(access === true && user==="Admin"){
  return (
    <Editor
      editorState={editorState}
      wrapperClassName="demo-wrapper"
      editorClassName="demo-editor"
      onEditorStateChange={this.onEditorStateChange}
    />
  )})
 }
}

}

发生了什么：每当房间中的任何人键入内容时，它都会发出一个套接字事件，然后房间中的每个客户端都会监听该事件，并且每个人都会更改 useState 内容的值，这会强制每个接收到内容的客户端的编辑器重新渲染，因此，实际上不可能在编辑器在您键入时将其值更改为新值的同时进行编写。

应该发生什么：房间里的所有客户都应该获取数据并在他们的编辑器上更新它，但所有人都应该能够同时编写，就像在谷歌文档上发生的那样。

我目前正在为此使用 react-draft-wysiwyg，我知道他们还有很多其他可用的文本编辑器，如果有任何一个可以帮助我解决这个问题，我完全可以更换编辑器。

你可以试试这个：https ://kalam-editor.herokuapp.com/opendocument 只需输入 docid：1234 和密码：1234。（如果显示 docid 不存在，只需单击打开文档按钮 2-3 次）

4

0 回答 0