react html编辑器,react使用 UEditor富文本编辑器

将下载的压缩包打包后 把文件名改成 UEditor；

然后放在项目根目录的public文件夹下

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

然后在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 : '

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 (

}

}

然后在需要的页面引入 Editor

打开页面，我们就可以看到  Editor富文本