在 React 中更改 11 次模型后 Froala Editor 崩溃 [英] Froala Editor crash after 11 times model changed in React

问题描述

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

为了创建编辑器，我使用了

错误

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

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

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

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

<块引用>

froala_editor.pkgd.min.js:7 未捕获的类型错误:无法读取属性'VOID_ELEMENTS' 为 null在 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

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

const mapStateToProps = state =>({模型: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, {模型，房间:this.room});}//这是 mapDispatchToPropsconst mapDispatchToProps = dispatch =>({编辑模型:(模型)=>{调度(动作.编辑模型(模型))；}});

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

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

export const config = {placeholderText: '在此处编辑您的内容！',拼写检查:错误，scaytAutoload: 假,charCounterCount:假，主题:'自定义'，indentMargin: 10,heightMin: window.screen.availHeight,字体系列: {//字体...},工具栏按钮:['bold', 'italic',//按钮 ...]};

有人和我一样遇到过这个问题吗?

解决方案

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

我在 https://stackblitz.com/edit/react-froala-editor?file=style.css 并且我找到了它在 11 次后崩溃的原因.

因为Froala 是有license 使用的，但是我用CSS 去掉了Froala 的banner，所以当第11 次更改时，编辑器会崩溃.

我尝试了隐藏版本(隐藏许可证横幅)并且没有隐藏，并且隐藏版本在 11 次后崩溃.

我还发现了一个技巧来解决这个问题，我不隐藏横幅，但我通过 font-size: 0 和 padding: 0 设置它是不可见的>

div.fr-wrapper>div>a {/* 显示:无 !important;*//* 位置:固定；*//* z-index: -99999 !important;*/字体大小:0px ！重要；填充:0px！重要；高度:0px！重要；}

I've built a simple editor online without identity, implemented in backend with Node.JS with Socket.IO, MongoDB, and client using React connecting Socket.IO.

To create editor, I've used Froala Editor with react-froala-wysiwyg as plugins for React.

I've deployed my app on Heroku at https://dontpad.herokuapp.com and it's working fine with multiple user (Socket works fine).

This is my screenshot about how it worked with 7 user online once time, and it work when someone changes data:

Error

But I detected that after the Froala Editor after changed 11 times, the Froala editor crash, and I don't understand what is happening?

This is the screenshot after model of Froala changed 10 times, and it's still working:

And when I changed it at 11th, it crashing:

The error on console is: (error only appears after about 5s since the editor crash - LoL)

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

Source code

This is my repo on github https://github.com/huynhsamha/dontpad

This is my code rendering Froala Editor

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

I used Redux to map state to props to child component so model={this.props.model}.

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

And this is _onChangeModel which emit to socket and call this.props.editModel(model);, which is 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));
  }
});

This is full version of this file - Editor.jsx

And this is my config of Froala Editor Component Is there something wrong in my configuration?

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 ...
  ]
};

Has anyone encountered this problem like me?

解决方案

I've found the answer for my question.

I've tried with simple version using Froala Editor with React and Redux on https://stackblitz.com/edit/react-froala-editor?file=style.css and I've found why it's crashing after 11 times.

Because Froala is using with license, but I've using CSS to remove the banner of Froala so when the 11th change, editor will crash.

I've tried with hidden version (hide license banner) and with no hidden, and the hidden version is crash after 11 times.

I also found a trick how to handle this problem, I don't hide banner, but I set it is invisible by font-size: 0 and 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 崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！