【问题标题】：Froala Editor crash after 11 times model changed in React在 React 中更改 11 次模型后，Froala 编辑器崩溃
【发布时间】：2019-05-21 14:35:43
【问题描述】：

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

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

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

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

错误

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

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

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

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

froala_editor.pkgd.min.js:7 未捕获类型错误：无法读取属性 'VOID_ELEMENTS' 为空在 Object.f [as isEmpty] (froala_editor.pkgd.min.js:7) 在 Object.E [as get] (froala_editor.pkgd.min.js:9) 在 froala_editor.pkgd.min.js:19

源代码

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

这是我的代码渲染Froala Editor

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

我使用Redux 将状态映射到子组件的道具，所以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 ...
  ]
};

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

【问题讨论】：

您好，我强烈建议您联系 Froala 支持，他们会提供更好的帮助
我找到了我的问题的解决方案

标签： node.js reactjs redux socket.io froala

【解决方案1】：

我找到了问题的答案。

我在https://stackblitz.com/edit/react-froala-editor?file=style.css 上使用 Froala 编辑器和 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;
}

【讨论】：