feat: 富文本编辑器

2025-09-24 15:47:28 +08:00
parent 12495b6d85
commit 82d043a414
8 changed files with 1160 additions and 35 deletions
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
    "@ant-design/icons": "^5.6.1",
    "@ant-design/pro-components": "^2.8.9",
    "@ant-design/v5-patch-for-react-19": "^1.0.3",
+    "@tinymce/tinymce-react": "^6.3.0",
    "antd": "^5.26.4",
    "antd-style": "^3.7.0",
    "classnames": "^2.5.1",
@@ -45,6 +46,7 @@
    "jsencrypt": "^3.5.4",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
+    "tinymce": "^8.1.2",
    "web-storage-cache": "^1.1.1"
  },
  "devDependencies": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
      '@ant-design/v5-patch-for-react-19':
        specifier: ^1.0.3
        version: 1.0.3(antd@5.27.3(date-fns@2.30.0)(moment@2.30.1)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@tinymce/tinymce-react':
+        specifier: ^6.3.0
+        version: 6.3.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(tinymce@8.1.2)
      antd:
        specifier: ^5.26.4
        version: 5.27.3(date-fns@2.30.0)(moment@2.30.1)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
@@ -38,6 +41,9 @@ importers:
      react-dom:
        specifier: ^19.1.0
        version: 19.1.1(react@19.1.1)
+      tinymce:
+        specifier: ^8.1.2
+        version: 8.1.2
      web-storage-cache:
        specifier: ^1.1.1
        version: 1.1.1
@@ -2551,6 +2557,16 @@ packages:
      '@types/react-dom':
        optional: true

+  '@tinymce/tinymce-react@6.3.0':
+    resolution: {integrity: sha512-E++xnn0XzDzpKr40jno2Kj7umfAE6XfINZULEBBeNjTMvbACWzA6CjiR6V8eTDc9yVmdVhIPqVzV4PqD5TZ/4g==}
+    peerDependencies:
+      react: ^19.0.0 || ^18.0.0 || ^17.0.1 || ^16.7.0
+      react-dom: ^19.0.0 || ^18.0.0 || ^17.0.1 || ^16.7.0
+      tinymce: ^8.0.0 || ^7.0.0 || ^6.0.0 || ^5.5.1
+    peerDependenciesMeta:
+      tinymce:
+        optional: true
+
  '@tootallnate/once@1.1.2':
    resolution: {integrity: sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==}
    engines: {node: '>= 6'}
@@ -10246,6 +10262,9 @@ packages:
  tinyexec@1.0.1:
    resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}

+  tinymce@8.1.2:
+    resolution: {integrity: sha512-KITxHEEHRlxC5xOnxA123eAJ67NgsWxNphtItWt9TRu07DiTZrWIqJeIKRX9euE51/l3kJO4WQiqoBXKTJJGsA==}
+
  titleize@3.0.0:
    resolution: {integrity: sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==}
    engines: {node: '>=12'}
@@ -14715,6 +14734,14 @@ snapshots:
      '@types/react': 19.1.12
      '@types/react-dom': 19.1.9(@types/react@19.1.12)

+  '@tinymce/tinymce-react@6.3.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(tinymce@8.1.2)':
+    dependencies:
+      prop-types: 15.8.1
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      tinymce: 8.1.2
+
  '@tootallnate/once@1.1.2': {}

  '@tootallnate/once@2.0.0': {}
@@ -24850,6 +24877,8 @@ snapshots:

  tinyexec@1.0.1: {}

+  tinymce@8.1.2: {}
+
  titleize@3.0.0: {}

  tldts-core@6.1.86: {}
--- a/src/components/DrawerForm/index.tsx
+++ b/src/components/DrawerForm/index.tsx
@@ -1,16 +1,14 @@
-import { CloseOutlined } from '@ant-design/icons';
 import type { ProFormColumnsType } from '@ant-design/pro-components';
-import { BetaSchemaForm, DrawerForm } from '@ant-design/pro-components';
+import { BetaSchemaForm } from '@ant-design/pro-components';
 import { Button, type ColProps, Drawer, Space, Typography } from 'antd';
 import React, { forwardRef, useImperativeHandle } from 'react';

-const { Title } = Typography;
 interface ConfigurableDrawerFormProps {
  title?: string;
  columns: ProFormColumnsType[];
  onSubmit?: (values: any) => Promise<boolean>;
  initialValues?: Record<string, any>;
-  width?: number;
+  width?: number | string;
  labelCol?: ColProps;
  wrapperCol?: ColProps;
 }
@@ -70,31 +68,31 @@ const ConfigurableDrawerForm = forwardRef<
        setLoading(false);
      }
    };
