修复富文本相关问题

src/pages/JoinZZ/biddingDocument/edit.tsx

@@ -2,55 +2,34 @@ import React, { useEffect, useState, useRef } from 'react';
 import {
   ProForm,
   ProFormText,
-  ProFormUploadButton,
-  ProFormSelect,
   ProFormDatePicker,
   ProFormTextArea,
-  ProFormRadio
 } from '@ant-design/pro-components';
-import { Form, Modal, Drawer, message, Upload, Space, Button, Switch,Input,Tooltip } from 'antd';
-import {InfoCircleOutlined} from '@ant-design/icons';
-
-import { useIntl, FormattedMessage } from '@umijs/max';
-import { DictValueEnumObj } from '@/components/DictTag';
-import Editor from '@/components/ueditor';
+import { Form, Drawer, Space, Button } from 'antd';
+import ReactQuill from 'react-quill';
+import 'react-quill/dist/quill.snow.css';
+import { useIntl } from '@umijs/max';
 import { upload } from '@/services/JoinZZ/biddingDocument';
-import { getDataEnumList } from '@/services/system/Enum';
-import Quill from "quill";
-import "quill/dist/quill.snow.css";
+// import Quill from "quill";
+// import "quill/dist/quill.snow.css";
 import moment from 'moment';
-import { trim } from 'lodash';
-let editor: any;
 
 export type BiddingDocumentProps = {
   onCancel: (flag?: boolean, formVals?: any) => void;
   onSubmit: (values: any) => Promise<void>;
   open: boolean;
   currentRow: any;
-  date: any;
-  title: string;
-  content: string;
-  surface: string;
-  surfaceUrl: string;
-};
-
+}
 let toolbarOptions = [
   ['bold', 'italic', 'underline', 'strike'],        // 切换按钮
   ['blockquote', 'code-block'],
   ['link', 'image'],
-
-
-  [{ 'header': 1 }, { 'header': 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': [] }],
@@ -59,45 +38,51 @@ let toolbarOptions = [
   ['clean'],                                         // 清除格式
 
 ];
+const modules = {
+  toolbar: {
+    container: toolbarOptions, // 使用自定义工具栏选项
+  },
+};
 
-function image(){
-  var _this3 = this;
-
-  var fileInput = this.container.querySelector('input.ql-image[type=file]');
-  fileInput = null
-  if (fileInput == null) {
-    fileInput = document.createElement('input');
-    fileInput.setAttribute('type', 'file');
-    fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
-    fileInput.classList.add('ql-image');
-    fileInput.addEventListener('change', async function () {
-      if (fileInput.files != null && fileInput.files[0] != null) {
-        let index = editor.getSelection() && editor.getSelection().index ? editor.getSelection().index : 0;
-
-        let file = fileInput.files[0]
-        const formData = new FormData();
-        formData.append('file', file, file.name);
-        const res = await upload(formData)
-        editor.insertEmbed(index, 'image', res.data.url);
-        var reader = new FileReader();
-        reader.onload = function (e) {
-          fileInput.value = "";
-        };
-
-      }
-    });
-    this.container.appendChild(fileInput);
-  }
-  fileInput.click();
-}
+// function image(){
+//   var _this3 = this;
+
+//   var fileInput = this.container.querySelector('input.ql-image[type=file]');
+//   fileInput = null
+//   if (fileInput == null) {
+//     fileInput = document.createElement('input');
+//     fileInput.setAttribute('type', 'file');
+//     fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
+//     fileInput.classList.add('ql-image');
+//     fileInput.addEventListener('change', async function () {
+//       if (fileInput.files != null && fileInput.files[0] != null) {
+//         let index = editor.getSelection() && editor.getSelection().index ? editor.getSelection().index : 0;
+
+//         let file = fileInput.files[0]
+//         const formData = new FormData();
+//         formData.append('file', file, file.name);
+//         const res = await upload(formData)
+//         editor.insertEmbed(index, 'image', res.data.url);
+//         var reader = new FileReader();
+//         reader.onload = function (e) {
+//           fileInput.value = "";
+//         };
+
+//       }
+//     });
+//     this.container.appendChild(fileInput);
+//   }
+//   fileInput.click();
+// }
 const BiddingDocumentForm: React.FC<BiddingDocumentProps> = (props) => {
 
   const [form] = Form.useForm();
   const intl = useIntl();
   let editorRef = useRef<HTMLDivElement>(null)
-
+  const [editWho, setEditWho] = useState('')
+  const [userIndex, setUserIndex] = useState(0)
+  const [editorHtml, setEditorHtml] = useState('');
   useEffect(() => {
-    console.log(props)
     form.resetFields();
     if(!props.open) return;
     // const { title, content, surface, surfaceUrl, date } = props;
@@ -129,73 +114,31 @@ const BiddingDocumentForm: React.FC<BiddingDocumentProps> = (props) => {
         }
       ])
     }
-    if (editorRef && editorRef.current && editorRef.current.children[0]) {
-      editorRef.current.children[0].innerHTML = content
-    }
-
+    setEditorHtml(content || '')
   }, [props.open]);
-
+  const base64ToFile = (base64, fileName = `${Math.random()}`) => {
+    let arr = base64.split(',')
+    console.log(arr[0])
+    let mime = arr[0].match(/:(.*?);/)[1]
+    let bstr = atob(arr[1])
+    let n = bstr.length
+    let u8arr = new Uint8Array(n)
+    while (n--) {
+      u8arr[n] = bstr.charCodeAt(n)
+    }
+    return new File([u8arr], `${fileName}.${mime.split('/')[1]}`, {
+      type: mime,
+    })
+  }
   useEffect(() => {
-    if (!props.open) return;
-    var Parchment = Quill.import('parchment');
-
-    let config = {
-      scope: Parchment.Scope.INLINE,
-      // 会有下拉框列表
-      whitelist: ['20px', '22px', '24px', '26px', '28px', '30px', '32px', '34px', '36px', '38px', '40px', '42px', '44px']
-      //可设置成没有下拉框的，但会导致无法清除样式
-      // whitelist: ['1px solid #000000']  
-    };
-
-    let wordBox = new Parchment.Attributor.Style('wordBox', 'line-height', config);
-
-    Quill.register(wordBox, true);
-    editor = new Quill('#editor', {
-      modules: {
-        toolbar: toolbarOptions,
-        clipboard: {
-          dangerouslyPasteHTML: true
-        }
-      },
-      theme: 'snow'
-    });
-
-    // 工具栏附件按钮
-    let a = document.querySelectorAll(".ql-wordBox")[0]
-    let b = document.querySelectorAll(".ql-wordBox")[1]
-    //添加默认显示内容
-    let stit = document.createElement('span')
-    stit.innerHTML = intl.formatMessage({ id: 'public.lineSpacing' });
-    stit.setAttribute('style', 'margin-right:20px;line-height: 24px;')
-    a.children[0].insertBefore(stit, a.children[0].children[0])
-
-    // 遍历下拉框列表添加值
-    let i = a.children[1].children.length
-    while (i) {
-      i--;
-      let item = a.children[1].children[i]
-      item.innerHTML = item.dataset.value ? item.dataset.value : '无'
+    if(editorRef?.current){
+      const quill = editorRef.current.getEditor()
+      if (editWho === 'api' && userIndex !== 0) {
+        quill.setSelection(userIndex + 2)
+      }
     }
-
-    // console.log('editor', editor)
-    var toolbar = editor.getModule('toolbar');
-
-    toolbar.image2 = image
-    // console.log("toolbar.handlers.image", toolbar.handlers.image)
-    toolbar.addHandler('image', (e) => {
-      toolbar.image2()
-      // 
-
-    });
-
-    // toolbar.addHandler('wordBox', (e) => {
-    //   console.log('e-----++++', e)
-    //   // 
-
-    // });
-
-  }, [props.open]);
-
+  }, [editorHtml,userIndex])
+ 
 
   const [fileList, setFileList] = useState<any>([]);
   const [surface, setSurface] = useState<any>('');
