ReactUeditor数据交互代码实例

交互

实例1：及时反馈输入

实现：

原理：

在ue组件中创建监听selectionchange事件，并且在事件中调用从父组件继承的回调函数，来及时响应到父组件中。

1.Ue组件：

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

class Ueditor extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    componentDidMount() {
        this.editor = this.initEditor()
    }
    componentWillUnmount() {
        // 组件卸载后，清除放入库的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, { /*这里是配置*/ });
        const self = this;
        ueEditor.ready((ueditor) => {
            if (!ueditor) {
                UE.delEditor(id);
                self.initEditor();
            }
        });
        //监听用户输入，用于及时及时反馈，事件中调用父组件的callback回调函数
        let me = this;
        ueEditor.addListener('selectionchange', function(type) {
            me.props.callback(this.getContent());
        });
        return ueEditor;
    }
    render() {
        return (
            

2.父组件回调函数

 this.handleUeditorContent(content,this.state.currentSelectionIndex)}/>


//实时在左边列表显示ueditor的内容
handleUeditorContent(content, index) {
    let arr = this.state.articleData.articleContent;
    arr[index].contentText = content;
    this.setState({
        articleData: this.state.articleData
    });
}

实例2：点击父组件按钮，调用ueditor组件方法（例如清空当前ueditor）

实现：

原理：

在父组件引用的ueditor标签中加入ref属性，然后调用ueditor组件中生命的方法即可

1.Ue组件：

见上面的代码，主要用到的changeContent这个函数方法

2.父组件中的ueditor标签：

见上面的代码，主要用到了ref属性

3.调用方法（清空ueditor）：

//在父组件的方法中直接调用
this.refs.ueditor.changeContent("");