在 React 中更改模型 11 次后 Froala Editor 崩溃

Question

我已经构建了一个没有身份的简单在线编辑器，在后端使用 Node.JS 和 Socket.IO、MongoDB 和客户端实现使用 React 连接 Socket.IO.

为了创建编辑器，我使用 Froala Editor with react-froala-wysiwyg 作为 React 的插件。

我已经在 https://dontpad.herokuapp.com 的 Heroku 上部署了我的应用程序，它在多个用户下运行良好（Socket 运行良好）。

这是我的截图，关于它如何与 7 位用户一起在线工作，并且当有人更改数据时它工作：

错误

但是我检测到Froala编辑器在修改了11次之后，Froala编辑器崩溃了，我不明白是什么正在发生？

这是 Froala 模型更换 10 次 后的屏幕截图，它仍然有效：

当我在 11th 更改它时，它崩溃了：

控制台上的错误是：（错误仅在编辑器崩溃后约 5 秒 后出现 - 大声笑）

froala_editor.pkgd.min.js:7 Uncaught TypeError: Cannot read property 'VOID_ELEMENTS' of null at Object.f [as isEmpty] (froala_editor.pkgd.min.js:7) at Object.E [as get] (froala_editor.pkgd.min.js:9) at froala_editor.pkgd.min.js:19

源代码

这是我在 github https://github.com/huynhsamha/dontpad

上的回购

这是我的代码渲染图Froala Editor

<FroalaEditor
            tag="textarea"
            model={this.props.model}
            config={configFrolaEditor}
            onModelChange={this._onChangeModel}
          />

我使用 Redux 将状态映射到 props 到子组件，所以 model={this.props.model}。

const mapStateToProps = state => ({
  model: state.Model
});

这是 _onChangeModel，它发送到套接字并调用 this.props.editModel(model);，即 mapDispatchToProps

  _onChangeModel = (model) => {
    this.timeShowTextSaving = Date.now();
    this.props.editModel(model);
    this.setState({ stateModel: msg.SAVING });
    socket.emit(conf.socket.client.modelChanged, {
      model, room: this.room
    });
  }


// This is mapDispatchToProps
const mapDispatchToProps = dispatch => ({
  editModel: (model) => {
    dispatch(actions.editModel(model));
  }
});

这是full version of this file - Editor.jsx

这是my config of Froala Editor Component我的配置有问题吗？

export const config = {
  placeholderText: 'Edit Your Content Here!',
  spellcheck: false,
  scaytAutoload: false,
  charCounterCount: false,
  theme: 'custom',
  indentMargin: 10,
  heightMin: window.screen.availHeight,
  fontFamily: {
    // fonts ...
  },
  toolbarButtons: [
    'bold', 'italic', // buttons ...
  ]
};

有没有人和我一样遇到过这个问题？

Answer 1

我找到了问题的答案。

我在 https://stackblitz.com/edit/react-froala-editor?file=style.css 上尝试使用带有 React 和 Redux 的 Froala Editor 的简单版本，我发现了为什么它在 11 次后崩溃。

因为 Froala 使用许可证，但我使用 CSS 删除 Froala 的横幅，所以当第 11 次更改时，编辑器会崩溃。

我试过隐藏版（隐藏许可证横幅）和不隐藏版，隐藏版在11次后崩溃。

我也找到了一个技巧来解决这个问题，我没有隐藏横幅，但是我通过 font-size: 0 和 padding: 0

设置它是不可见的

div.fr-wrapper>div>a {
        /* display: none !important; */
        /* position: fixed; */
        /* z-index: -99999 !important; */
    font-size: 0px !important;
    padding: 0px !important;
    height: 0px !important;
}

在 React 中更改模型 11 次后 Froala Editor 崩溃

Froala Editor crash after 11 times model changed in React

node.js

socket.io

reactjs

froala

redux

错误

源代码