-    const customHeader = (
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          padding: '0 0px 16px 0px',
-          borderBottom: '1px solid #f0f0f0',
-          marginBottom: '16px',
-        }}
-      >
-        <Title level={4} style={{ margin: 0 }}>
-          {title}
-        </Title>
-        <Button
-          type="text"
-          icon={<CloseOutlined />}
-          onClick={() => setOpen(false)}
-          style={{
-            border: 'none',
-            boxShadow: 'none',
-          }}
-        />
-      </div>
-    );
+    // const customHeader = (
+    //   <div
+    //     style={{
+    //       display: "flex",
+    //       justifyContent: "space-between",
+    //       alignItems: "center",
+    //       padding: "0 0px 16px 0px",
+    //       borderBottom: "1px solid #f0f0f0",
+    //       marginBottom: "16px",
+    //     }}
+    //   >
+    //     <Title level={4} style={{ margin: 0 }}>
+    //       {title}
+    //     </Title>
+    //     <Button
+    //       type="text"
+    //       icon={<CloseOutlined />}
+    //       onClick={() => setOpen(false)}
+    //       style={{
+    //         border: "none",
+    //         boxShadow: "none",
+    //       }}
+    //     />
+    //   </div>
+    // );
    return (
      <Drawer
        title={title}
--- a/src/components/Tinymce/demo.tsx
+++ b/src/components/Tinymce/demo.tsx
@@ -0,0 +1,691 @@
+// components/RichEditor/index.tsx
+
+import { Editor } from '@tinymce/tinymce-react';
+import { message } from 'antd';
+import React, { useCallback, useEffect, useState } from 'react';
+import type { Editor as TinyMCEEditor } from 'tinymce';
+import './index.less';
+
+export interface RichEditorProps {
+  value?: string;
+  onChange?: (content: string) => void;
+  height?: number;
+  placeholder?: string;
+  disabled?: boolean;
+  uploadConfig?: {
+    action: string;
+    headers?: Record<string, string>;
+    maxSize?: number;
+    acceptTypes?: string[];
+    data?: Record<string, any>;
+  };
+  showWordCount?: boolean;
+  maxWords?: number;
+}
+
+const RichEditor: React.FC<RichEditorProps> = ({
+  value = '',
+  onChange,
+  height = 400,
+  placeholder = '请输入内容...',
+  disabled = false,
+  showWordCount = true,
+  maxWords,
+  uploadConfig = {
+    action: '/api/upload/image',
+    maxSize: 5,
+    acceptTypes: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
+  },
+}) => {
+  const [uploading, setUploading] = useState(false);
+  const [wordCount, setWordCount] = useState(0);
+  const [charCount, setCharCount] = useState(0);
+
+  // 自定义字数统计函数
+  const countWords = (text: string) => {
+    const plainText = text.replace(/<[^>]*>/g, '');
+    const cleanText = plainText.replace(/\s+/g, ' ').trim();
+
+    if (!cleanText) return { words: 0, characters: 0 };
+
+    const chineseChars = cleanText.match(/[\u4e00-\u9fa5]/g) || [];
+    const englishWords = cleanText.match(/[a-zA-Z]+/g) || [];
+    const numbers = cleanText.match(/\d+/g) || [];
+
+    const words = chineseChars.length + englishWords.length + numbers.length;
+    const characters = cleanText.length;
+
+    return { words, characters };
+  };
+
+  const handleEditorChange = (content: string) => {
+    onChange?.(content);
+
+    if (showWordCount) {
+      const { words, characters } = countWords(content);
+      setWordCount(words);
+      setCharCount(characters);
+
+      if (maxWords && words > maxWords) {
+        message.warning(
+          `内容超出字数限制，当前 ${words} 字，限制 ${maxWords} 字`,
+        );
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (showWordCount && value) {
+      const { words, characters } = countWords(value);
+      setWordCount(words);
+      setCharCount(characters);
+    }
+  }, [value, showWordCount]);
+
+  const uploadFile = useCallback(
+    async (file: File): Promise<string> => {
+      return new Promise((resolve, reject) => {
+        const formData = new FormData();
+        formData.append('file', file);
+
+        if (uploadConfig.data) {
+          Object.keys(uploadConfig.data).forEach((key) => {
+            if (uploadConfig.data) formData.append(key, uploadConfig.data[key]);
+          });
+        }
+
+        const xhr = new XMLHttpRequest();
+
+        xhr.upload.addEventListener('progress', (e) => {
+          if (e.lengthComputable) {
+            const percent = Math.round((e.loaded / e.total) * 100);
+            console.log(`上传进度: ${percent}%`);
+          }
+        });
+
+        xhr.addEventListener('load', () => {
+          if (xhr.status === 200) {
+            try {
+              const response = JSON.parse(xhr.responseText);
+              if (response.code === 200 && response.data?.url) {
+                resolve(response.data.url);
+              } else {
+                reject(response.message || '上传失败');
+              }
+            } catch (_error) {
+              reject('响应解析失败');
+            }
+          } else {
+            reject(`上传失败: ${xhr.status}`);
+          }
+        });
+
+        xhr.addEventListener('error', () => {
+          reject('网络错误');
+        });
+
+        if (uploadConfig.headers) {
+          Object.keys(uploadConfig.headers).forEach((key) => {
+            if (uploadConfig.headers)
+              xhr.setRequestHeader(key, uploadConfig.headers[key]);
+          });
+        }
+
+        xhr.open('POST', uploadConfig.action);
+        xhr.send(formData);
+      });
+    },
+    [uploadConfig],
+  );
+
+  const handleImageUpload = useCallback(
+    (blobInfo: any, _: (percent: number) => void): Promise<string> => {
+      return new Promise((resolve, reject) => {
+        try {
+          setUploading(true);
+          const file = blobInfo.blob();
+          uploadFile(file).then((url) => {
+            resolve(url);
+            message.success('图片上传成功');
+          });
+        } catch (error) {
+          reject(error);
+          message.error(typeof error === 'string' ? error : '上传失败');
+        } finally {
+          setUploading(false);
+        }
+      });
+    },
+    [uploadFile],
+  );
+
+  const handleCustomUpload = useCallback(
+    (editor: TinyMCEEditor) => {
+      const input = document.createElement('input');
+      input.type = 'file';
+      input.accept = uploadConfig.acceptTypes?.join(',') || 'image/*';
+      input.multiple = true;
+
+      const handleFileChange = async (event: Event) => {
+        const target = event.target as HTMLInputElement;
+        const files = Array.from(target.files || []);
+
+        if (files.length === 0) return;
+
+        setUploading(true);
+
+        try {
+          for (const file of files) {
+            const isValidType = uploadConfig.acceptTypes?.includes(file.type);
+            if (!isValidType) {
+              message.error(`文件 ${file.name} 类型不支持`);
+              continue;
+            }
+
+            const isValidSize =
+              file.size / 1024 / 1024 < (uploadConfig.maxSize || 5);
+            if (!isValidSize) {
+              message.error(
+                `文件 ${file.name} 大小超过 ${uploadConfig.maxSize || 5}MB`,
+              );
+              continue;
+            }
+
+            try {
+              const url = await uploadFile(file);
+              const imgHtml = `<img src="${url}" alt="${file.name}" style="max-width: 100%; height: auto;" />`;
+              editor.insertContent(imgHtml);
+              message.success(`${file.name} 上传成功`);
+            } catch (error) {
+              message.error(`${file.name} 上传失败: ${error}`);
+            }
+          }
+        } finally {
+          setUploading(false);
+        }
+      };
+
+      input.addEventListener('change', handleFileChange);
+      input.click();
+    },
+    [uploadConfig, uploadFile],
+  );
+
+  // 全展开的工具栏配置
+  const editorConfig = {
+    height,
+    menubar: 'file edit view insert format tools table help',
+    plugins: [
+      'advlist',
+      'autolink',
+      'lists',
+      'link',
+      'image',
+      'charmap',
+      'preview',
+      'anchor',
+      'searchreplace',
+      'visualblocks',
+      'code',
+      'fullscreen',
+      'insertdatetime',
+      'media',
+      'table',
+      'help',
+      'wordcount',
+      'emoticons',
+      'template',
+      'codesample',
+      'hr',
+      'pagebreak',
+      'nonbreaking',
+      'toc',
+      'imagetools',
+      'textpattern',
+      'noneditable',
+      'quickbars',
+      'accordion',
+    ],
+
+    // 修改为全展开的工具栏配置
+    toolbar: [
+      // 第一行：撤销重做 + 格式选择 + 字体
+      'undo redo | blocks fontfamily fontsize',
+
+      // 第二行：文本格式
+      'bold italic underline strikethrough subscript superscript | forecolor backcolor',
+
+      // 第三行：对齐和列表
+      'alignleft aligncenter alignright alignjustify | bullist numlist outdent indent',
+
+      // 第四行：插入功能
+      'link customupload image media table emoticons charmap insertdatetime hr pagebreak',
+
+      // 第五行：高级功能
+      'codesample accordion blockquote | searchreplace visualblocks code',
+
+      // 第六行：其他工具
+      'removeformat | fullscreen preview help',
+    ].join(' | '),
+
+    // 设置工具栏模式为换行显示，而不是滑动
+    toolbar_mode: 'wrap' as const, // 改为 wrap 模式，全部展开
+
+    // 工具栏分组，每组之间有分隔符
+    toolbar_groups: {
+      history: { icon: 'undo', tooltip: '历史操作' },
+      formatting: { icon: 'bold', tooltip: '文本格式' },
+      alignment: { icon: 'align-left', tooltip: '对齐方式' },
+      indentation: { icon: 'indent', tooltip: '缩进' },
+      insert: { icon: 'plus', tooltip: '插入' },
+      tools: { icon: 'preferences', tooltip: '工具' },
+    },
+
+    font_family_formats: [
+      '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif',
+      '苹方=PingFang SC,Microsoft YaHei,sans-serif',
+      '宋体=SimSun,serif',
+      '黑体=SimHei,sans-serif',
+      '楷体=KaiTi,serif',
+      'Arial=arial,helvetica,sans-serif',
+      'Times New Roman=times new roman,times,serif',
+      'Courier New=courier new,courier,monospace',
+    ].join(';'),
+
+    fontsize_formats:
+      '8px 9px 10px 11px 12px 14px 16px 18px 20px 22px 24px 26px 28px 36px 48px 72px',
+
+    block_formats: [
+      '段落=p',
+      '标题1=h1',
+      '标题2=h2',
+      '标题3=h3',
+      '标题4=h4',
+      '标题5=h5',
+      '标题6=h6',
+      '预格式化=pre',
+      '地址=address',
+      '代码=code',
+    ].join(';'),
+
+    // 字数统计配置
+    wordcount_countregex: /[\w\u2019\u4e00-\u9fa5]+/g,
+    wordcount_cleanregex: /[0-9.(),;:!?%#$?\x27\x22_+=\\/-]*/g,
+
+    // 颜色配置
+    color_map: [
+      '000000',
+      '黑色',
+      '993300',
+      '深红色',
+      '333300',
+      '深黄色',
+      '003300',
+      '深绿色',
+      '003366',
+      '深青色',
+      '000080',
+      '深蓝色',
+      '333399',
+      '蓝色',
+      '333333',
+      '深灰色',
+      '800000',
+      '栗色',
+      'FF6600',
+      '橙色',
+      '808000',
+      '橄榄色',
+      '008000',
+      '绿色',
+      '008080',
+      '青色',
+      '0000FF',
+      '蓝色',
+      '666699',
+      '灰蓝色',
+      '808080',
+      '灰色',
+      'FF0000',
+      '红色',
+      'FF9900',
+      '琥珀色',
+      '99CC00',
+      '黄绿色',
+      '339966',
+      '海绿色',
+      '33CCCC',
+      '青绿色',
+      '3366FF',
+      '蓝色',
+      '800080',
+      '紫色',
+      '999999',
+      '中灰色',
+      'FF00FF',
+      '洋红色',
+      'FFCC00',
+      '金色',
+      'FFFF00',
+      '黄色',
+      '00FF00',
+      '酸橙色',
+      '00FFFF',
+      '水蓝色',
+      '00CCFF',
+      '天蓝色',
+      '993366',
+      '红紫色',
+      'FFFFFF',
+      '白色',
+    ],
+
+    // 代码高亮配置
+    codesample_languages: [
+      { text: 'HTML/XML', value: 'markup' },
+      { text: 'JavaScript', value: 'javascript' },
+      { text: 'TypeScript', value: 'typescript' },
+      { text: 'CSS', value: 'css' },
+      { text: 'SCSS', value: 'scss' },
+      { text: 'Python', value: 'python' },
+      { text: 'Java', value: 'java' },
+      { text: 'C++', value: 'cpp' },
+      { text: 'C#', value: 'csharp' },
+      { text: 'PHP', value: 'php' },
+      { text: 'Ruby', value: 'ruby' },
+      { text: 'Go', value: 'go' },
+      { text: 'Rust', value: 'rust' },
+      { text: 'SQL', value: 'sql' },
+      { text: 'JSON', value: 'json' },
+      { text: 'Bash', value: 'bash' },
+    ],
+
+    // 表格配置
+    table_default_attributes: {
+      border: '1',
+    },
+    table_default_styles: {
+      'border-collapse': 'collapse',
+      width: '100%',
+    },
+    table_class_list: [
+      { title: '无样式', value: '' },
+      { title: '简单表格', value: 'simple-table' },
+      { title: '条纹表格', value: 'striped-table' },
+      { title: '边框表格', value: 'bordered-table' },
+    ],
+
+    // 链接配置
+    link_default_target: '_blank',
+    link_assume_external_targets: true,
+    link_context_toolbar: true,
+
+    // 图片配置
+    image_advtab: true,
+    image_caption: true,
+
+    // 媒体配置
+    media_live_embeds: true,
+    media_filter_html: false,
+
+    content_style: `
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+        font-size: 14px;
+        line-height: 1.6;
+        margin: 16px;
+        color: #333;
+      }
+
+      h1, h2, h3, h4, h5, h6 {
+        margin-top: 24px;
+        margin-bottom: 16px;
+        font-weight: 600;
+        line-height: 1.25;
+      }
+
+      h1 { font-size: 2em; color: #1a1a1a; }
+      h2 { font-size: 1.5em; color: #2a2a2a; }
+      h3 { font-size: 1.25em; color: #3a3a3a; }
+
+      p { margin-bottom: 16px; }
+
+      img {
+        max-width: 100%;
+        height: auto;
+        border-radius: 6px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        margin: 8px 0;
+      }
+
+      table {
+        border-collapse: collapse;
+        width: 100%;
+        margin: 16px 0;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+      }
+
+      table td, table th {
+        border: 1px solid #e8e8e8;
+        padding: 12px;
+        text-align: left;
+      }
+
+      table th {
+        background-color: #f8f9fa;
+        font-weight: 600;
+        color: #495057;
+      }
+
+      blockquote {
+        border-left: 4px solid #1890ff;
+        margin: 16px 0;
+        padding: 8px 16px;
+        background-color: #f6f8fa;
+        color: #666;
+        font-style: italic;
+      }
+
+      code {
+        background-color: #f1f3f4;
+        padding: 2px 4px;
+        border-radius: 3px;
+        font-family: 'Courier New', monospace;
+        font-size: 0.9em;
+        color: #d73a49;
+      }
+
+      pre {
+        background-color: #f8f8f8;
+        border: 1px solid #e1e4e8;
+        border-radius: 6px;
+        padding: 16px;
+        overflow-x: auto;
+        margin: 16px 0;
+      }
+
+      pre code {
+        background: none;
+        padding: 0;
+        color: inherit;
+      }
+    `,
+
+    placeholder,
+    branding: false,
+    elementpath: true,
+    resize: 'both' as const,
+    statusbar: showWordCount,
+
+    // 图片上传配置
+    images_upload_handler: handleImageUpload,
+    automatic_uploads: true,
+    images_reuse_filename: true,
+    images_upload_url: uploadConfig.action,
+    images_upload_base_path: '',
+    images_upload_credentials: true,
+
+    // 粘贴配置
+    paste_data_images: true,
+    paste_as_text: false,
+    paste_webkit_styles: 'none',
+    paste_merge_formats: true,
+    paste_remove_styles_if_webkit: true,
+
+    // 文件选择器配置
+    file_picker_types: 'image media',
+    file_picker_callback: (
+      callback: (url: string, meta?: any) => void,
+      // value: string,
+      meta: any,
+    ) => {
+      if (meta.filetype === 'image') {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = uploadConfig.acceptTypes?.join(',') || 'image/*';
+
+        const handleChange = async (event: Event) => {
+          const target = event.target as HTMLInputElement;
+          const file = target.files?.[0];
+
+          if (!file) return;
+
+          const isValidType = uploadConfig.acceptTypes?.includes(file.type);
+          const isValidSize =
+            file.size / 1024 / 1024 < (uploadConfig.maxSize || 5);
+
+          if (!isValidType) {
+            message.error('文件类型不支持');
+            return;
+          }
+
+          if (!isValidSize) {
+            message.error(`文件大小不能超过 ${uploadConfig.maxSize || 5}MB`);
+            return;
+          }
+
+          try {
+            setUploading(true);
+            const url = await uploadFile(file);
+            callback(url, { alt: file.name });
+            message.success('图片上传成功');
+          } catch (error) {
+            message.error('上传失败');
+            console.error('Upload error:', error);
+          } finally {
+            setUploading(false);
+          }
+        };
+
+        input.addEventListener('change', handleChange);
+        input.click();
+      }
+    },
+
+    // 快速工具栏
+    quickbars_selection_toolbar:
+      'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
+    quickbars_insert_toolbar: 'quickimage quicktable',
+
+    // 文本模式
+    textpattern_patterns: [
+      { start: '*', end: '*', format: 'italic' },
+      { start: '**', end: '**', format: 'bold' },
+      { start: '#', format: 'h1' },
+      { start: '##', format: 'h2' },
+      { start: '###', format: 'h3' },
+      { start: '####', format: 'h4' },
+      { start: '#####', format: 'h5' },
+      { start: '######', format: 'h6' },
+      { start: '1. ', cmd: 'InsertOrderedList' },
+      { start: '* ', cmd: 'InsertUnorderedList' },
+      { start: '- ', cmd: 'InsertUnorderedList' },
+    ],
+
+    // 初始化设置
+    setup: (editor: TinyMCEEditor) => {
+      // 注册自定义上传按钮
+      editor.ui.registry.addButton('customupload', {
+        text: uploading ? '上传中...' : '上传',
+        icon: 'upload',
+        tooltip: '上传图片（支持多选）',
+        enabled: !disabled && !uploading,
+        onAction: () => {
+          handleCustomUpload(editor);
+        },
+      });
+
+      // 监听内容变化，实时更新字数统计
+      editor.on('input change undo redo', () => {
+        if (showWordCount) {
+          const content = editor.getContent();
+          const { words, characters } = countWords(content);
+          setWordCount(words);
+          setCharCount(characters);
+        }
+      });
+
+      editor.on('init', () => {
+        console.log('编辑器初始化完成');
+
+        // 初始化字数统计
+        if (showWordCount && value) {
+          const { words, characters } = countWords(value);
+          setWordCount(words);
+          setCharCount(characters);
+        }
+      });
+    },
+
+    // 其他配置
+    convert_urls: false,
+    remove_script_host: false,
+    relative_urls: false,
+    language: 'zh_CN',
+    directionality: 'ltr' as const,
+
+    // 高级配置
+    extended_valid_elements: 'script[src|async|defer|type|charset]',
+
+    // 性能配置
+    browser_spellcheck: true,
+    contextmenu: 'link image table',
+  };
+
+  return (
+    <div className="rich-editor-wrapper">
+      <Editor
+        value={value}
+        onEditorChange={handleEditorChange}
+        init={editorConfig}
+        disabled={disabled}
+      />
+
+      {/* 自定义字数统计显示 */}
+      {showWordCount && (
+        <div className="word-count-display">
+          <span className="word-count">
+            字数: {wordCount}
+            {maxWords && (
+              <span className={wordCount > maxWords ? 'over-limit' : ''}>
+                /{maxWords}
+              </span>
+            )}
+          </span>
+          <span className="char-count">字符: {charCount}</span>
+        </div>
+      )}
+
+      {uploading && (
+        <div className="upload-overlay">
+          <div className="upload-spinner">
+            <div className="spinner"></div>
+            <span>上传中...</span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default RichEditor;
--- a/src/components/Tinymce/index.less
+++ b/src/components/Tinymce/index.less
@@ -0,0 +1,145 @@
+/* components/RichEditor/index.css */
+.rich-editor-wrapper {
+  position: relative;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  overflow: hidden;
+  transition: all 0.3s;
+  background: #fff;
+}
+
+.rich-editor-wrapper:hover {
+  border-color: #4096ff;
+}
+
+.rich-editor-wrapper:focus-within {
+  border-color: #4096ff;
+  box-shadow: 0 0 0 2px rgba(64, 150, 255, 0.2);
+}
+
+.rich-editor-wrapper .tox-tinymce {
+  border: none !important;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+.rich-editor-wrapper .tox-editor-header {
+  border-bottom: 1px solid #e8e8e8 !important;
+  background: #fafafa !important;
+}
+
+.rich-editor-wrapper .tox-toolbar__primary {
+  background: #fafafa !important;
+}
+
+.rich-editor-wrapper .tox-statusbar {
+  border-top: 1px solid #e8e8e8 !important;
+  background: #fafafa !important;
+}
+
+/* 自定义按钮样式 */
+.rich-editor-wrapper .tox-tbtn--enabled {
+  background: transparent !important;
+}
+
+.rich-editor-wrapper .tox-tbtn--enabled:hover {
+  background: #e6f7ff !important;
+  border-color: #91d5ff !important;
+}
+
+.rich-editor-wrapper .tox-tbtn--enabled:active {
+  background: #bae7ff !important;
+}
+
+/* 上传状态覆盖层 */
+.upload-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  backdrop-filter: blur(2px);
+}
+
+.upload-spinner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 20px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #1890ff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.upload-spinner span {
+  color: #666;
+  font-size: 14px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .rich-editor-wrapper .tox-toolbar__primary {
+    flex-wrap: wrap;
+  }
+
+  .rich-editor-wrapper .tox-toolbar__group {
+    margin: 2px;
+  }
+}
+
+/* 图片样式优化 */
+.rich-editor-wrapper .tox-edit-area img {
+  max-width: 100% !important;
+  height: auto !important;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  margin: 4px 0;
+  cursor: pointer;
+  transition: transform 0.2s;
+}
+
+.rich-editor-wrapper .tox-edit-area img:hover {
+  transform: scale(1.02);
+}
+
+/* 表格样式优化 */
+.rich-editor-wrapper .tox-edit-area table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 8px 0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.rich-editor-wrapper .tox-edit-area table td,
+.rich-editor-wrapper .tox-edit-area table th {
+  border: 1px solid #e8e8e8;
+  padding: 8px 12px;
+}
+
+.rich-editor-wrapper .tox-edit-area table th {
+  background-color: #fafafa;
+  font-weight: 600;
+}
--- a/src/components/Tinymce/index.tsx
+++ b/src/components/Tinymce/index.tsx
@@ -0,0 +1,262 @@
+import { Editor } from '@tinymce/tinymce-react';
+import { message } from 'antd';
+import React, { useCallback, useState } from 'react';
+import type { Editor as TinyMCEEditor } from 'tinymce';
+export interface RichEditorProps {
+  value?: string;
+  onChange?: (content: string) => void;
+  height?: number;
+  placeholder?: string;
+  disabled?: boolean;
+  uploadConfig?: {
+    action: string;
+    headers?: Record<string, string>;
+    maxSize?: number;
+    acceptTypes?: string[];
+    data?: Record<string, any>;
+  };
+  showWordCount?: boolean;
+  maxWords?: number;
+}
+const RichEditor: React.FC<RichEditorProps> = ({
+  // value = "",
+  // onChange,
+  // height = 400,
+  // placeholder = "请输入内容...",
+  disabled = false,
+  // showWordCount = true,
+  // maxWords,
+  uploadConfig = {
+    action: '/api/upload/image',
+    maxSize: 5,
+    acceptTypes: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
+  },
+}) => {
+  const [uploading, setUploading] = useState<boolean>(false);
+  const uploadFile = useCallback(
+    async (file: File): Promise<string> => {
+      return new Promise((resolve, reject) => {
+        const formData = new FormData();
+        formData.append('file', file);
+
+        if (uploadConfig.data) {
+          Object.keys(uploadConfig.data).forEach((key) => {
+            formData.append(key, uploadConfig.data?.[key]);
+          });
+        }
+
+        const xhr = new XMLHttpRequest();
+
+        xhr.upload.addEventListener('progress', (e) => {
+          if (e.lengthComputable) {
+            const percent = Math.round((e.loaded / e.total) * 100);
+            console.log(`上传进度: ${percent}%`);
+          }
+        });
+
+        xhr.addEventListener('load', () => {
+          if (xhr.status === 200) {
+            try {
+              const response = JSON.parse(xhr.responseText);
+              if (response.code === 200 && response.data?.url) {
+                resolve(response.data.url);
+              } else {
+                reject(response.message || '上传失败');
+              }
+            } catch (_error) {
+              reject('响应解析失败');
+            }
+          } else {
+            reject(`上传失败: ${xhr.status}`);
+          }
+        });
+
+        xhr.addEventListener('error', () => {
+          reject('网络错误');
+        });
+
+        if (uploadConfig.headers) {
+          Object.keys(uploadConfig.headers).forEach((key) => {
+            xhr.setRequestHeader(key, uploadConfig.headers![key]);
+          });
+        }
+
+        xhr.open('POST', uploadConfig.action);
+        xhr.send(formData);
+      });
+    },
+    [uploadConfig],
+  );
+  const handleImageUpload = useCallback(
+    (blobInfo: any, _: (percent: number) => void): Promise<string> => {
+      return new Promise((resolve, reject) => {
+        try {
+          setUploading(true);
+          const file = blobInfo.blob();
+          uploadFile(file).then((url) => {
+            resolve(url);
+          });
+
+          message.success('图片上传成功');
+        } catch (error) {
+          reject(error);
+          message.error(typeof error === 'string' ? error : '上传失败');
+        } finally {
+          setUploading(false);
+        }
+      });
+    },
+    [uploadFile],
+  );
+
+  const handleCustomUpload = useCallback(
+    (editor: TinyMCEEditor) => {
+      const input = document.createElement('input');
+      input.type = 'file';
+      input.accept = uploadConfig.acceptTypes?.join(',') || 'image/*';
+      input.multiple = true;
+
+      const handleFileChange = async (event: Event) => {
+        const target = event.target as HTMLInputElement;
+        const files = Array.from(target.files || []);
+
+        if (files.length === 0) return;
+
+        setUploading(true);
+
+        try {
+          for (const file of files) {
+            const isValidType = uploadConfig.acceptTypes?.includes(file.type);
+            if (!isValidType) {
+              message.error(`文件 ${file.name} 类型不支持`);
+              continue;
+            }
+
+            const isValidSize =
+              file.size / 1024 / 1024 < (uploadConfig.maxSize || 5);
+            if (!isValidSize) {
+              message.error(
+                `文件 ${file.name} 大小超过 ${uploadConfig.maxSize || 5}MB`,
+              );
+              continue;
+            }
+
+            try {
+              const url = await uploadFile(file);
+              const imgHtml = `<img src="${url}" alt="${file.name}" style="max-width: 100%; height: auto;" />`;
+              editor.insertContent(imgHtml);
+              message.success(`${file.name} 上传成功`);
+            } catch (error) {
+              message.error(`${file.name} 上传失败: ${error}`);
+            }
+          }
+        } finally {
+          setUploading(false);
+        }
+      };
+
+      input.addEventListener('change', handleFileChange);
+      input.click();
+    },
+    [uploadConfig, uploadFile],
+  );
+
+  return (
+    <Editor
+      apiKey="xt51qhzvj8q9mxzxytigtp0nu94v4rz7dska2dbqeilkxo99"
+      init={{
+        plugins: [
+          // Core editing features
+          'anchor',
+          'autolink',
+          'charmap',
+          'codesample',
+          'emoticons',
+          'link',
+          'lists',
+          'media',
+          'searchreplace',
+          'table',
+          'visualblocks',
+          'wordcount',
+          // Your account includes a free trial of TinyMCE premium features
+          // Try the most popular premium features until Oct 8, 2025:
+          'checklist',
+          'mediaembed',
+          'casechange',
+          'formatpainter',
+          'pageembed',
+          'a11ychecker',
+          'tinymcespellchecker',
+          'permanentpen',
+          'powerpaste',
+          'advtable',
+          'advcode',
+          'advtemplate',
+          'ai',
+          'uploadcare',
+          'mentions',
+          'tinycomments',
+          'tableofcontents',
+          'footnotes',
+          'mergetags',
+          'autocorrect',
+          'typography',
+          'inlinecss',
+          'markdown',
+          'importword',
+          'exportword',
+          'exportpdf',
+        ],
+        menubar: false,
+        toolbar:
+          'undo redo | blocks | bold italic forecolor | ' +
+          'alignleft aligncenter | ' +
+          'alignright alignjustify | bullist numlist outdent indent customupload | ' +
+          'removeformat ',
+        tinycomments_mode: 'embedded',
+        tinycomments_author: 'Author name',
+        toolbar_mode: 'sliding',
+        mergetags_list: [
+          { value: 'First.Name', title: 'First Name' },
+          { value: 'Email', title: 'Email' },
+        ],
+        ai_request: (
+          _: any,
+          respondWith: { string: (arg0: () => Promise<never>) => any },
+        ) =>
+          respondWith.string(() =>
+            Promise.reject('See docs to implement AI Assistant'),
+          ),
+        language: 'zh-CN',
+
+        // 其他配置
+
+        convert_urls: false,
+        remove_script_host: false,
+        uploadcare_public_key: '0ad3671d77f59c5756dd',
+
+        setup: (editor: TinyMCEEditor) => {
+          // 注册自定义上传按钮
+          editor.ui.registry.addButton('customupload', {
+            text: uploading ? '上传中...' : '上传',
+            icon: 'upload',
+            tooltip: '上传图片（支持多选）',
+            enabled: !disabled && !uploading,
+            onAction: () => {
+              handleCustomUpload(editor);
+            },
+          });
+        },
+        // 图片上传配置
+        images_upload_handler: handleImageUpload,
+        // 性能配置
+        browser_spellcheck: true,
+        contextmenu: 'link image table',
+      }}
+      initialValue="Welcome to TinyMCE!"
+    />
+  );
+};
+
+export default React.memo(RichEditor);
--- a/src/pages/prod/category/config.tsx
+++ b/src/pages/prod/category/config.tsx
@@ -4,6 +4,7 @@ import type {
 } from '@ant-design/pro-components';
 import dayjs from 'dayjs';
 import TagEditor from '@/components/TagEditor';
+import TinyMCEEditor from '@/components/Tinymce';
 export const baseTenantColumns: ProColumns<API.CategoryDO>[] = [
  {
    title: '类目名称',
@@ -86,7 +87,7 @@ export const formColumns = (data: {
    dataIndex: 'description',
    valueType: 'textarea',
    renderFormItem: () => {
-      return 1;
+      return <TinyMCEEditor />;
    },
  },
  {
--- a/src/pages/prod/category/index.tsx
+++ b/src/pages/prod/category/index.tsx
@@ -1,9 +1,5 @@
 import { PlusOutlined } from '@ant-design/icons';
-import {
-  type ActionType,
-  type ProColumns,
-  ProCoreActionType,
-} from '@ant-design/pro-components';
+import type { ActionType, ProColumns } from '@ant-design/pro-components';
 import type { TabsProps } from 'antd';
 import { Tabs } from 'antd';
 import { useCallback, useRef, useState } from 'react';
@@ -97,6 +93,7 @@ const ProdCategory = () => {
        <ConfigurableDrawerForm
          ref={configurableDrawerRef}
          title={formStatusType[type]}
+          // width="50vw"
          columns={formColumns({ grade: Number(grade), type })}
          onSubmit={handleSubmit}
        />