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

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

需求描述

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

出现的问题

然后我问了公司的其他同事,有什么比较好的推荐,说了几个,最后我还是选择了最简单的 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: 加粗,
      },
      'italic',
      'underline',
      'separator',
      'link',
      'separator',
      'media',
    ]
    return (
      
(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 }} // 用来定义自己的上传函数 />
) } } 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自带的校验不会判定为空 ({ getFieldValue }) => ({ validator(rule, value) { console.log(value) if (value === '

') { return Promise.reject('请输入文章内容') } else { return Promise.resolve() } }, }), ]} > {/* 如果不在form中使用就要自己写受控变量和chang函数*/}

你可能感兴趣的:(javascript,react.js,antd)