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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

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