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("");

最后

以上就是野性鸭子为你收集整理的React Ueditor 数据交互的全部内容，希望文章能够帮你解决React Ueditor 数据交互所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。