React Ueditor 数据交互

最新推荐文章于 2025-10-01 02:54:19 发布

原创最新推荐文章于 2025-10-01 02:54:19 发布 · 3.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react #ueditor

react 专栏收录该内容

7 篇文章

订阅专栏

本文介绍UEditor在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("");