66 lines
1.7 KiB
JavaScript
66 lines
1.7 KiB
JavaScript
import React from 'react'
|
|
import Editor from 'wangeditor'
|
|
import './index.less'
|
|
export default class wangeditor extends React.Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
editorHtml: '',
|
|
count: 0
|
|
}
|
|
}
|
|
componentDidMount() {
|
|
let self = this
|
|
const editor = new Editor('#wangeditorDom')
|
|
this.setState({ editor })
|
|
editor.config.colors = ['#696969', '#9093a2', '#fgddbb', '#e3e7eb']
|
|
editor.config.pasteText = true
|
|
// 设置编辑区域高度为 500px
|
|
editor.config.height = 200
|
|
editor.config.showFullScreen = false
|
|
editor.config.menus = [
|
|
'bold',
|
|
'foreColor',
|
|
'italic',
|
|
'indent',
|
|
'link',
|
|
'justify'
|
|
]
|
|
|
|
// 注意，先配置 height ，再执行 create()
|
|
// 注意，先配置 height ，再执行 create()
|
|
editor.config.onchange = function (newHtml) {
|
|
var text = editor.txt.text()
|
|
if (text.length == 0) {
|
|
//没有文字
|
|
self.props.setEdittext('')
|
|
}
|
|
if (text.length > self.props.limitLength) {
|
|
let str = text.slice(0, self.props.limitLength)
|
|
self.setState({ editorHtml: str })
|
|
editor.txt.html(str)
|
|
self.props.setEdittext(str)
|
|
return
|
|
}
|
|
self.setState({ count: text.length })
|
|
self.setState({ editorHtml: newHtml })
|
|
self.props.setEdittext(newHtml)
|
|
}
|
|
|
|
editor.create()
|
|
//列表悬浮富文本
|
|
editor.txt.html(this.props.text)
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div className='countBox_par'>
|
|
<div id='wangeditorDom' style={{ width: this.props.width }}></div>
|
|
<p className='countBox'>
|
|
{this.state.count + '/' + this.props.limitLength}
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|
|
}
|