React HTML编辑器（TinyMce）

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在寻找React的HTML编辑器，但是由于找不到任何能正常工作的东西（我只需要格式化[h64]中的文本h1，h2，h3，p，粗体和图像）

最后，我决定使用Tiny

Mce，效果很好。但仅在首次打开页面时。如果我再次进入该页面。没有浏览器的支持，tinymce不会被初始化。您知道在这种情况下会触发什么反应事件。到目前为止，这是我的小包装：

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

回答：

为了解决这个问题，我必须在卸载时删除TinyMce实例。

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

以上是 React HTML编辑器（TinyMce） 的全部内容， 来源链接： utcz.com/qa/423780.html

回到顶部