React Ueditor 数据交互

集成

集成方法见：http://www.jianshu.com/p/d5d5ee66e733 ，这篇文章讲的很详细

交互

实例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 (            <div id={this.props.id} name="content" type="text/plain"></div>        )    }}export default Ueditor;

2.父组件回调函数

<Ueditor id="content" height="200" ref="ueditor" callback={(content) => 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("");