React 之braft-editor富文本的图片上传

使用背景：在微信小程序中的的商城中的商品详情。使用uniapp的 rich-text 展示多张图片的。

下载富文本

yarn add braft-editor --save

项目中引入

import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'
import { useCallback, useEffect,useState} from 'react';

const update =()=>{
// 富文本绑定的值editorState，初始化不能为空，需要配合BraftEditor.createEditorState()为其赋值
    const [editorState, setEditorState] = useState<any>(BraftEditor.createEditorState(''))
/**
 * 富文本必须有onChange事件，事件中的参数是当前富文本框内的值，需要手动绑定一下
 * */
   const handleEditorState = (editorState:any) => {
    // 在编辑内容提交到服务端之前，可直接调用editorState.toHTML()来获取HTML格式的内容
    setEditorState(editorState)
  }
    //编辑器工具栏。可以根据需要选择
    const controls: any =[
    '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 (
    <BraftEditor 
    value={editorState}
    controls={controls}
    onChange={handleEditorState}/>
);

}

export default update;

根据提供的工具栏。在媒体这个可以选择上传图片。自己会把图片转成base64，但是所占体积太大了。

解决方法：结合Ant Design的上传组件，先把图片上传到服务器上，然后把图片链接放到富文本里面

第一步：利用controls把媒体（'media'）工具栏去掉。

第二步：采富文本extendControls属性自定义上传组件

完整代码：

 import {Form, Upload,Button} from 'antd';
import {PlusOutlined } from '@ant-design/icons';

export default const update=()=>{
      const [form] = Form.useForm();
// 富文本绑定的值editorState，初始化不能为空，需要配合BraftEditor.createEditorState()为其赋值<p></p>
    const [editorState, setEditorState] = useState<any>(BraftEditor.createEditorState(''))

/**
 * 富文本必须有onChange事件，事件中的参数是当前富文本框内的值，需要手动绑定一下
 * */
   const handleEditorState = (editorState:any) => {
    // 在编辑内容提交到服务端之前，可直接调用editorState.toHTML()来获取HTML格式的内容
    setEditorState(editorState)
  }
    /*** 
     * @description: 把自定义组件中的onChange 的参数（如 event）转化为控件的值*
     * */  
    const normFile = (e: any) => {
      return e.toHTML()
    }

    const extendControls: any = [{key: 'antd-uploader',type: 'component',component: (
      <Upload  showUploadList={false}  customRequest={handleUpload}  accept='.png,.jpg'>    
   <Button className="control-item button upload-button" data-title="上传图片"><PlusOutlined /></Button></Upload>),},]

   /**富文本自定义自己图片的上传实现 simpleUpload 为后端给的上传图片接口。拿取后端返回来的地址 * */
    const handleUpload = async(option: any) => {
      const formData = new FormData();
      formData.append('file', option.file);
      const res = await simpleUpload(formData);
      setEditorState(ContentUtils.insertMedias(editorState, 
            [{type: 'IMAGE',url:res,},]))
    }

  // 回显数据
  // setEditorState(BraftEditor.createEditorState(res.content)) 
   // form.setFieldsValue({content: res.content,})
    

return(
    <Form
        form={form}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
        autoComplete="off"

    >
         <Form.Item
              label="商品详情图片"
              name="content"
              getValueFromEvent={normFile}
              valuePropName="content"
              rules={[
                   { required: true, message: '请上传商品详情图片' },
               ]}>
            <BraftEditor  value={editorState} extendControls={extendControls} onChange={handleEditorState}/>
           </Form.Item> 
    </Form>
)
}