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

Question

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

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

我已经在https://dontpad.herokuapp.com上的 Heroku 上部署了我的应用程序，并且它在多个用户的情况下工作正常（套接字工作正常）。

这是我一次与 7 个用户在线工作的屏幕截图，当有人更改数据时它会工作：

错误

但是我检测到Froala Editor 更改11 次后，Froala editor 崩溃了，我不明白发生了什么？

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

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

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

froala_editor.pkgd.min.js:7 未捕获的类型错误：无法读取 Object.f [as isEmpty] (froala_editor.pkgd.min.js:7) at 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发射到 socket 和 call 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上尝试使用带有 React 和 Redux 的 Froala 编辑器的简单版本，我发现它在 11 次后崩溃的原因。

因为Froala 是使用license 的，但是我用CSS 去掉了Froala 的banner，所以当第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;
}