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富文本