react-quill 富文本组件编写和应用，优化代码

 一、react-quill 富文本组件编写和应用

•  index.tsx文件

import React, { useRef, useState } from 'react';
import { Modal, Button } from 'antd';
import RichEditor from './RichEditor';

const AnchorTouchHistory: React.FC = () => {
  const editorRef = useRef<any>(null);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isEditModalVisible, setIsEditModalVisible] = useState(false);
  const [contentHtml, setContentHtml] = useState('<p>heheda</p>' );

  const openAddModal = () => setIsModalVisible(true);
  const submitContent = () => {
    const content = editorRef.current?.getRichContent();
    console.log(content);
    setIsModalVisible(false);
    editorRef.current?.resetContent();
  };

  const openEditModal = () => setIsEditModalVisible(true);
  const submitEditContent = () => {
    const content = editorRef.current?.getRichContent();
    console.log(content);
    setIsEditModalVisible(false);
    editorRef.current?.resetContent();
  };

  return (
    <div>
      <Button onClick={openAddModal}>打开添加对话框</Button>
      <Modal
        visible={isModalVisible}
        onCancel={() => setIsModalVisible(false)}
        onOk={submitContent}
      >
        <RichEditor ref={editorRef} />
      </Modal>

      <Button onClick={openEditModal}>打开编辑对话框</Button>
      <Modal
        visible={isEditModalVisible}
        onCancel={() => setIsEditModalVisible(false)}
        onOk={submitEditContent}
      >
        <RichEditor ref={editorRef} initialContent={contentHtml} />
      </Modal>
    </div>
  );
};

export default AnchorTouchHistory;

• RichEditor.tsx

// RichEditor.tsx
import React, { useState, useEffect, useRef, useMemo, forwardRef } from 'react';
import ReactQuill, { Quill } from 'react-quill';
import COS from 'cos-js-sdk-v5';
import 'react-quill/dist/quill.snow.css';
import { Modal, Input, Upload, Button, Tabs, Alert } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import ImageResize from 'quill-image-resize-module-react';
import { getTxyCosConf } from '@/services/anchor-touch/history';
import '@/styles/quillEditor.css';

// 引入 Quill 的基础类
const BlockEmbed = Quill.import('blots/block/embed');

// 自定义图片 Blot，支持宽度和高度属性
class CustomImage extends BlockEmbed {
  static create(value) {
    const node = super.create();
    node.setAttribute('src', value.src);
    if (value.width) {
      node.setAttribute('width', value.width);
    }
    if (value.height) {
      node.setAttribute('height', value.height);
    }
    return node;
  }

  static value(node) {
    return {
      src: node.getAttribute('src'),
      width: node.getAttribute('width'),
      height: node.getAttribute('height'),
    };
  }
}
CustomImage.blotName = 'customImage';
CustomImage.tagName = 'img';

Quill.register(CustomImage);
Quill.register('modules/imageResize', ImageResize);

