react富文本框組件braft-editor 富文本框添加文件上傳服務器

1.首先安裝braft-editor 

npm install braft-editor

2.添加富文本框

<Form.Item
              label="內容"
              name="content"
              rules={[{ required: true, message: '請輸入內容!' }]}
            >
              <BraftEditor
                value={BraftEditor.createEditorState(null)}
                onChange={this.handleChange}
                controls={controls}
                extendControls={extendControls}
                placeholder="請輸入正文內容"
              />
</Form.Item>

3.添加富文本框功能按鈕 其中extendControls是上傳圖片的按鈕，

  const controls = [
      'undo',
      'redo',
      'separator',
      'font-size',
      'line-height',
      'letter-spacing',
      'separator',
      'text-color',
      'bold',
      'italic',
      'underline',
      'strike-through',
      'separator',
      'remove-styles',
      'emoji',
      'separator',
      'text-indent',
      'text-align',
      'separator',
      'headings',
      'list-ul',
      'list-ol',
      'separator',
      'link',
      'separator',
      'hr',
      'separator',
      //'media',
      'separator'
    ];
    const extendControls = [
      {
        key: 'antd-uploader',
        type: 'component',
        component: (
          <Upload accept="image/*" showUploadList={false} beforeUpload={this.beforeUploadControls}>
            {/* 這里的按鈕最好加上type="button"，以避免在表單容器中觸發表單提交，用Antd的Button組件則無需如此 */}
            <button
              type="button"
              className="control-item button upload-button"
              data-title="插入圖片"
            >
              <UploadOutlined />
            </button>
          </Upload>
        )
      }
    ];

4.上傳的圖片和富文本框的內容保存在form表單中，需借助braft-utils組件

npm install braft-utils

 

  //上傳富文本圖片
  beforeUploadControls = (file) => {
    console.log('file', file);
    const index = file.name.lastIndexOf('.');
    const isType = file.name.substr(index + 1).toLowerCase();
    if (isType !== 'jpg' && isType !== 'png') {
      message.error('只支持上傳jpg和png格式的圖片');
      return true;
    } else {
      if (file.size / (1024 * 1024) > 10 || !file.size) {
        message.error('上傳文件不能為空或超過10M');
      } else {
        let formData = new FormData();
        formData.append('file', file);
        //調用后端接口獲取圖片鏈接，formData為參數，resouceUpload為自己封裝的方法，需換成自己的
        resouceUpload(formData).then((res) => {
          console.log(res);
          if (res.data.code == '0') {
            console.log(this.formRef.current.getFieldValue('content'));
            console.log(ContentUtils);
            if (this.formRef.current.getFieldValue('content')) {
              this.formRef.current.setFieldsValue({
                content: ContentUtils.insertMedias(this.formRef.current.getFieldValue('content'), [
                  {
                    type: 'IMAGE',
                    url: 后端返回的圖片的鏈接
                  }
                ])
              });
            } else {
              this.formRef.current.setFieldsValue({
                content: ContentUtils.insertMedias(BraftEditor.createEditorState(null), [
                  {
                    type: 'IMAGE',
                    url: 后端返回的圖片的鏈接
                  }
                ])
              });
            }
          } else {
            message.error(res.data.message);
          }
        });
      }
    }
  };

  //獲取富文本框的內容

  handleChange = (editorState) => {

    const htmlString = editorState.toHTML();

    this.setState({

      editorState: editorState,

      richtext: htmlString

    });

  };

5.引入文件如下

import {
  Button,
  Form,
  Input,
  InputNumber,
  Upload,
} from 'antd';
import { UploadOutlined} from '@ant-design/icons';
import BraftEditor from 'braft-editor';
import { ContentUtils } from 'braft-utils';
import 'braft-editor/dist/index.css';