Редактировать HTML-редактор (TinyMce)
Я искал редактор HTML для React, но так как я не нашел ничего, что работает нормально (мне просто нужно отформатировать текст h1, h2, h3, p, жирный шрифт и изображения [в base64])
В конце я решил использовать Tiny Mce, которая отлично работает. Но только когда страница открывается в первый раз. Если я снова попаду на эту страницу. Без ретрансляции браузера, tinymce не инициализируется. Знаете ли вы, что реагирует событие будет вызвано в такой ситуации. Вот мой маленький фантик:
/** @jsx React.DOM */
var React = require('react');
var TinyMceEditor = React.createClass({
componentDidMount: function() {
var that = this;
tinymce.init({
selector: "textarea.tiny-mce-editor",
setup : function(editor) {
editor.on('change', function(e) {
that.props.onChange(editor.getContent());
});
},
plugins: [
"lists link image charmap print preview anchor",
"searchreplace code fullscreen",
"insertdatetime media table contextmenu paste"
],
toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
tinyMCE.get(that.props.lang + '-editor').setContent(that.props.html);
},
render:function(){
return (
<div>
<textarea ref="text" className="tiny-mce-editor" id={this.props.lang + '-editor'} />
</div>
)
}
});
module.exports = TinyMceEditor;
1 ответ
Решение
Чтобы это исправить, мне пришлось удалить экземпляр TinyMce при размонтировании.
componentWillUnmount: function() {
tinymce.remove('#' + this.props.lang + '-editor');
}