react使用 UEditor富文本編輯器

首先我們需要到官網下載 http://fex.baidu.com/ueditor/最新版本的編輯器

將下載的壓縮包打包后 把文件名改成 UEditor；

然后放在項目根目錄的public文件夾下

 

 然后在 public文件的index.html文件引入。要按順序引入

 

 

  <script type="text/javascript" src="UEditor/ueditor.config.js"></script>
  <script type="text/javascript" src="UEditor/ueditor.all.js"></script>
  <script type="text/javascript" src="UEditor/lang/zh-cn/zh-cn.js"></script>

　　然后在components文件夾下創建 Editor.js 組件

 

  

import React from 'react';

export default class Editor extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            id: this.props.id || null,
            ueEditor: null
        }
    }

    componentDidMount() {
        var UE = window.UE;
        let { id } = this.state;
        if (id) {
            try {
                UE.delEditor(id);
            } catch (error) { }
            let ueEditor = UE.getEditor(id, {
                autoHeightEnabled: true,
                autoFloatEnabled: true,
                //字體大小
                'fontsize': [10, 11, 12, 14, 16, 18, 20, 24, 36, 48],
                // 上傳圖片時后端提供的接口
                serverUrl: '',
                enableAutoSave: false,
                // eslint-disable-next-line no-dupe-keys
                autoHeightEnabled: false,
                initialFrameHeight: this.props.height,
                initialFrameWidth: '100%',
            });
            this.setState({ ueEditor });
            //判斷有沒有默認值
            ueEditor.ready((ueditr) => {
                var value = this.props.value ? this.props.value : '<p></p>';
                ueEditor.setContent(value);
            });
            //將文本回調回去
            ueEditor.addListener('selectionchange', (type) => {
                //console.log(ueEditor.getContent())
                this.props.callback(ueEditor.getContent());
            });

            //清空富文本內容
            //this.refs.ueditor.changeContent("");
        }

    }

    render() {
        let { id } = this.state;
        return (<div>
            <textarea id={id} style={{ width: this.props.width, height: this.props.height }}></textarea>
        </div>)
    }
}

　　然后在需要的頁面引入 Editor 

 

 

 

 打開頁面，我們就可以看到  Editor富文本