2015-03-20 19 views
6

Szukałem edytora HTML do React, ale ponieważ nie znalazłem nic, co działa dobrze (muszę tylko sformatować Tekst h1, h2, h3, p, pogrubienie i obrazy [w base64])React HTML Editor (TinyMce)

Pod koniec zdecydowałem się na Tiny Mce, który działa dobrze. Ale tylko wtedy, gdy strona zostanie otwarta po raz pierwszy. Jeśli przejdę na tę stronę ponownie. Bez relave przeglądarki, tinymce nie jest inicjowane. Czy wiesz, jakie zdarzenie reagujące zostanie wywołane w takiej sytuacji. Oto moje małe opakowanie do tej pory:

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

Odpowiedz

7

Aby to naprawić, musiałem usunąć instancję TinyMce podczas odmontowywania.

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

dziękuję, dobre rozwiązanie w przypadku, gdy nie chcesz lub po prostu nie możesz zaimplementować żadnego edytora tekstu reakcji, który jest tam ... próbował, ale po prostu nie mógł go użyć ... i dobrej pracy –