node.js - 在React中更改模型11次后Froala Editor崩溃

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

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

我已经在https://dontpad.herokuapp.com的Heroku上部署了我的应用程序，并且可以与多用户一起正常工作（Socket可以正常工作）。

这是我的萤幕撷取画面，显示了一次如何与7位使用者在线运作，以及有人变更资料时运作的画面：





错误

但是我发现在更改了11次Froala编辑器之后，Froala编辑器崩溃了，我不知道发生了什么事？

这是Froala的模型更改10次后的屏幕截图，并且仍在工作：



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



控制台上的错误是：（自编辑器崩溃以来，错误仅在大约5秒钟后出现-LoL）


  froala_editor.pkgd.min.js：7未捕获的TypeError：无法读取属性
  “ VOID_ELEMENTS”为空
      在Object.f [as isEmpty]（froala_editor.pkgd.min.js：7）
      在Object.E [获取]（froala_editor.pkgd.min.js：9）
      在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 ...
  ]
};

有谁遇到过像我这样的问题？

最佳答案

我已经找到了问题的答案。

我已经尝试过在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;
}