官网地址: https://www.kancloud.cn/wangfupeng/wangeditor3/332599
首先,在 React 项目中安装 wangEditor3 插件
npm install wangeditor
封装的子组件
import React, { PureComponent } from 'react'
import E from 'wangeditor'
import prefix from '../../config'
class Editor extends PureComponent {
constructor(props) {
super()
this.state = {
value: props.value,
}
}
componentWillReceiveProps(nextProps) {
if (this.props.value !== nextProps.value) {
this.setState({
value: nextProps.value,
})
this.onChange(nextProps.value)
}
}
componentDidMount() {
const { value, otherProps } = this.props
this.editor = new E(this.editorDom)
this.editor.customConfig = {
uploadImgServer: `${prefix}/image/upload`, // 上传图片到服务器
uploadImgMaxSize: 2 * 1024 * 1024, // 将图片大小限制为 2M
uploadImgHooks: {
customInsert: function (insertImg, result, editor) {
result.data.map((item, i) => {
var url = result.data[i].filePath
insertImg(url)
})
},
},
onchange: this.onChange,
...otherProps,
}
this.editor.create()
this.editor.txt.html(value)
}
componentDidUpdate(prevProps, prevState) {
if ('value' in this.props && prevState.value !== this.state.value) {
this.editor.txt.html(this.state.value || '')
}
}
onChange = (html) => {
const { onChange } = this.props
if (onChange) onChange(html)
}
render() {
return (
<div
ref={(node) => {
this.editorDom = node
}}
/>
)
}
}
export default Editor
父组件
import React, { Component } from 'react'
import Editor from 'components/Editor'
class Edit extends BaseComponent {
state={
editor: ''
}
inputChangeHandler(val, key) {
this.setState({
[key]:val
})
}
render() {
return (
<Editor onChange={(val) => this.inputChangeHandler(val, 'editor')}/>
)
}
}
export default Edit