React/Ant Design Pro中使用富文本编辑器

接到一个新的需求，需要使用到富文本编辑器，于是找了两个开源的react 富文本开源组件，react-quill和braft-editor，简单的体验了两个组件的demo和分析，选择了后者braft-editor，本文也就braft-editor的安装、配置和使用做一下记录。

github地址

安装

使用npm或者yarn来将本编辑器加入到你的项目中：

# 使用npm安装
npm install braft-editor --save

# 使用yarn安装
yarn add braft-editor

使用

编辑器支持value和onChange属性，这类似于React中原生的input组件。通常情况下，可以用典型的受控组件的形式来使用本编辑器：

import React from 'react'
// 引入编辑器组件
import BraftEditor from 'braft-editor'
// 引入编辑器样式
import 'braft-editor/dist/index.css'

export default class EditorDemo extends React.Component {

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

    async componentDidMount () {
        // 假设此处从服务端获取html格式的编辑器内容
        const htmlContent = await fetchEditorContent()
        // 使用BraftEditor.createEditorState将html字符串转换为编辑器需要的editorStat
        this.setState({
            editorState: BraftEditor.createEditorState(htmlContent)
        })
    }

    submitContent = async () => {
        // 在编辑器获得焦点时按下ctrl+s会执行此方法
        // 编辑器内容提交到服务端之前，可直接调用editorState.toHTML()来获取HTML格式的内容
        const htmlContent = this.state.editorState.toHTML()
        const result = await saveEditorContent(htmlContent)
    }

    handleEditorChange = (editorState) => {
        this.setState({ editorState })
    }

    render () {

        const { editorState } = this.state
        return (
            <div className="my-component">
                <BraftEditor
                    value={editorState}
                    onChange={this.handleEditorChange}
                    onSave={this.submitContent}
                />
            </div>
        )
    }
}

配置使用

因为需求只需要上传图片，我们需要屏蔽自带的media控件,并且将Ant Design的Upload组件集成到编辑器

//引入两个工具类
import { ContentUtils } from 'braft-utils'
import { ImageUtils } from 'braft-finder'

// 指定不需要展示的控件
const excludeControls = ['media'];
// 添加需要展示的扩展控件
const extendControls = [
      {
        key: 'antd-uploader',
        type: 'component',
        component: (
          <Upload {...uploadProps}>
            {/* 这里的按钮最好加上type="button"，以避免在表单容器中触发表单提交，用Antd的Button组件则无需如此 */}
            <button type="button" className="control-item button upload-button" data-title="插入图片">
              <Icon type="picture" theme="filled" />
            </button>
          </Upload>
        )
      }
    ];

      {/*我这里是将组件放在Modal中*/}
       <Modal
          title="富文本测试"
          width={1000}
          visible={visible}
          onOk={this.submitContent}
          onCancel={this.hideModal}
          okText="确认"
          cancelText="取消" >
          <Spin spinning={spinning} tip="上传中...">
            <BraftEditor
              excludeControls={excludeControls}
              value={editorState}
              extendControls={extendControls}
              onChange={this.handleEditorChange}
              onSave={this.submitContent} />
          </Spin>
        </Modal>

//这里是处理上传的回调函数
 handleChange = async ({ file, event }) => {
    if (file.status === 'uploading') {
      this.setState({ spinning: true })
    }

    if (file.status === 'done') {
      if (file.response.code === '200') {
        this.setState({
          editorState: ContentUtils.insertMedias(this.state.editorState, [{
            type: 'IMAGE',
            url: file.response.data[0].fileUrl
          },]), spinning: false
        })
      }
    }
  }

//这里是提交到服务端
 submitContent = () => {
    // 在编辑器获得焦点时按下ctrl+s会执行此方法
    // 编辑器内容提交到服务端之前，可直接调用editorState.toHTML()来获取HTML格式的内容
    const htmlContent = this.state.editorState.toHTML()
    console.log(htmlContent)
  }

总结

整个过程还是比较简单，感谢braft-editor作者，如果有其它问题，请加官方讨论群。

image.png

本文完。