最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - React HTML Editor (TinyMce) - Stack Overflow

programmeradmin0浏览0评论

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({
    ponentDidMount: 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;

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({
    ponentDidMount: 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;
Share Improve this question asked Mar 20, 2015 at 14:40 SafariSafari 3,3829 gold badges49 silver badges66 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 7

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

ponentWillUnmount: function() {
    tinymce.remove('#' + this.props.lang + '-editor');
}
发布评论

评论列表(0)

  1. 暂无评论