@@ -204,13 +147,13 @@ const BiddingDocumentForm: React.FC<BiddingDocumentProps> = (props) => {
   const handleOk = async () => {
     let data = form.getFieldsValue()
     let val = await form.validateFields()
-    
-    let htmlStr = editorRef.current?.children[0].innerHTML
+    const htmlStr = editorHtml.replaceAll('"', "'")
+    // let htmlStr = editorRef.current?.children[0].innerHTML
 
-    htmlStr = htmlStr?.replaceAll('"', "'")
-    let content = editor.getContents()
+    // htmlStr = htmlStr?.replaceAll('"', "'")
+    // let content = editor.getContents()
     // console.log('htmlStr----', htmlStr)
-    editor.setContents(content)
+    // editor.setContents(content)
     data.date = moment(data.date).format('YYYY-MM-DD');
     if(checkTop){
       data.top = 1;
@@ -229,8 +172,9 @@ const BiddingDocumentForm: React.FC<BiddingDocumentProps> = (props) => {
     })
     setFileList([]);
     setCheckTop(false)
-    editor.clipboard.dangerouslyPasteHTML(0, '')
-    editor.setContents([])
+    // editor.clipboard.dangerouslyPasteHTML(0, '')
+    // editor.setContents([])
+    setEditorHtml('');
     props.onSubmit(formData);
   };
   const handleCancel = () => {
@@ -241,27 +185,49 @@ const BiddingDocumentForm: React.FC<BiddingDocumentProps> = (props) => {
     })
     setFileList([]);
     setCheckTop(false)
-    editor.clipboard.dangerouslyPasteHTML(0, '')
-    editor.setContents([])
+    // editor.clipboard.dangerouslyPasteHTML(0, '')
+    // editor.setContents([])
+    setEditorHtml('');
     props.onCancel();
 
   };
 
-  const handleChange = async (res) => {
-    const { fileList } = res;
-    setFileList(fileList);
-  };
-
-  const handleBeforeUpload = async (file: RcFile) => {
-    const formData = new FormData();
-    formData.append('file', file, file.name);
-    const res = await upload(formData);
-    if (res?.data?.uuid) {
-      setSurface(res.data.uuid)
+  const handleChangeQuill = (content, delta, source, editor) => {
+    let quill = editorRef.current.getEditor()
+    quill.focus()
+    let delta_ops = delta.ops
+    let quilContent = editor.getContents()
+    setEditorHtml(content)
+    const range = quill.getSelection()
+    if (range) {
+      if (range.length == 0 && range.index !== 0) {
+        console.log('User cursor is at index', range.index)
+        setUserIndex(range.index)
+      } else {
+        const text = quill.getText(range.index, range.length)
+        console.log('User has highlighted: ', text)
+      }
+    } else {
+      console.log('User cursor is not in editor')
     }
-    return false;
-  };
-
+    setEditWho(source)
+    if (delta_ops && delta_ops.length > 0) {
+      quilContent.ops.map((item) => {
+        if (item.insert) {
+          let imgStr = item.insert.image
+          if (imgStr && imgStr?.includes('data:image/')) {
+            let file = base64ToFile(imgStr)
+            let formData = new FormData()
+            formData.append('file', file)
+            upload(formData).then((res) => {
+              item.insert.image = res.data.url
+              quill.setContents(quilContent)
+            })
+          }
+        }
+      })
+    }
+  }
 
   return (
     <Drawer
@@ -347,7 +313,8 @@ const BiddingDocumentForm: React.FC<BiddingDocumentProps> = (props) => {
           style: { width: 95 }
         }}
         >
-          <div id='editor' style={{ width: '70vw', height: '500px' }} ref={editorRef}></div>
+          {/* <div id='editor' style={{ width: '70vw', height: '500px' }} ref={editorRef}></div> */}
+          <ReactQuill ref={editorRef} placeholder='请输入...' theme='snow' className="ql-editor" modules={modules} value={editorHtml} onChange={handleChangeQuill} />
         </ProForm.Item>
       </ProForm>
     </Drawer>

src/pages/JoinZZ/vacancy/edit.tsx

@@ -1,36 +1,24 @@
 import React, { useEffect, useState, useRef } from 'react';
 import {
   ProForm,
-  ProFormText,
-  ProFormUploadButton,
   ProFormSelect,
-  ProFormDatePicker,
-  ProFormRadio
 } from '@ant-design/pro-components';
-import { Form, Modal, Drawer, message, Upload, Space, Button, Switch,Input,Tooltip } from 'antd';
-import {InfoCircleOutlined} from '@ant-design/icons';
+import { Form, Drawer, Space, Button } from 'antd';
 
-import { useIntl, FormattedMessage } from '@umijs/max';
-import { DictValueEnumObj } from '@/components/DictTag';
-import Editor from '@/components/ueditor';
+import { useIntl } from '@umijs/max';
 import { upload } from '@/services/JoinZZ/vacancy';
 import { getDataEnumList } from '@/services/system/Enum';
-import Quill from "quill";
-import "quill/dist/quill.snow.css";
+// import Quill from "quill";
+// import "quill/dist/quill.snow.css";
+import ReactQuill from 'react-quill';
+import 'react-quill/dist/quill.snow.css';
 import moment from 'moment';
-import { trim } from 'lodash';
-let editor: any;
 
 export type VacancyProps = {
   onCancel: (flag?: boolean, formVals?: any) => void;
   onSubmit: (values: any) => Promise<void>;
   open: boolean;
   currentRow: any;
-  date: any;
-  title: string;
-  content: string;
-  surface: string;
-  surfaceUrl: string;
 };
 
 let toolbarOptions = [
@@ -58,45 +46,21 @@ let toolbarOptions = [
   ['clean'],                                         // 清除格式
 
 ];
+const modules = {
+  toolbar: {
+    container: toolbarOptions, // 使用自定义工具栏选项
+  },
+};
 
-function image(){
-  var _this3 = this;
-
-  var fileInput = this.container.querySelector('input.ql-image[type=file]');
-  fileInput = null
-  if (fileInput == null) {
-    fileInput = document.createElement('input');
-    fileInput.setAttribute('type', 'file');
-    fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
-    fileInput.classList.add('ql-image');
-    fileInput.addEventListener('change', async function () {
-      if (fileInput.files != null && fileInput.files[0] != null) {
-        let index = editor.getSelection() && editor.getSelection().index ? editor.getSelection().index : 0;
-
-        let file = fileInput.files[0]
-        const formData = new FormData();
-        formData.append('file', file, file.name);
-        const res = await upload(formData)
-        editor.insertEmbed(index, 'image', res.data.url);
-        var reader = new FileReader();
-        reader.onload = function (e) {
-          fileInput.value = "";
-        };
-
-      }
-    });
-    this.container.appendChild(fileInput);
-  }
-  fileInput.click();
-}
 const VacancyForm: React.FC<VacancyProps> = (props) => {
 
   const [form] = Form.useForm();
   const intl = useIntl();
   let editorRef = useRef<HTMLDivElement>(null)
-
+  const [editWho, setEditWho] = useState('')
+  const [userIndex, setUserIndex] = useState(0)
+  const [editorHtml, setEditorHtml] = useState('');
   useEffect(() => {
-    console.log(props)
     form.resetFields();
     if(!props.open) return;
     // const { title, content, surface, surfaceUrl, date } = props;
@@ -128,74 +92,31 @@ const VacancyForm: React.FC<VacancyProps> = (props) => {
         }
       ])
     }
-    if (editorRef && editorRef.current && editorRef.current.children[0]) {
-      editorRef.current.children[0].innerHTML = content
-    }
 
+    setEditorHtml(content || '')
   }, [props.open]);
-
+  const base64ToFile = (base64, fileName = `${Math.random()}`) => {
+    let arr = base64.split(',')
+    console.log(arr[0])
+    let mime = arr[0].match(/:(.*?);/)[1]
+    let bstr = atob(arr[1])
+    let n = bstr.length
+    let u8arr = new Uint8Array(n)
+    while (n--) {
+      u8arr[n] = bstr.charCodeAt(n)
+    }
+    return new File([u8arr], `${fileName}.${mime.split('/')[1]}`, {
+      type: mime,
+    })
+  }
   useEffect(() => {
-    if (!props.open) return;
-    var Parchment = Quill.import('parchment');
-
-    let config = {
-      scope: Parchment.Scope.INLINE,
-      // 会有下拉框列表
-      whitelist: ['20px', '22px', '24px', '26px', '28px', '30px', '32px', '34px', '36px', '38px', '40px', '42px', '44px']
-      //可设置成没有下拉框的，但会导致无法清除样式
-      // whitelist: ['1px solid #000000']  
-    };
-
-    let wordBox = new Parchment.Attributor.Style('wordBox', 'line-height', config);
-
-    Quill.register(wordBox, true);
-    editor = new Quill('#editor', {
-      modules: {
-        toolbar: toolbarOptions,
-        clipboard: {
-          dangerouslyPasteHTML: true
-        }
-      },
-      theme: 'snow'
-    });
-
-    // 工具栏附件按钮
-    let a = document.querySelectorAll(".ql-wordBox")[0]
-    let b = document.querySelectorAll(".ql-wordBox")[1]
-    //添加默认显示内容
-    let stit = document.createElement('span')
-    stit.innerHTML = intl.formatMessage({ id: 'public.lineSpacing' });
-    stit.setAttribute('style', 'margin-right:20px;line-height: 24px;')
-    a.children[0].insertBefore(stit, a.children[0].children[0])
-
-    // 遍历下拉框列表添加值
-    let i = a.children[1].children.length
-    while (i) {
-      i--;
-      let item = a.children[1].children[i]
-      item.innerHTML = item.dataset.value ? item.dataset.value : '无'
+    if(editorRef?.current){
+      const quill = editorRef.current.getEditor()
+      if (editWho === 'api' && userIndex !== 0) {
+        quill.setSelection(userIndex + 2)
+      }
     }
-
-    // console.log('editor', editor)
-    var toolbar = editor.getModule('toolbar');
-
-    toolbar.image2 = image
-    // console.log("toolbar.handlers.image", toolbar.handlers.image)
-    toolbar.addHandler('image', (e) => {
-      toolbar.image2()
-      // 
-
-    });
-
-    // toolbar.addHandler('wordBox', (e) => {
-    //   console.log('e-----++++', e)
-    //   // 
-
-    // });
-
-  }, [props.open]);
-
-
+  }, [editorHtml,userIndex])
   const [fileList, setFileList] = useState<any>([]);
   const [surface, setSurface] = useState<any>('');
 
