brafteditor防抖_契合 antd的富文本编辑器braft-editor 使用实例

import '../../../../braft-editor/dist/index.css'

import React from 'react'

import BraftEditor from 'braft-editor'

export default class Editor1 extends React.Component {

state = {

// 创建一个空的editorState作为初始值

editorState: BraftEditor.createEditorState(null)

}

async componentDidMount() {

var _self = this

this.setState({

editorState: BraftEditor.createEditorState(this.props.val)

})

}

render() {

const { editorState } = this.state

const controls = [

'undo', 'redo', 'separator',

'font-size', 'line-height', 'letter-spacing', 'separator',

// 'text-color', 'bold', 'italic', 'underline', 'strike-through', 'separator',

// 'superscript', 'subscript', 'remove-styles', 'emoji', 'separator', 'text-indent', 'text-align', 'separator',

// 'headings', 'list-ul', 'list-ol', 'blockquote', 'code', 'separator',

// 'link', 'separator', 'hr', 'separator',

// 'media', 'separator',

// 'clear'

]

return (

defaultValue={this.props.val}

value={editorState}

onChange={this.handleChange}

controls={controls}

onSave={this.submitContent}

/>

)

}

handleChange = (editorState) => {

const htmlString = editorState.toHTML()

this.setState({ editorState: editorState }, () => {

this.props.onChange(htmlString)

})

}

}

# 使用npm安装

npm install braft-editor --save

还有一个index.css 引入地址 :https://github.com/margox/braft-editor