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

Question

我已经在线构建了一个没有身份的简单编辑器，并在后端使用带有 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：无法读取Object.E的Object.f [as
isEmpty]（froala_editor.pkgd.min.js：7）的null属性’VOID_ELEMENTS’（获取）（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));
  }
});

这是此文件的完整版本
-Editor.jsx

这是
我的Froala编辑器组件的配置。我的配置有问题吗？

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
上将FroalaEditor与React和Redux一起使用了简单版本，并尝试了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;
}