Сбой редактора Froala после 11-кратного изменения модели в React - PullRequest
Новая
       21

Сбой редактора Froala после 11-кратного изменения модели в React

0 голосов
/ 21 декабря 2018

Я создал простой онлайн-редактор без идентификатора, реализованный в бэкэнде с Node.JS с Socket.IO, MongoDB и клиентом, использующим React для подключения Socket.IO.

Для создания редактора я использовал Froala Editor с act-froala-wysiwyg в качестве плагинов для React.

Я развернул свое приложение на Heroku по адресу https://dontpad.herokuapp.com, и оно отлично работает с несколькими пользователями (Socket работает нормально).

Это мой скриншот о том, как он работал с 7 пользователями онлайн один раз и работает, когда кто-то меняет данные:

enter image description here


Ошибка

Но я обнаружил, что после редактора Froala после изменения 11 раз , происходит сбой редактора Froala , и я неНе понимаю, что происходит?

Это скриншот после того, как модель Froala изменилась 10 раз , и она все еще работает:

enter image description here

И когда я изменил его на 11th , он зависал:

enter image description here

Ошибка наконсоль: (ошибка появляется только примерно через 5с после сбоя редактора - LoL)

froala_editor.pkgd.min.js: 7 Uncaught TypeError: Не удается прочитать свойство'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 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));
  }
});

Это полная версия этого файла - Editor.jsx

И это мой конфиг компонента 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 ...
  ]
};

Кто-нибудь сталкивался с такой проблемой, как я?

1 Ответ

0 голосов
/ 21 декабря 2018

Я нашел ответ на свой вопрос.

Я пробовал с простой версией, используя Froala Editor с React и Redux на https://stackblitz.com/edit/react-froala-editor?file=style.css, и я нашел причину сбоя после 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;
}
...