Integrate

The integration method is as follows: http://www.jianshu.com/p/d5d5ee66e733 , this article is very detailed

interactive

Example 1: timely feedback input

realization:

Principle:
Create listener selectionchange events in ue components and invoke callback functions inherited from parent components in time to respond to parent components in time.

1.Ue components:

import React, { Component, PropTypes } from 'react';

class Ueditor extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    componentDidMount() {
        this.editor = this.initEditor()
    }
    componentWillUnmount() {
        // After the component is unloaded, clear the id
        UE.delEditor(this.props.id);
    }

    changeContent(text) {
        this.editor.setContent(text || '');
    }

    initEditor() {
        const id = this.props.id;
        const ueEditor = UE.getEditor(this.props.id, { /*Here is the configuration*/ });
        const self = this;
        ueEditor.ready((ueditor) => {
            if (!ueditor) {
                UE.delEditor(id);
                self.initEditor();
            }
        });
        //Monitor user input for timely and timely feedback, calling parent components in events.callbackCallback function
        let me = this;
        ueEditor.addListener('selectionchange', function(type) {
            me.props.callback(this.getContent());
        });
        return ueEditor;
    }
    render() {
        return (
            <div id={this.props.id} name="content" type="text/plain"></div>
        )
    }
}
export default Ueditor;

2. Parent component callback function

<Ueditor id="content" height="200" ref="ueditor" callback={(content) => this.handleUeditorContent(content,this.state.currentSelectionIndex)}/>


//Display the contents of ueditor in the left list in real time
handleUeditorContent(content, index) {
    let arr = this.state.articleData.articleContent;
    arr[index].contentText = content;
    this.setState({
        articleData: this.state.articleData
    });
}

Example 2: click the parent component button to call the ueditor component method (for example, clear the current ueditor)

realization:

Principle:
The ref attribute is added to the ueditor tag referenced by the parent component, and the method of life in the ueditor component is invoked.

1.Ue components:
See the above code. The main function method is changeContent

2. ueditor label in parent component:
See the above code, mainly using the ref attribute

3. Call method (clear ueditor):

//Called directly in the method of the parent component
this.refs.ueditor.changeContent("");