const RichEditor = forwardRef((props, ref) => {
  const { value = '', onChange } = props;
  const [editorValue, setEditorValue] = useState(value);
  const [isCosReady, setIsCosReady] = useState(false);
  const quillRef = useRef<any>(null);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isLinkModalVisible, setIsLinkModalVisible] = useState(false);
  const [bucket, setBucket] = useState('');
  const [region, setRegion] = useState('');
  const [cos, setCos] = useState<COS | null>(null);
  const [width, setWidth] = useState('');
  const [height, setHeight] = useState('');
  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
  const [currentFile, setCurrentFile] = useState<File | null>(null);
  const [originalWidth, setOriginalWidth] = useState<number | null>(null);
  const [originalHeight, setOriginalHeight] = useState<number | null>(null);
  const [imageUrl, setImageUrl] = useState('');
  const [uploadMode, setUploadMode] = useState<'local' | 'url'>('local');
  const [linkUrl, setLinkUrl] = useState('');
  const [linkText, setLinkText] = useState('');
  const [urlError, setUrlError] = useState('');
  const [isImageValid, setIsImageValid] = useState(false);

  useEffect(() => {
    setEditorValue(value);
  }, [value]);

  useEffect(() => {
    const fetchCosConfig = async () => {
      try {
        const response = await getTxyCosConf();
        setBucket(response.data.bucket);
        setRegion(response.data.region);
        const cosInstance = new COS({
          SecretId: response.data.secretid,
          SecretKey: response.data.secretkey,
        });
        setCos(cosInstance);
        setIsCosReady(true);
      } catch (error) {
        console.error('获取 COS 配置失败:', error);
      }
    };
    fetchCosConfig();
  }, []);

  const handleEditorChange = (content: string) => {
    setEditorValue(content);
    if (onChange) {
      onChange(content);
    }
  };

  const showImageUploadModal = () => {
    setIsModalVisible(true);
  };

  const showLinkModal = () => {
    setIsLinkModalVisible(true);
  };

  const handleLinkOk = () => {
    if (!linkUrl.startsWith('http://') && !linkUrl.startsWith('https://')) {
      setUrlError('链接地址格式不正确，请输入有效的链接地址。');
      return;
    }
    const editor = quillRef.current?.getEditor();
    if (editor) {
      editor.focus();
      const range = editor.getSelection();
      const position = range ? range.index : editor.getLength();
      editor.insertText(position, linkText, 'link', linkUrl);
      editor.setSelection(position + linkText.length);
      handleLinkCancel();
    }
  };

  const handleLinkCancel = () => {
    setIsLinkModalVisible(false);
    setLinkUrl('');
    setLinkText('');
    setUrlError('');
  };

  const handleOk = () => {
    if (uploadMode === 'local') {
      if (!currentFile || !cos) {
        handleCancel();
        return;
      }
      const uniqueFileName = `${Date.now()}_${currentFile.name}`;
      cos.uploadFile(
        {
          Bucket: bucket,
          Region: region,
          Key: uniqueFileName,
          Body: currentFile,
          SliceSize: 1024 * 1024,
        },
        (err, data) => {
          if (err) {
            console.error('上传失败:', err);
          } else {
            const imageUrl = `https://${data.Location}`;
            insertImageToEditor(imageUrl);
          }
        }
      );
    } else {
      insertImageToEditor(imageUrl);
    }
  };

  const insertImageToEditor = (imageUrl: string) => {
    const editor = quillRef.current?.getEditor();
    if (editor) {
      editor.focus();
      const range = editor.getSelection();
      const position = range ? range.index : editor.getLength();
      editor.insertEmbed(position, 'customImage', {
        src: imageUrl,
        width: width,
        height: height,
      });
      editor.setSelection(position + 1);
      handleCancel();
    }
  };

  const handleCancel = () => {
    setIsModalVisible(false);
    setPreviewUrl(null);
    setCurrentFile(null);
    setWidth('');
    setHeight('');
    setImageUrl('');
  };

  const beforeUpload = (file: File) => {
    if (!file.type.startsWith('image/')) {
      console.error('不是有效的图像文件');
      return false;
    }
    const reader = new FileReader();
    reader.onload = (e) => {
      const preview = e.target?.result as string;
      setPreviewUrl(preview);
      setCurrentFile(file);
      const img = new Image();
      img.onload = () => {
        setOriginalWidth(img.naturalWidth);
        setOriginalHeight(img.naturalHeight);
        setWidth(img.naturalWidth.toString());
        setHeight(img.naturalHeight.toString());
      };
      img.onerror = (error) => {
        console.error('图像加载失败:', error);
      };
      img.src = preview;
    };
    reader.onerror = (error) => {
      console.error('文件读取失败:', error);
    };
    reader.readAsDataURL(file);
    return false;
  };

  const handleWidthBlur = () => {
    const widthValue = parseFloat(width);
    if (isNaN(widthValue)) {
      console.error('无效的宽度: ', width);
      return;
    }
    if (originalWidth && originalHeight && widthValue > 0) {
      const calculatedHeight = (widthValue / originalWidth) * originalHeight;
      setHeight(calculatedHeight.toFixed(0).toString());
    }
  };

  const handleHeightBlur = () => {
    const heightValue = parseFloat(height);
    if (originalWidth && originalHeight && heightValue > 0) {
      const calculatedWidth = (heightValue / originalHeight) * originalWidth;
      setWidth(calculatedWidth.toFixed(0).toString());
    }
  };

  const handleLinkUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const url = e.target.value;
    setLinkUrl(url);
    if (url.startsWith('http://') || url.startsWith('https://')) {
      setUrlError('');
    } else if (url) {
      setUrlError('链接地址格式不正确，请输入有效的链接地址。');
    }
  };

  const sizes = [false, '14px', '16px', '18px', '20px', '22px', '26px', '28px', '30px'];
  const Size = Quill.import('formats/size');
  Size.whitelist = sizes;

  const fonts = [
    'SimSun',
    'SimHei',
    'Microsoft-YaHei',
    'KaiTi',
    'FangSong',
    'Arial',
    'Times-New-Roman',
    'sans-serif',
  ];
  const Font = Quill.import('formats/font');
  Font.whitelist = fonts;
  Quill.register(Font, true);

  const modules = useMemo(
    () => ({
      toolbar: {
        container: [
          ['bold', 'italic', 'underline'],
          [{ size: sizes }],
          [{ header: [1, 2, 3, 4, 5, false] }],
          [{ color: [] }, { background: [] }],
          ['link', 'image', 'clean'],
        ],
        handlers: {
          image: showImageUploadModal,
          link: showLinkModal,
        },
      },
      imageResize: {
        modules: ['DisplaySize'],
        handleStyles: {
          backgroundColor: 'transparent',
          border: 'none',
        },
        resizeWidth: false,
      },
    }),
    [cos]
  );

  const formats = [
    'font',
    'header',
    'size',
    'bold',
    'italic',
    'underline',
    'strike',
    'list',
    'bullet',
    'link',
    'customImage', // 使用自定义的 customImage
    'width',
    'height',
    'color',
    'background',
  ];

  if (!isCosReady) {
    return <div>加载中...</div>;
  }

  return (
    <>
      <ReactQuill
        ref={quillRef}
        value={editorValue}
        onChange={handleEditorChange}
        modules={modules}
        formats={formats}
      />
      <Modal
        title="插入图片"
        visible={isModalVisible}
        onCancel={handleCancel}
        footer={null}
      >
        <Tabs defaultActiveKey="local" onChange={(key) => setUploadMode(key as 'local' | 'url')}>
          <Tabs.TabPane tab="本地图片" key="local">
            <Upload beforeUpload={beforeUpload} showUploadList={false}>
              <Button icon={<UploadOutlined />}>选择图片</Button>
            </Upload>
            {previewUrl && (
              <div
                style={{
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                  marginTop: 10,
                  width: 150,
                  height: 150,
                  overflow: 'hidden',
                  border: '1px solid #e8e8e8',
                }}
              >
                <img src={previewUrl} alt="预览" style={{ width: 150, maxHeight: '100%' }} />
              </div>
            )}
          </Tabs.TabPane>
          <Tabs.TabPane tab="链接图片" key="url">
            <Input
              placeholder="图片链接"
              value={imageUrl}
              onChange={(e) => setImageUrl(e.target.value)}
              onBlur={() => {
                const img = new Image();
                img.onload = () => {
                  setOriginalWidth(img.naturalWidth);
                  setOriginalHeight(img.naturalHeight);
                  setWidth(img.naturalWidth.toString());
                  setHeight(img.naturalHeight.toString());
                  setPreviewUrl(imageUrl);
                  setIsImageValid(true); // 图片有效
                };
                img.onerror = (error) => {
                  console.error('图像加载失败:', error);
                  setPreviewUrl(null);
                  setIsImageValid(false); // 图片无效
                };
                img.src = imageUrl;
              }}
            />
            {previewUrl && (
              <div
                style={{
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                  marginTop: 10,
                  width: 150,
                  height: 150,
                  overflow: 'hidden',
                  border: '1px solid #e8e8e8',
                }}
              >
                <img src={previewUrl} alt="预览" style={{ width: 150, maxHeight: '100%' }} />
              </div>
            )}
          </Tabs.TabPane>
        </Tabs>
        <Input
          placeholder="设置宽度"
          value={width}
          onChange={(e) => setWidth(e.target.value)}
          onBlur={handleWidthBlur}
          style={{ marginTop: 10 }}
        />
        <Input
          placeholder="设置高度"
          value={height}
          onChange={(e) => setHeight(e.target.value)}
          onBlur={handleHeightBlur}
          style={{ marginTop: 10 }}
        />
        <div style={{ marginTop: 10, textAlign: 'right' }}>
          <Button
            type="primary"
            onClick={handleOk}
            disabled={
              uploadMode === 'local'
                ? !currentFile
                : !imageUrl || !isImageValid // 当图片无效时禁用按钮
            }
          >
            确认
          </Button>
          <Button onClick={handleCancel} style={{ marginLeft: 10 }}>
            取消
          </Button>
        </div>
      </Modal>

      <Modal
        title="添加链接"
        visible={isLinkModalVisible}
        onCancel={handleLinkCancel}
        onOk={handleLinkOk}
      >
        {urlError && <Alert message={urlError} type="error" />}
        <Input
          placeholder="链接地址"
          value={linkUrl}
          onChange={handleLinkUrlChange}
          style={{ marginBottom: 10 }}
        />
        <Input
          placeholder="备注"
          value={linkText}
          onChange={(e) => setLinkText(e.target.value)}
        />
      </Modal>
    </>
  );
});

