Вопрос по node.js, froala, redux, socket.io, reactjs –  а также

0

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

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

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

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


ошибка

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

Это скриншот после изменения модели Froala10 рази он все еще работает:

И когда я изменил это в11грохнул:

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

froala_editor.pkgd.min.js: 7 Uncaught TypeError: Невозможно прочитать свойство 'VOID_ELEMENTS' с нулевым значением в Object.f [as isEmpty] (froala_editor.pkgd.min.js: 7) в Object.E [as get] (froala_editor. pkgd.min.js: 9) at froala_editor.pkgd.min.js: 19


Исходный код

Это мой репо на githubhttps://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 Что-то не так в моей конфигурации?

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

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

Я нашел решение для моего вопроса huynhsamha
привет, я настоятельно рекомендую вам обратиться в службу поддержки Froala, они будут лучше помочь Yanis-git

Ваш Ответ

1   ответ
0

Я пробовал с простой версией, используя 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;
}

Похожие вопросы