React HTML Editor (TinyMce)

Question

I was searching for an HTML Editor for React, but since I found nothing that works fine (I just need to format Text h1, h2, h3, p, bold and images [in base64])

At the end I decided to use Tiny Mce, which works fine. But only when the page gets opened for the first time. If I get to that page again. Without a browser relaod, then tinymce is not initialized. Do you know what react event will be triggered in such a situation. Here is my little wrapper so far:

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

Safari · Accepted Answer · 2015-03-24 12:19:43Z

7

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

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

answered Mar 24, 2015 at 12:19

Safari

3,3929 gold badges50 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

H.C Over a year ago

thanks, good solution in case you don't whant or simply can't implement any of react text editors that are out there... tried but simply couldn't use anyway... and good work

Collectives™ on Stack Overflow

React HTML Editor (TinyMce)

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related