契合 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 (
			<div style={{ width: this.props.width, height: this.props.height || '100px', display: 'inline-block', margin: "40px 10px 10px -115px", lineHeight: '24px' }} >
				<BraftEditor
					defaultValue={this.props.val}
					value={editorState}
					onChange={this.handleChange}
					controls={controls}
					onSave={this.submitContent}
				/>
			</div>

		)
	}
	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