React HTML Editor (TinyMce)

Question

Ero alla ricerca di un editor HTML per React, ma poiché non ho trovato nulla che funzioni bene (ho solo bisogno di formattare il testo h1, h2, h3, p, grassetto e immagini [in base64])

Alla fine ho deciso di usare Tiny Mce, che funziona bene. Ma solo quando la pagina viene aperta per la prima volta. Se arrivo di nuovo a quella pagina. Senza un relaod del browser, quindi tinymce non è inizializzato. Sai cosa reagirà l'evento verrà attivato in una situazione del genere. Ecco il mio piccolo involucro finora:

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

Per risolvere questo problema, ho dovuto eliminare l'istanza TinyMce quando smonta.

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