@@ -204,12 +125,11 @@ const VacancyForm: React.FC<VacancyProps> = (props) => {
     let data = form.getFieldsValue()
     let val = await form.validateFields()
     
-    let htmlStr = editorRef.current?.children[0].innerHTML
+    const htmlStr = editorHtml.replaceAll('"', "'")
 
-    htmlStr = htmlStr?.replaceAll('"', "'")
-    let content = editor.getContents()
+    // let content = editor.getContents()
     // console.log('htmlStr----', htmlStr)
-    editor.setContents(content)
+    // editor.setContents(content)
     data.date = moment(data.date).format('YYYY-MM-DD');
     if(checkTop){
       data.top = 1;
@@ -227,9 +147,8 @@ const VacancyForm: React.FC<VacancyProps> = (props) => {
       digest: ""
     })
     setFileList([]);
+    setEditorHtml('');
     setCheckTop(false)
-    editor.clipboard.dangerouslyPasteHTML(0, '')
-    editor.setContents([])
     props.onSubmit(formData);
   };
   const handleCancel = () => {
@@ -240,8 +159,7 @@ const VacancyForm: React.FC<VacancyProps> = (props) => {
     })
     setFileList([]);
     setCheckTop(false)
-    editor.clipboard.dangerouslyPasteHTML(0, '')
-    editor.setContents([])
+    setEditorHtml('');
     props.onCancel();
 
   };
@@ -261,6 +179,43 @@ const VacancyForm: React.FC<VacancyProps> = (props) => {
     return false;
   };
 
+  const handleChangeQuill = (content, delta, source, editor) => {
+    let quill = editorRef.current.getEditor()
+    quill.focus()
+    let delta_ops = delta.ops
+    let quilContent = editor.getContents()
+    setEditorHtml(content)
+    const range = quill.getSelection()
+    if (range) {
+      if (range.length == 0 && range.index !== 0) {
+        console.log('User cursor is at index', range.index)
+        setUserIndex(range.index)
+      } else {
+        const text = quill.getText(range.index, range.length)
+        console.log('User has highlighted: ', text)
+      }
+    } else {
+      console.log('User cursor is not in editor')
+    }
+    setEditWho(source)
+    if (delta_ops && delta_ops.length > 0) {
+      quilContent.ops.map((item) => {
+        if (item.insert) {
+          let imgStr = item.insert.image
+          if (imgStr && imgStr?.includes('data:image/')) {
+            let file = base64ToFile(imgStr)
+            let formData = new FormData()
+            formData.append('file', file)
+            upload(formData).then((res) => {
+              item.insert.image = res.data.url
+              quill.setContents(quilContent)
+            })
+          }
+        }
+      })
+    }
+  }
+
 
   return (
     <Drawer
@@ -313,7 +268,8 @@ const VacancyForm: React.FC<VacancyProps> = (props) => {
           style: { width: 95 }
         }}
         >
-          <div id='editor' style={{ width: '70vw', height: '500px' }} ref={editorRef}></div>
+          {/* <div id='editor' style={{ width: '70vw', height: '500px' }} ref={editorRef}></div> */}
+          <ReactQuill ref={editorRef} placeholder='请输入...' theme='snow' className="ql-editor" modules={modules} value={editorHtml} onChange={handleChangeQuill} />
         </ProForm.Item>
       </ProForm>
     </Drawer>

src/pages/News/NewsList/edit copy.tsx

