Braft Editor 结合 Antd V4 的 Form 表单 实现

Cyearn

想直接看实现的请跳过前三节.....

需求描述

因为业务需求,需要用到比较多的富文本编辑器,至于为什么会在一个页面里有很多的富文本,憋问我,问就是甲方爸爸给钱了!在富文本中,需要满足能够随意的修改图片的大小,能够直接复制图片进入,能够满足基本的排版需求,按理来说基本上网上的编辑器都能满足要求。

出现的问题

然后我问了公司的其他同事,有什么比较好的推荐,说了几个,最后我还是选择了最简单的 wangEditor (当时我觉得它最简单,因为不需要怎么配置,网站也有现成的 demo ),一开始是很顺畅的,能够灵活的设置菜单和基本响应,处理机制等,然而当我在一个页面中使用两个富文本时,出bug了,具体描述单击链接跳转看。简单的说就是两个富文本不能同时接受拖拽进来的图片。

解决办法

至于解决办法,当然是先去 github 报个异常,然后换一个编辑器看看,客户在等着,也没时间研究。随后我尝试了antd社区精选组件,里面有两个react-quillbraft-editor,分别编写了 demo ,发现后者更满足我的项目需求。

代码

现在开始进入正题,我先对braft-editor进行了简答封装,因为它自带的上传是会将图片转成 base64 格式的,与我的需求不符,并且如果直接传 base64 的字符串,数据太大,很容易引起接口传输过慢,中断的问题。封装代码如下:

Editor文件

/**
 * @desc 新的antd富文本编辑器
 * @name Editor
 * @author Cyearn
 * @date 2020/12/11
 */

import React, { Component } from 'react'
import BraftEditor from 'braft-editor'  // 引入库
import 'braft-editor/dist/index.css'   // 引入样式
import { apiPostUpload } from '@/api/load'  // 引入自己的上传接口
import { isDev } from '@/utils'  // 判定是否为开发模式的函数
import { message } from 'antd'

// 本地调试时的服务地址
const HOST = process.env.REACT_APP_DEFAULT_PROXY

class Editor extends Component {
  constructor(props) {
    super(props)
    this.state = {
      propValue: '', // 一个用来判定是否需要初始化编辑器的变量
      editorState: BraftEditor.createEditorState(null), // 设置编辑器初始内容
      outputHTML: null, // 富文本的内容
    }
    this.editorRef = React.createRef()  // 因为用到了自定义的上传,所以对编辑器加了一个ref
  }
  componentDidMount() {}
  // 用来判定是否需要初始化编辑器
  componentDidUpdate() {
    if (this.props.value && this.props.value !== this.state.propValue) {
      if (this.state.propValue === '') {
      // 上层传入的是字符串结构的数据,所以需要使用BraftEditor.createEditorState来包裹它
        this.setState({ editorState: BraftEditor.createEditorState(this.props.value), propValue: this.props.value })
      }
    }
  }


  // 编辑器发生变化
  handleChange = async editorState => {
    await this.setState({
      editorState: editorState,
      outputHTML: editorState.toHTML(),
    })
    this.props.onChange(editorState.toHTML()) // 当编辑器内容发生变化的时候向上抛出更改的结果
  }

  // 编辑器失去焦点
  onBlurEditor = () => {
    const { outputHTML } = this.state
    // this.props.onChange(outputHTML)
  }

  // 上传函数
  uploadImage = async param => {
    try {
      let agr = {
        file: param.file,
        isOpenFile: true,
      }
      const res = await apiPostUpload(agr) // 自己的上传接口
      let data = res.datas
      param.progress(100) // 显示完成上传的进度条
      param.success({
        url: isDev ? HOST + data.url : data.url,
        meta: {
          alt: data.name,
          //   loop: true, // 指定音视频是否循环播放
          //   autoPlay: true, // 指定音视频是否自动播放
          //   controls: true, // 指定音视频是否显示控制栏
        },
      })
      const { getValue } = this.editorRef // 通过ref获取到当前的编辑器内的数据
      this.handleChange(getValue()) // 调用数据更新的函数,很重要,不做这个会出现保存结果和显示结果不匹配的情况
    } catch (error) {
      let msg = error + ',上传失败'
      message.error(msg)
    }
  }
  // 查看图片发生变化的函数
  changeImage = async file => {
    console.log(file)
  }

  render() {
    const { editorState } = this.state
    const { width = '100%', id = 'braft_editor', height = 600 } = this.props // 定义一些默认的格式
    // 这是配置自己菜单的部分,删除就是显示全菜单
    const controls = [
      {
        key: 'bold',
        text: <b>加粗</b>,
      },
      'italic',
      'underline',
      'separator',
      'link',
      'separator',
      'media',
    ]
    return (
      <div className='editor-wrapper' style={{ width: width, border: '1px solid #999999' }} id={id}>
        <BraftEditor
          ref={e => (this.editorRef = e)}  // 回调refs,用来绑定ref
          value={editorState}  
          onChange={this.handleChange}
          controls={controls}  // 用来配置自己的菜单
          contentStyle={{ height: 300, boxShadow: 'inset 0 1px 3px rgba(0,0,0,.1)' }}  // 用来设置一些样式
          media={{ uploadFn: this.uploadImage, pasteImage: true, onChange: this.changeImage }}  // 用来定义自己的上传函数
        />
      </div>
    )
  }
}

export default Editor

Form 表单所在文件

// 构造函数
constructor(props) {
    super(props)
    this.state = { content: ''}
    this.formRef = React.createRef()
  }
 // 当form发生变化
  onFormChange = e => {
    console.log(e)
    Boolean(e['content']) &&
      this.setState({
        content: e['content'],
      })
  }
  
  //...render内部的代码
 <Form
            {...layout}
            name='docForm'
            style={{ width: '100%' }}
            ref={this.formRef}
            scrollToFirstError={true}
            onValuesChange={this.onFormChange}
          >
     <Form.Item
                  name={'content'}
                  label='内容编辑'
                  rules={[
                    { required: true, type: 'string', min: 1 },
                    // 需要自定义一个校验函数,因为braft-editor默认文本就是 <p></p>,form自带的校验不会判定为空
                    ({ getFieldValue }) => ({
                      validator(rule, value) {
                        console.log(value)
                        if (value === '<p></p>') {
                          return Promise.reject('请输入文章内容')
                        } else {
                          return Promise.resolve()
                        }
                      },
                    }),
                  ]}
                >
                
                  {/* <Editor width={'85%'} value={content} onChange={this.changeContent}/>  如果不在form中使用就要自己写受控变量和chang函数*/}
                  <Editor width={'85%'} />
                </Form.Item>
</Form>
阅读 182
18 声望
0 粉丝
0 条评论
18 声望
0 粉丝
宣传栏