а также
дал простой онлайн-редактор без идентификатора, реализованный в бэкэнде с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 ...
]
};
Кто-нибудь сталкивался с такой проблемой, как я?