react-hooks+ts中使用富文本编辑器react-quill.js

项目场景：富文本编辑器react-quill.js

后台管理人员操作富文本编辑器上传信息,提供给后端生成信息流!!!

// 引入富文本编辑器样式加载文件
import 'quill/dist/quill.snow.css';   
// 引入本页面样式加载文件
import 'styles/font/quillfont.css';

import { message } from 'antd';  //引入antd样式
import { data } from 'data/upload.js'; //阿里云文件上传的凭证信息 || 具体情况自行封装
import { randomString10 } from 'helper/index'; //与后端约定好的随机数加密方法 || 具体情况自行封装
import moment from 'moment'; //引入时间插件
import imageResize from 'quill-image-resize-module'; //富文本图片控制文件
import React, { FC, memo, useEffect } from 'react'; //引入react-hooks配置文件
import { useQuill } from 'react-quilljs'; //引入富文本编辑器文件
import styled from 'styled-components'; //引入此页面文件样式

type Props = {
  getRichText: (str: string) => void; //限制接受的数据类型
  defaultValue: string; //限制接受的数据类型
};

const Body: FC<Props> = memo(props => {
  const { getRichText, defaultValue } = props;  //回显接受的信息流
  const fonts = [
    'SimSun',
    'SimHei',
    'Microsoft-YaHei',
    'KaiTi',
    'FangSong',
    'Arial',
    'Times-New-Roman',
    'sans-serif',
  ]; //设置富文本配置
  const editorOption = {
    placeholder: '请在这里输入',
    modules: {
      toolbar: {
        container: [
          ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
          ['blockquote', 'code-block'], // 引用，代码块
          [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
          [{ list: 'ordered' }, { list: 'bullet' }], // 列表
          [{ script: 'sub' }, { script: 'super' }], // 上下标
          [{ indent: '-1' }, { indent: '+1' }], // 缩进
          [{ direction: 'rtl' }], // 文本方向
          [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
          [{ header: [1, 2, 3, 4, 5, 6, false] }], // 几级标题
          [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
          [{ font: [] }], // 字体
          [{ align: [] }], // 对齐方式
          ['clean'], // 清除字体样式
          ['image', 'video'], // 上传图片、上传视频
        ],
      }, //设置富文本文件编辑设置类型
      imageResize: {
        displayStyles: {
          backgroundColor: 'black',
          border: 'none',
          color: 'white',
        },
        modules: ['Resize', 'DisplaySize', 'Toolbar'],
        //设置富文本文件图片类型
      },
    },
  };
  const { quill, quillRef, Quill } = useQuill(editorOption);  //赋值结构解析出富文本的方法
  // 使用配置项方法
  if (Quill && !quill) {
    const Font = Quill.import('formats/font');
    Font.whitelist = fonts;
    Quill.register(Font, true);
    Quill.register('modules/imageResize', imageResize);
  }  
  const insertToEditor = (url: any) => {
    const range = quill.getSelection();
    quill.insertEmbed(range.index, 'image', url);
  }; 
  // 上传图片,此方法属于上面引入的阿里云方法,七牛什么的也是这样使用!
  const saveToServer = async (file: any) => {
    const ossConfig = {  //上传图片凭证
      region: data.APP_REGION,
      accessKeyId: data.APP_OSSACCESSKEY,
      accessKeySecret: data.APP_OSSSECRETKEY,
      bucket: data.APP_OSSBUCKET,
    };
    // @ts-ignore
    const client = new OSS(ossConfig);
    async function multipartUpload() {
      const isProd = process.env.REACT_APP_HOST === 'production';
      try {
        const suffix = file.name.match(/.\w+$/)?.[0]; //正则判断一下,文件名称,可用可不用!
        const fileName = `/${isProd ? 'upload' : 'upload-dev'}/university/${moment().format(
          'YYYYMM' //图片文件命名
        )}/${moment().unix()}${randomString10()}${suffix}`;
        const result = await client.multipartUpload(fileName, file, {
          meta: { year: `${moment().format('YYYY')}`, people: 'brow' }, //根据时间设置名称,避免重复
          mime: 'image/jpeg', 
        });
        const { res } = result;
        const { status, statusCode } = res;
        if (status === 200 && statusCode === 200) {
          message.success('上传成功');
          const url = `${data.APP_FILE}${fileName}`; //拿到文件上传后返回的地址
          insertToEditor(url); //传给富文本编辑器的文件操作方法
        }
      } catch (e) {
        message.error('上传失败');
      }
    }
    multipartUpload();//执行上传的方法
  };
  const selectLocalImage = () => {  //设置上传函数,自创建input,利用input type的特性
    const input: any = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');
    input.click();
    input.onchange = () => {
      const file = input.files[0];
      saveToServer(file); //执行上传图片函数
    };
  };

  useEffect(() => { 
    if (quill) {
      quill.on('text-change', (_delta: any, _oldDelta: any, _source: any) => {
        const html: string = quill.root.innerHTML;
        getRichText(html);
      });
      quill.getModule('toolbar').addHandler('image', selectLocalImage);
    }
  }, [quill]); //监听quill的变化,

  useEffect(() => {
    if (quill) {
      quill.root.innerHTML = defaultValue;
    }
  }, [defaultValue]); //监听回显数据的变化

  return (
    <Wrap>
      <div style={{ width: 1000 }}>
        <div ref={quillRef} /> //命名id 绑定富文本操作
      </div>
    </Wrap>
  );
});

const Wrap = styled.div`
  .ql-editor {
    min-height: 400px;
  }
`;
export default Body;

效果图如下