React中：富文本编辑器(react-quill),自定义上传图片到七牛云

 1.组件封装

import React, { useState, useEffect, useRef } from 'react';
import ReactQuill from 'react-quill';
import { message } from 'antd';
import 'react-quill/dist/quill.snow.css';
import { getTokenApi } from '@/services/user/login';
import { randomWord } from '@/utils/index';
import { request } from 'umi';

const Editor: React.FC<any> = (props) => {
  const { value, width, height, handleParams } = props;
  let refs: any = useRef(null);
  const [valueText, setValue] = useState('');
  const [widthText, setWidth] = useState('1010px');
  const [heightText, setHeight] = useState('300px');
  const modules: any = {
    toolbar: {
      container: [
        ['bold', 'italic', 'underline', 'strike'], // toggled buttons
        ['blockquote', 'code-block'],
        ['link', 'image'],
        [{ header: 1 }, { header: 2 }], // custom button values
        [{ list: 'ordered' }, { list: 'bullet' }],
        [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
        [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
        [{ direction: 'rtl' }], // text direction
        // [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
        [{ header: [1, 2, 3, 4, 5, 6, false] }],
        [{ color: [] }, { background: [] }], // dropdown with defaults from theme
        [{ font: [] }],
        [{ align: [] }],
        ['clean'], // remove formatting button
      ],
      handlers: {
        image() {
          imageHandler.call(this, props);
        },
      },
    },
  };
  // 自定义上传图片到七牛云
  const imageHandler = async (action) => {
    const input: any = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');
    input.click();
    const {
      data: { uploadToken },
    } = await getTokenApi({});//获取token
    input.onchange = () => {
      const file = input.files[0];
      const formData = new FormData();
      formData.append('token', uploadToken);
      formData.append('key', randomWord(false, 40, 50));
      formData.append('file', file);
      const hide = message.loading('上传中...', 0);
      request('https://xxxxxxx', {// 七牛云上传图片域名地址
        method: 'POST',
        data: formData,
        headers: { 'Content-Type': 'application/json' },
      }).then((res) => {
        const url = 'https://wwwwwwww/' + res.key; // 获取url,图片预览地址
        let quill = refs?.current?.getEditor(); //获取到编辑器本身
        const cursorPosition = quill.getSelection().index; //获取当前光标位置
        quill.insertEmbed(cursorPosition, 'image', url); //插入图片
        quill.setSelection(cursorPosition + 1); //光标位置加1
        hide();
      });
    };
  };
  const handleHtml = (e) => {
    setValue(e);
    handleParams(e);
  };
  useEffect(() => {
    setWidth(width ? width : '1010px');
    setHeight(height ? height : '300px');
  }, []);
  useEffect(() => {
    setValue(value ? value : '');
  }, [value]);
  return (
    <div>
      <ReactQuill
        ref={refs}
        className="ql-editor" //组件要加上(className=“ql-editor”)样式类名,否则空格不回显
        modules={modules}
        value={valueText}
        onChange={handleHtml}
        style={{
          width: widthText,
          height: heightText,
          overflow: 'hidden',
          borderBottom: '1px solid #ccc',
        }}
      />
    </div>
  );
};

export default Editor;

二、使用

import React, { useEffect, useState, useRef } from 'react';
import { Button, Modal, message, Space, Row, Col } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import ReactQuill from '@/components/Global/ReactQuill';
import './index.less';

const Index: React.FC = () => {
  const [htmlValue, setHtmlValue] = useState('');
  const handleParams = (e) => {
    setHtmlValue(e);
  };
  useEffect(() => {
    getRechargeGearList();
  }, []);
  return (
    <PageContainer>
       <ReactQuill
          value={htmlValue}
          width={'900px'}
          height={'300px'}
          handleParams={handleParams}
       ></ReactQuill>
      
    </PageContainer>
  );
};
export default Index;