首先要先在项目中安装wangEitor包
在控制台中输入以下命令 npm install wangeditor 安装（注意，这里wangeditor全是小写字母）
import E from 'wangeditor' // 引用
class App extends Component {
constructor(props, context) {
super(props, context);
this.state = {
content: "<div>默认值</div>"
}
}
componentDidMount() {
const elem = this.refs.editorElem; //获取editorElem盒子
const submit = this.refs.submit; //获取提交按钮
const editor = new E(elem) //new 一个 editorElem富文本
editor.customConfig.uploadFileName = 'upfile' //置上传接口的文本流字段
editor.customConfig.uploadImgServer = 'https://dev.xiaomon.com/api/treeroot/v1/xxx/upload/uploadImage'//服务器接口地址
editor.txt.html(this.state.content) //设置富文本默认内容
editor.create() //创建
editor.customConfig.uploadImgHooks = {
customInsert: function (insertImg, result, editor) {
var url = result.url //监听图片上传成功更新页面
insertImg(url)
}
}
submit.addEventListener('click', function () { //监听点击提交按钮
// 读取 html
this.setState({
content: editor.txt.html() //获取富文本内容
})
}, false)
}
render() {
return (
<div>
<h2>富文本编辑器</h2>
<div ref="editorElem"></div>
<div ref="submit">提交</div>
</div>
);
}
}
export default App;
image
