React引入富文本编辑器

1.引入包

tnpm install braft-editor
// 也可以在package.json中引入包
“braft-editor”: "^3.0.17"

2.在页面中使用

const excludeControls = [
  'letter-spacing',
  'line-height',
  'clear',
  'headings',
  'list-ol',
  'list-ul',
  'remove-styles',
  'superscript',
  'subscript',
  'hr',
  'text-align'
]

const extendControls = [
  {
    key: 'custom-button',
    type: 'button',
    text: '预览',
    onClick: this.preview
  }
]
<BraftEditor
  onChange={this.handleChange}
  excludeControls={excludeControls}
  extendControls={extendControls}
  contentStyle={{height: 400}}
/>

3.数据格式转换

初始化数据
this.state = { 
// 创建一个空的editorState作为初始值 
editorState: BraftEditor.createEditorState(null) 
}

1.  const rawJSON = this.state.editorState.toRAW(true) //返回JSON对象
1.  const rawJSON = this.state.editorState.toRAW(false) // 返回JSON 字符串

//需要预览富文本编辑器的内容时，只需将 内容转化为html格式
<div>{this.state.editorState.toHTML()}</div>

具体可参考官方文档braft.margox.cn/demos/previ…

详细讲解可以参考 blog.csdn.net/weixin_3504…