Edit HTML Editor (TinyMce)

Question

I was looking for an HTML editor for React, but since I did not find anything that works fine (I just need to format the text h1, h2, h3, p, bold and images [in base64])

In the end, I decided to use Tiny Mce, which works great. But only when the page opens for the first time. If I get to this page again. Without relaod browser, then tinymce is not initialized. Do you know what kind of reacting event will be triggered in such a situation. Here is my little wrapper:

/** @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; 

Answer 1

To fix this, I had to remove the TinyMce instance when unmounting.

 componentWillUnmount: function() { tinymce.remove('#' + this.props.lang + '-editor'); }