export default RichEditor;

• quillEditor.css

/* 字体风格 */
/* 处理下拉字体选择器中选项的文本溢出并显示省略号 */
.ql-snow .ql-picker.ql-font .ql-picker-label::before {
  width: 88px; /* 设置下拉选项宽度，可以根据需要调整 */
  white-space: nowrap; /* 不换行显示 */
  overflow: hidden; /* 隐藏溢出部分 */
  text-overflow: ellipsis; /* 使用省略号显示溢出文本 */
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
  content: "宋体";
  font-family: "SimSun";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
  content: "黑体";
  font-family: "SimHei";
}

.ql-snow
.ql-picker.ql-font
.ql-picker-label[data-value="Microsoft-YaHei"]::before,
.ql-snow
.ql-picker.ql-font
.ql-picker-item[data-value="Microsoft-YaHei"]::before {
  content: "微软雅黑";
  font-family: "Microsoft YaHei";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
  content: "楷体";
  font-family: "KaiTi";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
  content: "仿宋";
  font-family: "FangSong";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
  content: "Arial";
  font-family: "Arial";
}

.ql-snow
.ql-picker.ql-font
.ql-picker-label[data-value="Times-New-Roman"]::before,
.ql-snow
.ql-picker.ql-font
.ql-picker-item[data-value="Times-New-Roman"]::before {
  content: "Times New Roman";
  font-family: "Times New Roman";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {
  content: "sans-serif";
  font-family: "sans-serif";
}

.ql-font-SimSun { font-family: "SimSun"; }
.ql-font-SimHei { font-family: "SimHei"; }
.ql-font-Microsoft-YaHei { font-family: "Microsoft YaHei"; }
.ql-font-KaiTi { font-family: "KaiTi"; }
.ql-font-FangSong { font-family: "FangSong"; }
.ql-font-Arial { font-family: "Arial"; }
.ql-font-Times-New-Roman { font-family: "Times New Roman"; }
.ql-font-sans-serif { font-family: "sans-serif"; }

/* 字体大小 */
.ql-snow .ql-picker.ql-size .ql-picker-label::before { content: "字体大小"; }
.ql-snow .ql-picker.ql-size .ql-picker-item::before { content: "常规"; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before{
  content: "14px";
  font-size: 14px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before{
  content: "16px";
  font-size: 14px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before{
  content: "18px";
  font-size: 14px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before{
  content: "20px";
  font-size: 14px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before{
  content: "22px";
  font-size: 14px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before{
  content: "26px";
  font-size: 14px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before {
  content: "30px";
  font-size: 14px;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
  content: "14px";
  font-size: 14px;
}

.ql-size-14px { font-size: 14px; }

/* .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before, */
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
  content: "16px";
  font-size: 16px;
}

.ql-size-16px { font-size: 16px; }

/* .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before, */
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
  content: "18px";
  font-size: 18px;
}

.ql-size-18px { font-size: 18px; }

/* .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before, */
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
  content: "20px";
  font-size: 20px;
}

.ql-size-20px { font-size: 20px; }

/* .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before, */
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
  content: "22px";
  font-size: 22px;
}

.ql-size-22px { font-size: 22px; }

/* .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before, */
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
  content: "26px";
  font-size: 26px;
}

.ql-size-26px { font-size: 26px; }

/* .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before, */
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
  content: "28px";
  font-size: 28px;
}

.ql-size-28px { font-size: 28px; }

/* .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before, */
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {
  content: "30px";
  font-size: 30px;
}

.ql-size-30px { font-size: 30px; }

/* 段落大小 */
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "常规";
}

/* .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before, */
.ql-snow .ql-picker.ql-header .ql-picker-label::before {
  content: "标题大小";
}

/* 默认设置 */
.ql-snow .ql-editor { font-size: 14px; }
/* 查看样式 */
.view-editor .ql-toolbar { display: none; }
.view-editor .ql-container.ql-snow { border: 0; }
.view-editor .ql-container.ql-snow .ql-editor { padding: 0; }
/* 编辑样式 */
.edit-editor .ql-toolbar { display: block; }
.edit-editor .ql-container.ql-snow {
  border: 1px solid #ccc;
  min-height: inherit;
}

• golang后端接口,获取

  TxyCosConf:
    SecretId: 'xxxxx'
    SecretKey: 'xxxxx'
    Bucket: 'xxxxx'
    Region: 'xxxx'

import {request} from "@@/plugin-request/request";
export function getTxyCosConf() {
  return request('/api/v1/xxxx/getTxyCosConf', {
    method: 'get',
  })
    .then(response => {
      return response;
    })
    .catch(error => {
      console.error('Error get data:', error);
      throw error;
    });
}

二、把腾讯云的接口调用放到另一个文件去

TencentCos.ts

import COS from 'cos-js-sdk-v5';

/**
 * @desc 腾讯云 COS 封装
 * @param {Object} oxs
 * @returns { uploadFile }
 */
export function uploadCOS(oxs) {
  let clientCOS;
  // 判断临时认证方式还是 AK/SK 方式
  if (oxs.provisionalAuth == false) {
    clientCOS = new COS({
      SecretId: oxs.secretId,
      SecretKey: oxs.secretKey,
    });
  } else {
    clientCOS = new COS({
      SecretId: oxs.credential.TmpSecretId,
      SecretKey: oxs.credential.TmpSecretKey,
      XCosSecurityToken: oxs.credential.Token,
      ExpiredTime: oxs.ExpiredTime,
    });
  }

  /**
   * @desc 文件上传
   * @param {File} file
   * @param {String} fileName - 文件名
   * @param {Function} [fileProgress = () => void] - 文件上传进度回调
   * @returns {Promise<string>}
   */
  function uploadFile(file, fileName, fileProgress = () => {}) {
    return new Promise((resolve, reject) => {
      if (file instanceof File) {
        clientCOS.putObject(
          {
            Bucket: oxs.bucket, // 存储桶名称
            Region: oxs.region, // 地区
            Key: fileName, // 使用传入的文件名
            Body: file,
            onHashProgress: function (progressData) {
              console.log('校验中', JSON.stringify(progressData));
            },
            onProgress: function (progressData) {
              fileProgress(progressData.percent);
            },
          },
          function (err, result) {
            if (!err) {
              if (result.statusCode == 200) {
                resolve(`http://${result.Location}`);
              } else {
                reject(new Error(`上传失败，状态码：${result.statusCode}`));
              }
            } else {
              reject(err);
            }
          }
        );
      } else {
        reject(new Error('提供的文件不是有效的 File 对象'));
      }
    });
  }

  return uploadFile;
}

richEditor.tsx

// RichEditor.tsx
import React, { useState, useEffect, useRef, useMemo, forwardRef } from 'react';
import ReactQuill, { Quill } from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import { Modal, Input, Upload, Button, Tabs, Alert, message, Progress } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import ImageResize from 'quill-image-resize-module-react';
import { getTxyCosConf } from '@/services/anchor-touch/history';
import '@/styles/quillEditor.css';

import {uploadCOS} from '@/utils/oxs/TencentCos'; // 引入腾讯云 COS 上传方法

// 引入 Quill 的基础类
const BlockEmbed = Quill.import('blots/block/embed');

// 自定义图片 Blot，支持宽度和高度属性
class CustomImage extends BlockEmbed {
  static create(value: any) {
    const node = super.create();
    node.setAttribute('src', value.src);
    if (value.width) {
      node.setAttribute('width', value.width);
    }
    if (value.height) {
      node.setAttribute('height', value.height);
    }
    return node;
  }

  static value(node: any) {
    return {
      src: node.getAttribute('src'),
      width: node.getAttribute('width'),
      height: node.getAttribute('height'),
    };
  }
}
CustomImage.blotName = 'customImage';
CustomImage.tagName = 'img';

Quill.register(CustomImage);
Quill.register('modules/imageResize', ImageResize);

const RichEditor = forwardRef((props: any, ref: any) => {
  const { value = '', onChange } = props;
  const [editorValue, setEditorValue] = useState(value);
  const [isCosReady, setIsCosReady] = useState(false);
  const quillRef = useRef<any>(null);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isLinkModalVisible, setIsLinkModalVisible] = useState(false);
  const [bucket, setBucket] = useState('');
  const [region, setRegion] = useState('');
  // const [cos, setCos] = useState<COS | null>(null);
  const [uploadFileFunc, setUploadFileFunc] = useState<any>(null); // 改名为 uploadFileFunc

  const [width, setWidth] = useState('');
  const [height, setHeight] = useState('');
  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
  const [currentFile, setCurrentFile] = useState<File | null>(null);
  const [originalWidth, setOriginalWidth] = useState<number | null>(null);
  const [originalHeight, setOriginalHeight] = useState<number | null>(null);
  const [imageUrl, setImageUrl] = useState('');
  const [uploadMode, setUploadMode] = useState<'local' | 'url'>('local');
  const [linkUrl, setLinkUrl] = useState('');
  const [linkText, setLinkText] = useState('');
  const [urlError, setUrlError] = useState('');
  const [isImageValid, setIsImageValid] = useState(false);

  const [uploadProgress, setUploadProgress] = useState<number | null>(null); // 添加上传进度状态

  useEffect(() => {
    setEditorValue(value);
  }, [value]);

  useEffect(() => {
    const fetchCosConfig = async () => {
      try {
        const response = await getTxyCosConf();
        setBucket(response.data.bucket);
        setRegion(response.data.region);

        const oxs = {
          provisionalAuth: false,
          secretId: response.data.secretid,
          secretKey: response.data.secretkey,
          bucket: response.data.bucket,
          region: response.data.region,
        };
        const uploadFile = uploadCOS(oxs); // 获取 uploadFile 方法
        setUploadFileFunc(() => uploadFile);

        setIsCosReady(true);
      } catch (error) {
        console.error('获取 COS 配置失败:', error);
      }
    };
    fetchCosConfig();
  }, []);

  const handleEditorChange = (content: string) => {
    setEditorValue(content);
    if (onChange) {
      onChange(content);
    }
  };

  const showImageUploadModal = () => {
    setIsModalVisible(true);
  };

  const showLinkModal = () => {
    setIsLinkModalVisible(true);
  };

  const handleLinkOk = () => {
    if (!linkUrl.startsWith('http://') && !linkUrl.startsWith('https://')) {
      setUrlError('链接地址格式不正确，请输入有效的链接地址。');
      return;
    }
    const editor = quillRef.current?.getEditor();
    if (editor) {
      editor.focus();
      const range = editor.getSelection();
      const position = range ? range.index : editor.getLength();
      editor.insertText(position, linkText, 'link', linkUrl);
      editor.setSelection(position + linkText.length);
      handleLinkCancel();
    }
  };

  const handleLinkCancel = () => {
    setIsLinkModalVisible(false);
    setLinkUrl('');
    setLinkText('');
    setUrlError('');
  };

  const handleOk = () => {
    if (uploadMode === 'local') {
      if (!currentFile || !uploadFileFunc) {
        handleCancel();
        return;
      }
      const uniqueFileName = `${Date.now()}_${currentFile.name}`;
      uploadFileFunc(currentFile, uniqueFileName, (percent: number) => {
        // console.log(`上传进度：${(percent * 100).toFixed(2)}%`);
        setUploadProgress(percent); // 更新上传进度
      })
        .then((url: string) => {
          message.success('上传成功!!!')
          insertImageToEditor(url);
          // setUploadProgress(null); // 重置上传进度
        })
        .catch((err: any) => {
          console.error('上传失败:', err);
          message.error('上传失败!!!')
          // setUploadProgress(null); // 重置上传进度
        });
    } else {
      insertImageToEditor(imageUrl);
    }
  };

  const insertImageToEditor = (imageUrl: string) => {
    const editor = quillRef.current?.getEditor();
    if (editor) {
      editor.focus();
      const range = editor.getSelection();
      const position = range ? range.index : editor.getLength();
      editor.insertEmbed(position, 'customImage', {
        src: imageUrl,
        width: width,
        height: height,
      });
      editor.setSelection(position + 1);
      handleCancel();
    }
  };

  const handleCancel = () => {
    setIsModalVisible(false);
    setPreviewUrl(null);
    setCurrentFile(null);
    setWidth('');
    setHeight('');
    setImageUrl('');
    // setUploadProgress(null); // 重置上传进度
  };

  const beforeUpload = (file: File) => {
    if (!file.type.startsWith('image/')) {
      console.error('不是有效的图像文件');
      return false;
    }
    const reader = new FileReader();
    reader.onload = (e) => {
      const preview = e.target?.result as string;
      setPreviewUrl(preview);
      setCurrentFile(file);
      const img = new Image();
      img.onload = () => {
        setOriginalWidth(img.naturalWidth);
        setOriginalHeight(img.naturalHeight);
        setWidth(img.naturalWidth.toString());
        setHeight(img.naturalHeight.toString());
      };
      img.onerror = (error) => {
        console.error('图像加载失败:', error);
      };
      img.src = preview;
    };
    reader.onerror = (error) => {
      console.error('文件读取失败:', error);
    };
    reader.readAsDataURL(file);
    return false;
  };

  const handleWidthBlur = () => {
    const widthValue = parseFloat(width);
    if (isNaN(widthValue)) {
      console.error('无效的宽度: ', width);
      return;
    }
    if (originalWidth && originalHeight && widthValue > 0) {
      const calculatedHeight = (widthValue / originalWidth) * originalHeight;
      setHeight(calculatedHeight.toFixed(0).toString());
    }
  };

  const handleHeightBlur = () => {
    const heightValue = parseFloat(height);
    if (originalWidth && originalHeight && heightValue > 0) {
      const calculatedWidth = (heightValue / originalHeight) * originalWidth;
      setWidth(calculatedWidth.toFixed(0).toString());
    }
  };

  const handleLinkUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const url = e.target.value;
    setLinkUrl(url);
    if (url.startsWith('http://') || url.startsWith('https://')) {
      setUrlError('');
    } else if (url) {
      setUrlError('链接地址格式不正确，请输入有效的链接地址。');
    }
  };

  const sizes = [false, '14px', '16px', '18px', '20px', '22px', '26px', '28px', '30px'];
  const Size = Quill.import('formats/size');
  Size.whitelist = sizes;

  const fonts = [
    'SimSun',
    'SimHei',
    'Microsoft-YaHei',
    'KaiTi',
    'FangSong',
    'Arial',
    'Times-New-Roman',
    'sans-serif',
  ];
  const Font = Quill.import('formats/font');
  Font.whitelist = fonts;
  Quill.register(Font, true);

  const modules = useMemo(
    () => ({
      toolbar: {
        container: [
          ['bold', 'italic', 'underline'],
          [{ size: sizes }],
          [{ header: [1, 2, 3, 4, 5, false] }],
          [{ color: [] }, { background: [] }],
          ['link', 'image', 'clean'],
        ],
        handlers: {
          image: showImageUploadModal,
          link: showLinkModal,
        },
      },
      imageResize: {
        modules: ['DisplaySize'],
        handleStyles: {
          backgroundColor: 'transparent',
          border: 'none',
        },
        resizeWidth: false,
      },
    }),
    []
  );

  const formats = [
    'font',
    'header',
    'size',
    'bold',
    'italic',
    'underline',
    'strike',
    'list',
    'bullet',
    'link',
    'customImage', // 使用自定义的 customImage
    'width',
    'height',
    'color',
    'background',
  ];

  if (!isCosReady) {
    return <div>加载中...</div>;
  }

  return (
    <>
      <ReactQuill
        ref={quillRef}
        value={editorValue}
        onChange={handleEditorChange}
        modules={modules}
        formats={formats}
      />
      <Modal
        title="插入图片"
        visible={isModalVisible}
        onCancel={handleCancel}
        footer={null}
      >
        <Tabs defaultActiveKey="local" onChange={(key) => setUploadMode(key as 'local' | 'url')}>
          <Tabs.TabPane tab="本地图片" key="local">
            <Upload beforeUpload={beforeUpload} showUploadList={false}>
              <Button icon={<UploadOutlined />}>选择图片</Button>
            </Upload>
            {previewUrl && (
              <div
                style={{
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                  marginTop: 10,
                  width: 150,
                  height: 150,
                  overflow: 'hidden',
                  border: '1px solid #e8e8e8',
                }}
              >
                <img src={previewUrl} alt="预览" style={{ width: 150, maxHeight: '100%' }} />
              </div>
            )}
          </Tabs.TabPane>
          <Tabs.TabPane tab="链接图片" key="url">
            <Input
              placeholder="图片链接"
              value={imageUrl}
              onChange={(e) => setImageUrl(e.target.value)}
              onBlur={() => {
                const img = new Image();
                img.onload = () => {
                  setOriginalWidth(img.naturalWidth);
                  setOriginalHeight(img.naturalHeight);
                  setWidth(img.naturalWidth.toString());
                  setHeight(img.naturalHeight.toString());
                  setPreviewUrl(imageUrl);
                  setIsImageValid(true); // 图片有效
                };
                img.onerror = (error) => {
                  console.error('图像加载失败:', error);
                  setPreviewUrl(null);
                  setIsImageValid(false); // 图片无效
                };
                img.src = imageUrl;
              }}
            />
            {previewUrl && (
              <div
                style={{
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                  marginTop: 10,
                  width: 150,
                  height: 150,
                  overflow: 'hidden',
                  border: '1px solid #e8e8e8',
                }}
              >
                <img src={previewUrl} alt="预览" style={{ width: 150, maxHeight: '100%' }} />
              </div>
            )}
          </Tabs.TabPane>
        </Tabs>
        <Input
          placeholder="设置宽度"
          value={width}
          onChange={(e) => setWidth(e.target.value)}
          onBlur={handleWidthBlur}
          style={{ marginTop: 10 }}
        />
        <Input
          placeholder="设置高度"
          value={height}
          onChange={(e) => setHeight(e.target.value)}
          onBlur={handleHeightBlur}
          style={{ marginTop: 10 }}
        />
        {/*{uploadProgress !== null && (*/}
        {/*  <Progress*/}
        {/*    percent={Math.round(uploadProgress * 100)}*/}
        {/*    status={uploadProgress < 1 ? 'active' : 'success'}*/}
        {/*    style={{ marginTop: 10 }}*/}
        {/*  />*/}
        {/*)}*/}
        <div style={{ marginTop: 10, textAlign: 'right' }}>
          <Button
            type="primary"
            onClick={handleOk}
            disabled={
              uploadMode === 'local'
                ? !currentFile || uploadProgress !== null
                : !imageUrl || !isImageValid // 当图片无效时禁用按钮
            }
          >
            确认
          </Button>
          <Button onClick={handleCancel} style={{ marginLeft: 10 }}>
            取消
          </Button>
        </div>
      </Modal>

      <Modal
        title="添加链接"
        visible={isLinkModalVisible}
        onCancel={handleLinkCancel}
        onOk={handleLinkOk}
      >
        {urlError && <Alert message={urlError} type="error" />}
        <Input
          placeholder="链接地址"
          value={linkUrl}
          onChange={handleLinkUrlChange}
          style={{ marginBottom: 10 }}
        />
        <Input
          placeholder="备注"
          value={linkText}
          onChange={(e) => setLinkText(e.target.value)}
        />
      </Modal>
    </>
  );
});

export default RichEditor;