@@ -0,0 +1,240 @@
+import React, { useEffect, useState, useRef } from 'react';
+import {
+  ProForm,
+  ProFormText,
+  ProFormTextArea,
+  ProFormSelect,
+  ProFormDatePicker,
+  ProFormSwitch,
+  ProFormDateTimePicker
+} from '@ant-design/pro-components';
+import { Form, Drawer, Upload, Space, Button } from 'antd';
+import { useIntl } from '@umijs/max';
+import { upload } from '@/services/news/news';
+import { getDataEnumList } from '@/services/system/Enum';
+import Quill from "quill";
+import "quill/dist/quill.snow.css";
+import moment from 'moment';
+export type NewsProps = {
+  onCancel: (flag?: boolean, formVals?: any) => void;
+  onSubmit: (values: any) => Promise<void>;
+  open: boolean;
+  currentRow: any;
+};
+let toolbarOptions = [
+  ['bold', 'italic', 'underline', 'strike'],
+  ['blockquote', 'code-block'],
+  ['link', 'image'],
+  [{ 'header': 1 }, { 'header': 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': [] }],
+  [{ wordBox: ['20px', '22px', '24px', '26px', '28px', '30px', '32px', '34px', '36px', '38px', '40px', '42px', '44px'] }],
+  ['clean'],
+];
+const NewsForm: React.FC<NewsProps> = (props) => {
+  const [form] = Form.useForm();
+  const intl = useIntl();
+  const editorRef = useRef<Quill | null>(null); // 使用 useRef 来存储 Quill 实例
+  const [fileList, setFileList] = useState<any>([]);
+  const [surface, setSurface] = useState<any>('');
+  
+  useEffect(() => {
+    form.resetFields();
+    if (!props.open) return;
+    if (!props.currentRow) return;
+    const { digest, top, key, content, surface, surfaceUrl, date, title, source, column, newsTop, createTime } = props.currentRow;
+    
+    form.setFieldsValue({
+      digest,
+      top,
+      key,
+      column,
+      source,
+      createTime,
+      newsTop: newsTop ? true : false,
+      title: title,
+      date: date,
+    });
+    setSurface(surface);
+    if (surfaceUrl && surface) {
+      setFileList([{ uid: surface, thumbUrl: surfaceUrl }]);
+    }
+    if (editorRef.current) {
+      editorRef.current.root.innerHTML = content; // 使用 editorRef 来设置内容
+    }
+  }, [props.open,props.currentRow]);
+  useEffect(() => {
+    const Parchment = Quill.import('parchment');
+    const config = {
+      scope: Parchment.Scope.INLINE,
+      whitelist: ['20px', '22px', '24px', '26px', '28px', '30px', '32px', '34px', '36px', '38px', '40px', '42px', '44px']
+    };
+    const wordBox = new Parchment.Attributor.Style('wordBox', 'line-height', config);
+    Quill.register(wordBox, true);
+    editorRef.current = new Quill('#editor', {
+      modules: {
+        toolbar: toolbarOptions,
+        clipboard: {
+          dangerouslyPasteHTML: true
+        }
+      },
+      theme: 'snow'
+    });
+    try {
+        const toolbar = editorRef.current.getModule('toolbar');
+        toolbar.image2 = image;
+        toolbar.addHandler('image', () => {
+          toolbar.image2();
+        });
+    } catch (error) {
+        console.log(error)
+    }
+  }, []);
+  const handleOk = async () => {
+    const data = form.getFieldsValue();
+    await form.validateFields();
+    const htmlStr = editorRef.current?.root.innerHTML.replaceAll('"', "'");
+    data.date = moment(data.date).format('YYYY-MM-DD');
+    data.createTime = moment(data.createTime).format('YYYY-MM-DD HH:mm:ss');
+    data.newsTop = data.newsTop ? 1 : 0;
+    const formData = {
+      ...data,
+      surface,
+      content: htmlStr
+    };
+    form.resetFields();
+    setFileList([]);
+    editorRef.current?.clipboard.dangerouslyPasteHTML(0, '');
+    editorRef.current?.setContents([]);
+    props.onSubmit(formData);
+  };
+  const handleCancel = () => {
+    form.resetFields();
+    setFileList([]);
+    editorRef.current?.clipboard.dangerouslyPasteHTML(0, '');
+    editorRef.current?.setContents([]);
+    props.onCancel();
+  };
+  const handleChange = (res) => {
+    const { fileList } = res;
+    setFileList(fileList);
+  };
+  const handleBeforeUpload = async (file: RcFile) => {
+    const formData = new FormData();
+    formData.append('file', file, file.name);
+    const res = await upload(formData);
+    if (res?.data?.uuid) {
+      setSurface(res.data.uuid);
+    }
+    return false;
+  };
+  return (
+    <Drawer
+      width={'80%'}
+      title={props.currentRow ? '新闻编辑' : '新建新闻'}
+      forceRender
+      open={props.open}
+      destroyOnClose
+      onClose={handleCancel}
+      extra={
+        <Space>
+          <Button onClick={handleCancel}>取消</Button>
+          <Button type="primary" onClick={handleOk}>确认</Button>
+        </Space>
+      }
+    >
+      <ProForm
+        form={form}
+        grid={true}
+        submitter={false}
+        layout="horizontal"
+      >
+        <ProFormText
+          name="title"
+          label='标题'
+          labelCol={{ style: { width: 95 } }}
+          placeholder='请输入标题'
+          rules={[{ required: true, message: '请输入标题!' }]}
+        />
+        <ProForm.Item
+          label={'封面图'}
+          extra={'图片尺寸1218*915'}
+          labelCol={{ style: { width: 95 } }}
+          rules={[{ required: true }]}
+        >
+          <Upload
+            listType="picture-card"
+            fileList={fileList}
+            maxCount={1}
+            onChange={handleChange}
+            beforeUpload={handleBeforeUpload}
+          >
+            {fileList.length < 1 && '+' + intl.formatMessage({ id: 'public.uploadImg' })}
+          </Upload>
+        </ProForm.Item>
+        <ProFormSwitch labelCol={{ style: { width: 95 } }} name="newsTop" label="置顶" />
+        <ProFormDatePicker
+          name="date"
+          label='日期'
+          fieldProps={{ format: (value) => value.format('YYYY-MM-DD') }}
+          labelCol={{ style: { width: 95 } }}
+          rules={[{ required: true }]}
+        />
+        <ProFormDateTimePicker
+          name="createTime"
+          label='发稿时间'
+          fieldProps={{ format: (value) => value.format('YYYY-MM-DD HH:mm:ss') }}
+          labelCol={{ style: { width: 95 } }}
+          rules={[{ required: true }]}
+        />
+        <ProFormSelect
+          name="column"
+          label='新闻分类'
+          request={() =>
+            getDataEnumList({ enumUuid: '2024810214616101' }).then((res) => {
+              return res.rows.map(item => ({
+                label: item.dataName,
+                value: item.uuid,
+              }));
+            })
+          }
+          labelCol={{ style: { width: 95 } }}
+          placeholder={'请选择新闻分类'}
+        />
+        <ProFormTextArea
+          name="digest"
+          label='摘要'
+          labelCol={{ style: { width: 95 } }}
+          placeholder={'请输入摘要'}
+        />
+        <ProFormText
+          name="key"
+          label='网页关键字'
+          labelCol={{ style: { width: 95 } }}
+          placeholder={'请输入页面关键字'}
+        />
+        <ProFormText
+          name="source"
+          label='来源'
+          labelCol={{ style: { width: 95 } }}
+          placeholder={'中泽集团'}
+          initialValue={'中泽集团'}
+        />
+        <ProForm.Item 
+          label={'新闻内容'} 
+          labelCol={{ style: { width: 95 } }}
+        >
+          <div id='editor' style={{ width: '70vw', height: '500px' }}></div> {/* 移除 ref，因为我们使用了 useRef */}
+        </ProForm.Item>
+      </ProForm>
+    </Drawer>
+  );
+};
+export default NewsForm;

src/pages/News/NewsList/edit.tsx

@@ -3,271 +3,175 @@ import {
   ProForm,
   ProFormText,
   ProFormTextArea,
-  ProFormUploadButton,
   ProFormSelect,
   ProFormDatePicker,
-  ProFormRadio,
   ProFormSwitch,
   ProFormDateTimePicker
 } from '@ant-design/pro-components';
-import { Form, Modal, Drawer, message, Upload, Space, Button, Switch,Input,Tooltip } from 'antd';
-import {InfoCircleOutlined} from '@ant-design/icons';
-
-import { useIntl, FormattedMessage } from '@umijs/max';
-import { DictValueEnumObj } from '@/components/DictTag';
-import Editor from '@/components/ueditor';
+import { Form, Drawer, Upload, Space, Button } from 'antd';
+import { useIntl } from '@umijs/max';
+import ReactQuill from 'react-quill';
+import 'react-quill/dist/quill.snow.css';
 import { upload } from '@/services/news/news';
 import { getDataEnumList } from '@/services/system/Enum';
-import Quill from "quill";
-import "quill/dist/quill.snow.css";
-import moment from 'moment';
-import { trim } from 'lodash';
-let editor: any;
 
+import moment from 'moment';
 export type NewsProps = {
   onCancel: (flag?: boolean, formVals?: any) => void;
   onSubmit: (values: any) => Promise<void>;
   open: boolean;
   currentRow: any;
-  date: any;
-  title: string;
-  content: string;
-  surface: string;
-  surfaceUrl: string;
 };
-
 let toolbarOptions = [
-  ['bold', 'italic', 'underline', 'strike'],        // 切换按钮
+  ['bold', 'italic', 'underline', 'strike'],
   ['blockquote', 'code-block'],
   ['link', 'image'],
-
-
-  [{ 'header': 1 }, { 'header': 2 }],               // 用户自定义按钮值
   [{ 'list': 'ordered' }, { 'list': 'bullet' }],
-  [{ 'script': 'sub' }, { 'script': 'super' }],      // 上标/下标
-  [{ 'indent': '-1' }, { 'indent': '+1' }],          // 减少缩进/缩进
-  [{ 'direction': 'rtl' }],                         // 文本下划线
-
-
-  [{ 'size': ['small', false, 'large', 'huge'] }],  // 用户自定义下拉
+  [{ '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': [] }],          // 主题默认下拉，使用主题提供的值
+  [{ 'color': [] }, { 'background': [] }],
   [{ 'font': [] }],
   [{ 'align': [] }],
-  // [{ 'wordBox': ['20px', '22px', '24px', '26px', '28px', '28px', '30px'] }],
   [{ wordBox: ['20px', '22px', '24px', '26px', '28px', '30px', '32px', '34px', '36px', '38px', '40px', '42px', '44px'] }],
-  ['clean'],                                         // 清除格式
-
+  ['clean'],
 ];
-
-function image(){
-  var _this3 = this;
-
-  var fileInput = this.container.querySelector('input.ql-image[type=file]');
-  fileInput = null
-  if (fileInput == null) {
-    fileInput = document.createElement('input');
-    fileInput.setAttribute('type', 'file');
-    fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
-    fileInput.classList.add('ql-image');
-    fileInput.addEventListener('change', async function () {
-      if (fileInput.files != null && fileInput.files[0] != null) {
-        let index = editor.getSelection() && editor.getSelection().index ? editor.getSelection().index : 0;
-
-        let file = fileInput.files[0]
-        const formData = new FormData();
-        formData.append('file', file, file.name);
-        const res = await upload(formData)
-        editor.insertEmbed(index, 'image', res.data.url);
-        var reader = new FileReader();
-        reader.onload = function (e) {
-          fileInput.value = "";
-        };
-
-      }
-    });
-    this.container.appendChild(fileInput);
-  }
-  fileInput.click();
-}
+const modules = {
+  toolbar: {
+    container: toolbarOptions, // 使用自定义工具栏选项
+  },
+};
 const NewsForm: React.FC<NewsProps> = (props) => {
-
   const [form] = Form.useForm();
   const intl = useIntl();
   let editorRef = useRef<HTMLDivElement>(null)
-
+  const [fileList, setFileList] = useState<any>([]);
+  const [surface, setSurface] = useState<any>('');
+  const [editWho, setEditWho] = useState('')
+  const [userIndex, setUserIndex] = useState(0)
+  const [editorHtml, setEditorHtml] = useState('');
+;
   useEffect(() => {
     form.resetFields();
-    if(!props.open) return;
-    // const { title, content, surface, surfaceUrl, date } = props;
-    if(!props.currentRow) return;
-    const { digest, top,key,content,surface,surfaceUrl,date,title,source,column,newsTop,createTime} = props.currentRow;
-    if (props.currentRow) {
-      form.setFieldsValue({
-        digest,
-        top,
-        key,
-        column,
-        source,
-        createTime,
-        newsTop:newsTop?true:false,
-      })
-      // if (top) {
-      //   setCheckTop(1)
-      // } else {
-      //   setCheckTop(0)
-      // }
-    }
-
-    setSurface(surface)
+    if (!props.open) return;
+    if (!props.currentRow) return;
+    const { digest, top, key, content, surface, surfaceUrl, date, title, source, column, newsTop, createTime } = props.currentRow;
+    
     form.setFieldsValue({
+      digest,
+      top,
+      key,
+      column,
+      source,
+      createTime,
+      newsTop: newsTop ? true : false,
       title: title,
       date: date,
-    })
-    if (surfaceUrl && surface) {
-      setFileList([
-        {
-          uid: surface,
-          thumbUrl: surfaceUrl
-        }
-      ])
-    }
-    if (editorRef && editorRef.current && editorRef.current.children[0]) {
-      editorRef.current.children[0].innerHTML = content
-    }
-
-  }, [props.open]);
-
-  useEffect(() => {
-    var Parchment = Quill.import('parchment');
-
-    let config = {
-      scope: Parchment.Scope.INLINE,
-      // 会有下拉框列表
-      whitelist: ['20px', '22px', '24px', '26px', '28px', '30px', '32px', '34px', '36px', '38px', '40px', '42px', '44px']
-      //可设置成没有下拉框的，但会导致无法清除样式
-      // whitelist: ['1px solid #000000']  
-    };
-
-    let wordBox = new Parchment.Attributor.Style('wordBox', 'line-height', config);
-
-    Quill.register(wordBox, true);
-    editor = new Quill('#editor', {
-      modules: {
-        toolbar: toolbarOptions,
-        clipboard: {
-          dangerouslyPasteHTML: true
-        }
-      },
-      theme: 'snow'
     });
-    console.log('editor',editor)
-    // 工具栏附件按钮
-    let a = document.querySelectorAll(".ql-wordBox")[0]
-    let b = document.querySelectorAll(".ql-wordBox")[1]
-    //添加默认显示内容
-    let stit = document.createElement('span')
-    stit.innerHTML = intl.formatMessage({ id: 'public.lineSpacing' });
-    stit.setAttribute('style', 'margin-right:20px;line-height: 24px;')
-    a.children[0].insertBefore(stit, a.children[0].children[0])
-
-    // 遍历下拉框列表添加值
-    let i = a.children[1].children.length
-    while (i) {
-      i--;
-      let item = a.children[1].children[i]
-      item.innerHTML = item.dataset.value ? item.dataset.value : '无'
+    setSurface(surface);
+    if (surfaceUrl && surface) {
+      setFileList([{ uid: surface, thumbUrl: surfaceUrl }]);
     }
+    setEditorHtml(content || '')
+  }, [props.open,props.currentRow]);
 
-    // console.log('editor', editor)
-    var toolbar = editor.getModule('toolbar');
-
-    toolbar.image2 = image
-    // console.log("toolbar.handlers.image", toolbar.handlers.image)
-    toolbar.addHandler('image', (e) => {
-      toolbar.image2()
-      // 
-
-    });
-
-    // toolbar.addHandler('wordBox', (e) => {
-    //   console.log('e-----++++', e)
-    //   // 
-
-    // });
-
-  }, []);
-
-
-  const [fileList, setFileList] = useState<any>([]);
-  const [surface, setSurface] = useState<any>('');
-
-  const [checkTop, setCheckTop] = useState<any>('')
   const handleOk = async () => {
-    let data = form.getFieldsValue()
-    let val = await form.validateFields()
+    const data = form.getFieldsValue();
+    await form.validateFields();
     
-    let htmlStr = editorRef.current?.children[0].innerHTML
-
-    htmlStr = htmlStr?.replaceAll('"', "'")
-    let content = editor.getContents()
-    // console.log('htmlStr----', htmlStr)
-    editor.setContents(content)
+    const htmlStr = editorHtml.replaceAll('"', "'");
     data.date = moment(data.date).format('YYYY-MM-DD');
     data.createTime = moment(data.createTime).format('YYYY-MM-DD HH:mm:ss');
-    if(data.newsTop){
-      data.newsTop = 1;
-    }else{
-      data.newsTop = 0;
-    } 
-    // data.top = checkTop;
-    let formData = {
+    data.newsTop = data.newsTop ? 1 : 0;
+    const formData = {
       ...data,
       surface,
       content: htmlStr
-    }
-    form.setFieldsValue({
-      title: '',
-      digest: ""
-    })
+    };
+    form.resetFields();
     setFileList([]);
-    setCheckTop(false)
-    editor.clipboard.dangerouslyPasteHTML(0, '')
-    editor.setContents([])
+    setEditorHtml('');
     props.onSubmit(formData);
   };
   const handleCancel = () => {
-    form.setFieldsValue({
-      title: '',
-      digest: "",
-      top: ""
-    })
+    form.resetFields();
     setFileList([]);
-    setCheckTop(false)
-    editor.clipboard.dangerouslyPasteHTML(0, '')
-    editor.setContents([])
+    setEditorHtml('');
     props.onCancel();
-
   };
-
-  const handleChange = async (res) => {
+  const base64ToFile = (base64, fileName = `${Math.random()}`) => {
+    let arr = base64.split(',')
+    console.log(arr[0])
+    let mime = arr[0].match(/:(.*?);/)[1]
+    let bstr = atob(arr[1])
+    let n = bstr.length
+    let u8arr = new Uint8Array(n)
+    while (n--) {
+      u8arr[n] = bstr.charCodeAt(n)
+    }
+    return new File([u8arr], `${fileName}.${mime.split('/')[1]}`, {
+      type: mime,
+    })
+  }
+  useEffect(() => {
+    if(editorRef?.current){
+      const quill = editorRef.current.getEditor()
+      if (editWho === 'api' && userIndex !== 0) {
+        quill.setSelection(userIndex + 2)
+      }
+    }
+  }, [editorHtml])
+  const handleChange = (res) => {
     const { fileList } = res;
     setFileList(fileList);
   };
-
   const handleBeforeUpload = async (file: RcFile) => {
     const formData = new FormData();
     formData.append('file', file, file.name);
     const res = await upload(formData);
     if (res?.data?.uuid) {
-      setSurface(res.data.uuid)
+      setSurface(res.data.uuid);
     }
     return false;
   };
-
-
+  const handleChangeQuill = (content, delta, source, editor) => {
+    let quill = editorRef.current.getEditor()
+    quill.focus()
+    let delta_ops = delta.ops
+    let quilContent = editor.getContents()
+    setEditorHtml(content)
+    const range = quill.getSelection()
+    if (range) {
+      if (range.length == 0 && range.index !== 0) {
+        console.log('User cursor is at index', range.index)
+        setUserIndex(range.index)
+      } else {
+        const text = quill.getText(range.index, range.length)
+        console.log('User has highlighted: ', text)
+      }
+    } else {
+      console.log('User cursor is not in editor')
+    }
+    setEditWho(source)
+    if (delta_ops && delta_ops.length > 0) {
+      quilContent.ops.map((item) => {
+        if (item.insert) {
+          let imgStr = item.insert.image
+          if (imgStr && imgStr?.includes('data:image/')) {
+            let file = base64ToFile(imgStr)
+            let formData = new FormData()
+            formData.append('file', file)
+            upload(formData).then((res) => {
+              item.insert.image = res.data.url
+              quill.setContents(quilContent)
+            })
+          }
+        }
+      })
+    }
+  }
   return (
     <Drawer
       width={'80%'}
@@ -292,137 +196,82 @@ const NewsForm: React.FC<NewsProps> = (props) => {
         <ProFormText
           name="title"
           label='标题'
-          labelCol={{
-            style: { width: 95 }
-          }}
+          labelCol={{ style: { width: 95 } }}
           placeholder='请输入标题'
-          rules={[
-            {
-              required: true,
-              message: '请输入标题!',
-            },
-          ]}
+          rules={[{ required: true, message: '请输入标题!' }]}
         />
         <ProForm.Item
           label={'封面图'}
           extra={'图片尺寸1218*915'}
-          labelCol={{
-            style: { width: 95 }
-          }}
-          rules={[
-            {
-              required: true
-            }
-          ]
-          }
+          labelCol={{ style: { width: 95 } }}
+          rules={[{ required: true }]}
         >
           <Upload
-            listType="picture-card" // 设置为图片卡片模式
+            listType="picture-card"
             fileList={fileList}
             maxCount={1}
             onChange={handleChange}
             beforeUpload={handleBeforeUpload}
           >
-            {fileList?.length < 1 && '+' + intl.formatMessage({ id: 'public.uploadImg' })}
+            {fileList.length < 1 && '+' + intl.formatMessage({ id: 'public.uploadImg' })}
           </Upload>
         </ProForm.Item>
-        <ProFormSwitch labelCol={{
-            style: { width: 95 }
-          }} name="newsTop" label="置顶" />
+        <ProFormSwitch labelCol={{ style: { width: 95 } }} name="newsTop" label="置顶" />
         <ProFormDatePicker
           name="date"
           label='日期'
-          fieldProps={{
-            format: (value) => value.format('YYYY-MM-DD'),
-          }}
-          labelCol={{
-            style: { width: 95 }
-          }}
-          rules={[
-            {
-              required: true
-            }
-          ]
-          }
+          fieldProps={{ format: (value) => value.format('YYYY-MM-DD') }}
+          labelCol={{ style: { width: 95 } }}
+          rules={[{ required: true }]}
         />
         <ProFormDateTimePicker
           name="createTime"
           label='发稿时间'
-          fieldProps={{
-            format: (value) => value.format('YYYY-MM-DD HH:mm:ss'),
-          }}
-          labelCol={{
-            style: { width: 95 }
-          }}
-          rules={[
-            {
-              required: true
-            }
-          ]
-          }
+          fieldProps={{ format: (value) => value.format('YYYY-MM-DD HH:mm:ss') }}
+          labelCol={{ style: { width: 95 } }}
+          rules={[{ required: true }]}
         />
         <ProFormSelect
           name="column"
-          key="column"
           label='新闻分类'
           request={() =>
-            getDataEnumList({enumUuid: '2024810214616101'}).then((res) => {
-              let tList = []
-              res.rows.forEach(item => {
-                tList.push({
-                  label: item.dataName,
-                  value: item.uuid,
-                })
-              })
-              return tList;
+            getDataEnumList({ enumUuid: '2024810214616101' }).then((res) => {
+              return res.rows.map(item => ({
+                label: item.dataName,
+                value: item.uuid,
+              }));
             })
-
           }
-          labelCol={{
-            style: { width: 95 }
-          }}
+          labelCol={{ style: { width: 95 } }}
           placeholder={'请选择新闻分类'}
-
         />
         <ProFormTextArea
           name="digest"
           label='摘要'
-          labelCol={{
-            style: { width: 95 }
-          }}
+          labelCol={{ style: { width: 95 } }}
           placeholder={'请输入摘要'}
         />
-         
         <ProFormText
           name="key"
           label='网页关键字'
-          labelCol={{
-            style: { width: 95 }
-          }}
+          labelCol={{ style: { width: 95 } }}
           placeholder={'请输入页面关键字'}
         />
-
         <ProFormText
           name="source"
           label='来源'
-          labelCol={{
-            style: { width: 95 }
-          }}
+          labelCol={{ style: { width: 95 } }}
           placeholder={'中泽集团'}
           initialValue={'中泽集团'}
         />
-
         <ProForm.Item 
-        label={'新闻内容'} 
-        labelCol={{
-          style: { width: 95 }
-        }}
+          label={'新闻内容'} 
+          labelCol={{ style: { width: 95 } }}
         >
-          <div id='editor' style={{ width: '70vw', height: '500px' }} ref={editorRef}></div>
+          <ReactQuill ref={editorRef} placeholder='请输入...' theme='snow' className="ql-editor" modules={modules} value={editorHtml} onChange={handleChangeQuill} />
         </ProForm.Item>
       </ProForm>
     </Drawer>
   );
 };
-
-export default NewsForm;
+export default NewsForm;

src/pages/Other/footer/index.tsx

@@ -227,6 +227,22 @@ const NoticeTableList: React.FC = () => {
                             labelCol={{
                                 style: { width: 95 }
                             }}
+                        />
+                         <ProFormText
+                            name="reportPhone"
+                            label="反舞弊举报电话"
+                            placeholder={'请输入'}
+                            labelCol={{
+                                style: { width: 110 }
+                            }}
+                        />
+                         <ProFormText
+                            name="reportEmail"
+                            label="反舞弊举报邮箱"
+                            placeholder={'请输入'}
+                            labelCol={{
+                                style: { width: 110 }
+                            }}
                         />
                         <ProForm.Item
                             label={'微信二维码'}

src/pages/PartyWork/partyWork/edit.tsx

@@ -7,15 +7,14 @@ import {
 } from '@ant-design/pro-components';
 import { Form, Drawer, Upload, Space, Button } from 'antd';
 
-import { useIntl, FormattedMessage } from '@umijs/max';
-import Editor from '@/components/ueditor';
+import { useIntl } from '@umijs/max';
 import { upload } from '@/services/partyWork/partyWork';
 import { getDataEnumList } from '@/services/system/Enum';
-import Quill from "quill";
-import "quill/dist/quill.snow.css";
+// import Quill from "quill";
+// import "quill/dist/quill.snow.css";
+import ReactQuill from 'react-quill';
+import 'react-quill/dist/quill.snow.css';
 import moment from 'moment';
-let editor: any;
-
 export type PartyWorkProps = {
   onCancel: (flag?: boolean, formVals?: any) => void;
   onSubmit: (values: any) => Promise<void>;
@@ -27,19 +26,12 @@ let toolbarOptions = [
   ['bold', 'italic', 'underline', 'strike'],        // 切换按钮
   ['blockquote', 'code-block'],
   ['link', 'image'],
-
-
-  [{ 'header': 1 }, { 'header': 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': [] }],
@@ -48,45 +40,50 @@ let toolbarOptions = [
   ['clean'],                                         // 清除格式
 
 ];
-
-function image(){
-  var _this3 = this;
-
-  var fileInput = this.container.querySelector('input.ql-image[type=file]');
-  fileInput = null
-  if (fileInput == null) {
-    fileInput = document.createElement('input');
-    fileInput.setAttribute('type', 'file');
-    fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
-    fileInput.classList.add('ql-image');
-    fileInput.addEventListener('change', async function () {
-      if (fileInput.files != null && fileInput.files[0] != null) {
-        let index = editor.getSelection() && editor.getSelection().index ? editor.getSelection().index : 0;
-
-        let file = fileInput.files[0]
-        const formData = new FormData();
-        formData.append('file', file, file.name);
-        const res = await upload(formData)
-        editor.insertEmbed(index, 'image', res.data.url);
-        var reader = new FileReader();
-        reader.onload = function (e) {
-          fileInput.value = "";
-        };
-
-      }
-    });
-    this.container.appendChild(fileInput);
-  }
-  fileInput.click();
-}
+const modules = {
+  toolbar: {
+    container: toolbarOptions, // 使用自定义工具栏选项
+  },
+};
+// function image(){
+//   var _this3 = this;
+
+//   var fileInput = this.container.querySelector('input.ql-image[type=file]');
+//   fileInput = null
+//   if (fileInput == null) {
+//     fileInput = document.createElement('input');
+//     fileInput.setAttribute('type', 'file');
+//     fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
+//     fileInput.classList.add('ql-image');
+//     fileInput.addEventListener('change', async function () {
+//       if (fileInput.files != null && fileInput.files[0] != null) {
+//         let index = editor.getSelection() && editor.getSelection().index ? editor.getSelection().index : 0;
+
+//         let file = fileInput.files[0]
+//         const formData = new FormData();
+//         formData.append('file', file, file.name);
+//         const res = await upload(formData)
+//         editor.insertEmbed(index, 'image', res.data.url);
+//         var reader = new FileReader();
+//         reader.onload = function (e) {
+//           fileInput.value = "";
+//         };
+
+//       }
+//     });
+//     this.container.appendChild(fileInput);
+//   }
+//   fileInput.click();
+// }
 const PartyWorkForm: React.FC<PartyWorkProps> = (props) => {
 
   const [form] = Form.useForm();
   const intl = useIntl();
   let editorRef = useRef<HTMLDivElement>(null)
-
+  const [editWho, setEditWho] = useState('')
+  const [userIndex, setUserIndex] = useState(0)
+  const [editorHtml, setEditorHtml] = useState('');
   useEffect(() => {
-    console.log(props)
     form.resetFields();
     if(!props.open) return;
     // const { title, content, surface, surfaceUrl, date } = props;
@@ -120,74 +117,33 @@ const PartyWorkForm: React.FC<PartyWorkProps> = (props) => {
         }
       ])
     }
-    if (editorRef && editorRef.current && editorRef.current.children[0]) {
-      editorRef.current.children[0].innerHTML = content
+    // if (editorRef && editorRef.current && editorRef.current.children[0]) {
+    //   editorRef.current.children[0].innerHTML = content
+    // }
+    setEditorHtml(content || '')
+  }, [props.open,props.currentRow]);
+  const base64ToFile = (base64, fileName = `${Math.random()}`) => {
+    let arr = base64.split(',')
+    console.log(arr[0])
+    let mime = arr[0].match(/:(.*?);/)[1]
+    let bstr = atob(arr[1])
+    let n = bstr.length
+    let u8arr = new Uint8Array(n)
+    while (n--) {
+      u8arr[n] = bstr.charCodeAt(n)
     }
-
-  }, [props.open]);
-
+    return new File([u8arr], `${fileName}.${mime.split('/')[1]}`, {
+      type: mime,
+    })
+  }
   useEffect(() => {
-    if(!props.open) return;
-    var Parchment = Quill.import('parchment');
-
-    let config = {
-      scope: Parchment.Scope.INLINE,
-      // 会有下拉框列表
-      whitelist: ['20px', '22px', '24px', '26px', '28px', '30px', '32px', '34px', '36px', '38px', '40px', '42px', '44px']
-      //可设置成没有下拉框的，但会导致无法清除样式
-      // whitelist: ['1px solid #000000']  
-    };
-
-    let wordBox = new Parchment.Attributor.Style('wordBox', 'line-height', config);
-    console.log('wordBox',wordBox)
-
-    Quill.register(wordBox, true);
-    editor = new Quill('#editor', {
-      modules: {
-        toolbar: toolbarOptions,
-        clipboard: {
-          dangerouslyPasteHTML: true
-        }
-      },
-      theme: 'snow'
-    });
-    console.log('editor',editor)
-    // 工具栏附件按钮
-    let a = document.querySelectorAll(".ql-wordBox")[0]
-    let b = document.querySelectorAll(".ql-wordBox")[1]
-    //添加默认显示内容
-    let stit = document.createElement('span')
-    stit.innerHTML = intl.formatMessage({ id: 'public.lineSpacing' });
-    stit.setAttribute('style', 'margin-right:20px;line-height: 24px;')
-    a.children[0].insertBefore(stit, a.children[0].children[0])
-
-    // 遍历下拉框列表添加值
-    let i = a.children[1].children.length
-    while (i) {
-      i--;
-      let item = a.children[1].children[i]
-      item.innerHTML = item.dataset.value ? item.dataset.value : '无'
+    if(editorRef?.current){
+      const quill = editorRef.current.getEditor()
+      if (editWho === 'api' && userIndex !== 0) {
+        quill.setSelection(userIndex + 2)
+      }
     }
-
-    // console.log('editor', editor)
-    var toolbar = editor.getModule('toolbar');
-
-    toolbar.image2 = image
-    // console.log("toolbar.handlers.image", toolbar.handlers.image)
-    toolbar.addHandler('image', (e) => {
-      toolbar.image2()
-      // 
-
-    });
-
-    // toolbar.addHandler('wordBox', (e) => {
-    //   console.log('e-----++++', e)
-    //   // 
-
-    // });
-
-  }, [props.open]);
-
+  }, [editorHtml,userIndex])
 
   const [fileList, setFileList] = useState<any>([]);
   const [surface, setSurface] = useState<any>('');
@@ -197,12 +153,11 @@ const PartyWorkForm: React.FC<PartyWorkProps> = (props) => {
     let data = form.getFieldsValue()
     let val = await form.validateFields()
     
-    let htmlStr = editorRef.current?.children[0].innerHTML
+    const htmlStr = editorHtml.replaceAll('"', "'")
 
-    htmlStr = htmlStr?.replaceAll('"', "'")
-    let content = editor.getContents()
+    // let content = editor.getContents()
     // console.log('htmlStr----', htmlStr)
-    editor.setContents(content)
+    // editor.setContents(content)
     data.date = moment(data.date).format('YYYY-MM-DD');
     if(checkTop){
       data.top = 1;
@@ -221,8 +176,9 @@ const PartyWorkForm: React.FC<PartyWorkProps> = (props) => {
     })
     setFileList([]);
     setCheckTop(false)
-    editor.clipboard.dangerouslyPasteHTML(0, '')
-    editor.setContents([])
+    // editor.clipboard.dangerouslyPasteHTML(0, '')
+    // editor.setContents([])
+    setEditorHtml('');
     props.onSubmit(formData);
   };
   const handleCancel = () => {
@@ -233,8 +189,9 @@ const PartyWorkForm: React.FC<PartyWorkProps> = (props) => {
     })
     setFileList([]);
     setCheckTop(false)
-    editor.clipboard.dangerouslyPasteHTML(0, '')
-    editor.setContents([])
+    // editor.clipboard.dangerouslyPasteHTML(0, '')
+    // editor.setContents([])
+    setEditorHtml('');
     props.onCancel();
 
   };
@@ -254,6 +211,43 @@ const PartyWorkForm: React.FC<PartyWorkProps> = (props) => {
     return false;
   };
 
+  const handleChangeQuill = (content, delta, source, editor) => {
+    let quill = editorRef.current.getEditor()
+    quill.focus()
+    let delta_ops = delta.ops
+    let quilContent = editor.getContents()
+    setEditorHtml(content)
+    const range = quill.getSelection()
+    if (range) {
+      if (range.length == 0 && range.index !== 0) {
+        console.log('User cursor is at index', range.index)
+        setUserIndex(range.index)
+      } else {
+        const text = quill.getText(range.index, range.length)
+        console.log('User has highlighted: ', text)
+      }
+    } else {
+      console.log('User cursor is not in editor')
+    }
+    setEditWho(source)
+    if (delta_ops && delta_ops.length > 0) {
+      quilContent.ops.map((item) => {
+        if (item.insert) {
+          let imgStr = item.insert.image
+          if (imgStr && imgStr?.includes('data:image/')) {
+            let file = base64ToFile(imgStr)
+            let formData = new FormData()
+            formData.append('file', file)
+            upload(formData).then((res) => {
+              item.insert.image = res.data.url
+              quill.setContents(quilContent)
+            })
+          }
+        }
+      })
+    }
+  }
+
 
   return (
     <Drawer
@@ -378,7 +372,8 @@ const PartyWorkForm: React.FC<PartyWorkProps> = (props) => {
           style: { width: 95 }
         }}
         >
-          <div id='editor' style={{ width: '70vw', height: '500px' }} ref={editorRef}></div>
+          {/* <div id='editor' style={{ width: '70vw', height: '500px' }} ref={editorRef}></div> */}
+          <ReactQuill ref={editorRef} placeholder='请输入...' theme='snow' className="ql-editor" modules={modules} value={editorHtml} onChange={handleChangeQuill} />
         </ProForm.Item>
       </ProForm>
     </Drawer>

src/pages/SocialRespon/socialRespon/edit.tsx

@@ -3,25 +3,14 @@ import {
   ProForm,
   ProFormText,
   ProFormTextArea,
-  ProFormUploadButton,
-  ProFormSelect,
   ProFormDatePicker,
-  ProFormRadio
 } from '@ant-design/pro-components';
-import { Form, Modal, Drawer, message, Upload, Space, Button, Switch,Input,Tooltip } from 'antd';
-import {InfoCircleOutlined} from '@ant-design/icons';
-
-import { useIntl, FormattedMessage } from '@umijs/max';
-import { DictValueEnumObj } from '@/components/DictTag';
-import Editor from '@/components/ueditor';
+import { Form, Drawer, Space, Button } from 'antd';
+import ReactQuill from 'react-quill';
+import 'react-quill/dist/quill.snow.css';
+import { useIntl } from '@umijs/max';
 import { upload } from '@/services/socialRespon/socialRespon';
-import { getDataEnumList } from '@/services/system/Enum';
-import Quill from "quill";
-import "quill/dist/quill.snow.css";
 import moment from 'moment';
-import { trim } from 'lodash';
-let editor: any;
-
 export type SocialResponProps = {
   onCancel: (flag?: boolean, formVals?: any) => void;
   onSubmit: (values: any) => Promise<void>;
@@ -38,19 +27,12 @@ let toolbarOptions = [
   ['bold', 'italic', 'underline', 'strike'],        // 切换按钮
   ['blockquote', 'code-block'],
   ['link', 'image'],
-
-
-  [{ 'header': 1 }, { 'header': 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': [] }],
@@ -60,49 +42,24 @@ let toolbarOptions = [
 
 ];
 
-function image(){
-  var _this3 = this;
-
-  var fileInput = this.container.querySelector('input.ql-image[type=file]');
-  fileInput = null
-  if (fileInput == null) {
-    fileInput = document.createElement('input');
-    fileInput.setAttribute('type', 'file');
-    fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
-    fileInput.classList.add('ql-image');
-    fileInput.addEventListener('change', async function () {
-      if (fileInput.files != null && fileInput.files[0] != null) {
-        let index = editor.getSelection() && editor.getSelection().index ? editor.getSelection().index : 0;
-
-        let file = fileInput.files[0]
-        const formData = new FormData();
-        formData.append('file', file, file.name);
-        const res = await upload(formData)
-        editor.insertEmbed(index, 'image', res.data.url);
-        var reader = new FileReader();
-        reader.onload = function (e) {
-          fileInput.value = "";
-        };
-
-      }
-    });
-    this.container.appendChild(fileInput);
-  }
-  fileInput.click();
-}
 const SocialResponForm: React.FC<SocialResponProps> = (props) => {
 
   const [form] = Form.useForm();
   const intl = useIntl();
   let editorRef = useRef<HTMLDivElement>(null)
+  const [editorHtml, setEditorHtml] = useState('');
 
+  const modules = {
+    toolbar: {
+      container: toolbarOptions, // 使用自定义工具栏选项
+    },
+  };
   useEffect(() => {
-    console.log(props)
     form.resetFields();
-    if(!props.open) return;
+    if (!props.open) return;
     // const { title, content, surface, surfaceUrl, date } = props;
-    if(!props.currentRow) return;
-    const { digest, top,key,content,surface,surfaceUrl,date,title,source,column} = props.currentRow;
+    if (!props.currentRow) return;
+    const { digest, top, key, content, surface, surfaceUrl, date, title, source, column } = props.currentRow;
     if (props.currentRow) {
       form.setFieldsValue({
         digest,
@@ -131,93 +88,31 @@ const SocialResponForm: React.FC<SocialResponProps> = (props) => {
         }
       ])
     }
-    if (editorRef && editorRef.current && editorRef.current.children[0]) {
-      editorRef.current.children[0].innerHTML = content
-    }
+    setEditorHtml(content || '')
 
   }, [props.open]);
 
-  useEffect(() => {
-    var Parchment = Quill.import('parchment');
-
-    let config = {
-      scope: Parchment.Scope.INLINE,
-      // 会有下拉框列表
-      whitelist: ['20px', '22px', '24px', '26px', '28px', '30px', '32px', '34px', '36px', '38px', '40px', '42px', '44px']
-      //可设置成没有下拉框的，但会导致无法清除样式
-      // whitelist: ['1px solid #000000']  
-    };
-
-    let wordBox = new Parchment.Attributor.Style('wordBox', 'line-height', config);
-
-    Quill.register(wordBox, true);
-    editor = new Quill('#editor', {
-      modules: {
-        toolbar: toolbarOptions,
-        clipboard: {
-          dangerouslyPasteHTML: true
-        }
-      },
-      theme: 'snow'
-    });
-
-    // 工具栏附件按钮
-    let a = document.querySelectorAll(".ql-wordBox")[0]
-    let b = document.querySelectorAll(".ql-wordBox")[1]
-    //添加默认显示内容
-    let stit = document.createElement('span')
-    stit.innerHTML = intl.formatMessage({ id: 'public.lineSpacing' });
-    stit.setAttribute('style', 'margin-right:20px;line-height: 24px;')
-    a.children[0].insertBefore(stit, a.children[0].children[0])
-
-    // 遍历下拉框列表添加值
-    let i = a.children[1].children.length
-    while (i) {
-      i--;
-      let item = a.children[1].children[i]
-      item.innerHTML = item.dataset.value ? item.dataset.value : '无'
-    }
-
-    // console.log('editor', editor)
-    var toolbar = editor.getModule('toolbar');
-
-    toolbar.image2 = image
-    // console.log("toolbar.handlers.image", toolbar.handlers.image)
-    toolbar.addHandler('image', (e) => {
-      toolbar.image2()
-      // 
-
-    });
-
-    // toolbar.addHandler('wordBox', (e) => {
-    //   console.log('e-----++++', e)
-    //   // 
-
-    // });
-
-  }, []);
-
-
   const [fileList, setFileList] = useState<any>([]);
   const [surface, setSurface] = useState<any>('');
 
+  const [editWho, setEditWho] = useState('')
+  const [userIndex, setUserIndex] = useState(0)
   const [checkTop, setCheckTop] = useState<any>('')
   const handleOk = async () => {
     let data = form.getFieldsValue()
     let val = await form.validateFields()
-    
-    let htmlStr = editorRef.current?.children[0].innerHTML
 
-    htmlStr = htmlStr?.replaceAll('"', "'")
-    let content = editor.getContents()
+    let htmlStr = editorHtml?.replaceAll('"', "'")
+
+    // let content = editor.getContents()
     // console.log('htmlStr----', htmlStr)
-    editor.setContents(content)
+    // editor.setContents(content)
     data.date = moment(data.date).format('YYYY-MM-DD');
-    if(checkTop){
+    if (checkTop) {
       data.top = 1;
-    }else{
+    } else {
       data.top = 0;
-    } 
+    }
     // data.top = checkTop;
     let formData = {
       ...data,
@@ -230,8 +125,7 @@ const SocialResponForm: React.FC<SocialResponProps> = (props) => {
     })
     setFileList([]);
     setCheckTop(false)
-    editor.clipboard.dangerouslyPasteHTML(0, '')
-    editor.setContents([])
+    setEditorHtml('');
     props.onSubmit(formData);
   };
   const handleCancel = () => {
@@ -242,26 +136,68 @@ const SocialResponForm: React.FC<SocialResponProps> = (props) => {
     })
     setFileList([]);
     setCheckTop(false)
-    editor.clipboard.dangerouslyPasteHTML(0, '')
-    editor.setContents([])
+    setEditorHtml('');
     props.onCancel();
 
   };
-
-  const handleChange = async (res) => {
-    const { fileList } = res;
-    setFileList(fileList);
-  };
-
-  const handleBeforeUpload = async (file: RcFile) => {
-    const formData = new FormData();
-    formData.append('file', file, file.name);
-    const res = await upload(formData);
-    if (res?.data?.uuid) {
-      setSurface(res.data.uuid)
+  useEffect(() => {
+    const quill = editorRef.current.getEditor()
+    if (editWho === 'api' && userIndex !== 0) {
+      quill.setSelection(userIndex + 2)
     }
-    return false;
-  };
+  }, [editorHtml])
+
+  const base64ToFile = (base64, fileName = `${Math.random()}`) => {
+    let arr = base64.split(',')
+    console.log(arr[0])
+    let mime = arr[0].match(/:(.*?);/)[1]
+    let bstr = atob(arr[1])
+    let n = bstr.length
+    let u8arr = new Uint8Array(n)
+    while (n--) {
+      u8arr[n] = bstr.charCodeAt(n)
+    }
+    return new File([u8arr], `${fileName}.${mime.split('/')[1]}`, {
+      type: mime,
+    })
+  }
+  const handleChangeQuill = (content, delta, source, editor) => {
+    let quill = editorRef.current.getEditor()
+    quill.focus()
+    let delta_ops = delta.ops
+    let quilContent = editor.getContents()
+    setEditorHtml(content)
+    const range = quill.getSelection()
+    if (range) {
+      if (range.length == 0 && range.index !== 0) {
+        console.log('User cursor is at index', range.index)
+        setUserIndex(range.index)
+      } else {
+        const text = quill.getText(range.index, range.length)
+        console.log('User has highlighted: ', text)
+      }
+    } else {
+      console.log('User cursor is not in editor')
+    }
+    setEditWho(source)
+    if (delta_ops && delta_ops.length > 0) {
+      quilContent.ops.map((item) => {
+        if (item.insert) {
+          let imgStr = item.insert.image
+          if (imgStr && imgStr?.includes('data:image/')) {
+            let file = base64ToFile(imgStr)
+            let formData = new FormData()
+            formData.append('file', file)
+            upload(formData).then((res) => {
+              item.insert.image = res.data.url
+              quill.setContents(quilContent)
+            })
+          }
+        }
+      })
+    }
+  }
+
 
 
   return (
@@ -323,7 +259,7 @@ const SocialResponForm: React.FC<SocialResponProps> = (props) => {
           ]
           }
         />
-         
+
         <ProFormText
           name="key"
           label='网页关键字'
@@ -343,13 +279,13 @@ const SocialResponForm: React.FC<SocialResponProps> = (props) => {
           initialValue={'中泽集团'}
         />
 
-        <ProForm.Item 
-        label={'文章内容'} 
-        labelCol={{
-          style: { width: 95 }
-        }}
+        <ProForm.Item
+          label={'文章内容'}
+          labelCol={{
+            style: { width: 95 }
+          }}
         >
-          <div id='editor' style={{ width: '70vw', height: '500px' }} ref={editorRef}></div>
+          <ReactQuill ref={editorRef} placeholder='请输入...' theme='snow' className="ql-editor" modules={modules} value={editorHtml} onChange={handleChangeQuill} />
         </ProForm.Item>
       </ProForm>
     </Drawer>