fix(compiler): 修改富文本编辑器逻辑，新增上传视频和图片功能

src/components/MyEditor/index.tsx

@@ -2,28 +2,80 @@ import '@wangeditor/editor/dist/css/style.css'; // 引入 css
 import { useState, useEffect } from 'react';
 import { Editor, Toolbar } from '@wangeditor/editor-for-react';
 import type { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor';
+import { upload } from '@/services/myEditor';
+import { message } from 'antd';
 
+/**
+ * 富文本编辑器
+ * @param props
+ * @constructor
+ */
 function MyEditor(props: any) {
-  const { data } = props;
-  // editor 实例
+  const { data, onChange } = props;
+  /**
+   * editor 实例
+   */
   const [editor, setEditor] = useState<IDomEditor | null>(null);
 
-  // 编辑器内容
+  /**
+   * 编辑器内容
+   */
   const [html, setHtml] = useState('');
 
+  /**
+   * 初始化
+   */
   useEffect(() => {
     setHtml(data);
   }, []);
 
-  // 工具栏配置
+  /**
+   * 工具栏配置
+   */
   const toolbarConfig: Partial<IToolbarConfig> = {};
 
-  // 编辑器配置
+  /**
+   * 上传文件
+   * @param file
+   * @param insertFn
+   */
+  const update = (file: any, insertFn: any) => {
+    const imgData = new FormData();
+    imgData.append('file', file);
+    //调接口，上传图片
+    upload(imgData).then((res) => {
+      if (res.code == 0) {
+        //接口调用成功，将上传文件插入到富文本中去
+        insertFn(res.data.url, res.data.name);
+      } else {
+        message.error('上传失败');
+      }
+    });
+  };
+
+  /**
+   * 编辑器配置
+   */
   const editorConfig: Partial<IEditorConfig> = {
     placeholder: '请输入内容...',
+    // 菜单操作设置
+    MENU_CONF: {
+      uploadImage: {
+        // 上传图片配置
+        customUpload: update,
+        server: '/web/v1/files',
+      },
+      uploadVideo: {
+        // 上传视频配置
+        customUpload: update,
+        server: '/web/v1/files',
+      },
+    },
   };
 
-  // 及时销毁 editor ，重要！
+  /**
+   * 及时销毁 editor ，重要！
+   */
   useEffect(() => {
     return () => {
       if (editor == null) return;
@@ -32,6 +84,10 @@ function MyEditor(props: any) {
     };
   }, [editor]);
 
+  const handleChange = (el: any) => {
+    if (onChange) onChange(el.getHtml());
+  };
+
   return (
     <>
       <div style={{ border: '1px solid #ccc', zIndex: 100 }}>
@@ -45,7 +101,7 @@ function MyEditor(props: any) {
           defaultConfig={editorConfig}
           value={html}
           onCreated={setEditor}
-          onChange={(el) => setHtml(el.getHtml())}
+          onChange={handleChange}
           mode="default"
           style={{ height: '300px', overflowY: 'hidden' }}
         />

src/components/RichText/index.tsx

@@ -1,41 +0,0 @@
-import { useEffect, useState } from 'react';
-import ReactQuill from 'react-quill';
-import 'react-quill/dist/quill.snow.css';
-
-const RichText = (props: { setContent: any }) => {
-  const { setContent } = props;
-  const [value, setValue] = useState('');
-
-  useEffect(() => {
-    if (value) {
-      setContent(value);
-    }
-  }, [value]);
-
-  const modules = {
-    toolbar: {
-      container: [
-        [{ header: [1, 2, 3, 4, 5, 6, false] }],
-        ['bold', 'italic', 'underline', 'strike'],
-        [{ list: 'ordered' }, { list: 'bullet' }],
-        [{ align: [] }],
-        [{ color: [] }, { background: [] }],
-        ['link', 'image'],
-        ['clean'],
-      ],
-    },
-  };
-
-  return (
-    <ReactQuill
-      style={{ height: 300 }}
-      theme="snow"
-      value={value}
-      onChange={setValue}
-      modules={modules}
-      className=" ql-editor"
-    />
-  );
-};
-
-export default RichText;

src/pages/cms/ArticleManagement/edit.tsx

@@ -1,8 +1,8 @@
 import { Col, Form, Input, message, Modal, Row, Select } from 'antd';
 import React, { useEffect, useState } from 'react';
-import { createColumn, editColumn, queryColumn } from '@/services/cms/ColumnList';
-// import RichText from '@/components/RichText';
+import { queryColumn } from '@/services/cms/ColumnList';
 import MyEditor from '@/components/MyEditor';
+import { createArticle, editArticle } from '@/services/cms/ArticleManagement';
 
 interface editPros {
   visible: boolean;
@@ -19,7 +19,6 @@ const Edit: React.FC<editPros> = (props) => {
   const { visible, editCallback, params } = props;
   const [form] = Form.useForm();
   const [dataList, setDataList]: any = useState([]);
-  // const [content, setContent] = useState();
 
   // 获取列表数据
   const getList = () => {
@@ -38,10 +37,9 @@ const Edit: React.FC<editPros> = (props) => {
     form.validateFields().then((values) => {
       if (values) {
         const data = { ...values };
-        // data.content = content;
         if (params) {
           data.record_id = params.record_id;
-          editColumn(data)
+          editArticle(data)
             .then((res) => {
               if (res.code === 0) {
                 message.success('编辑成功');
@@ -56,7 +54,7 @@ const Edit: React.FC<editPros> = (props) => {
               editCallback();
             });
         } else {
-          createColumn(data)
+          createArticle(data)
             .then((res) => {
               if (res.code === 0) {
                 message.success('保存成功');
@@ -84,10 +82,10 @@ const Edit: React.FC<editPros> = (props) => {
 
   const formItemLayout = {
     labelCol: {
-      span: 6,
+      span: 4,
     },
     wrapperCol: {
-      span: 16,
+      span: 20,
     },
   };
 
@@ -97,7 +95,7 @@ const Edit: React.FC<editPros> = (props) => {
       open={visible}
       onOk={onOk}
       onCancel={onCancel}
-      width={800}
+      width={1000}
     >
       <Form form={form}>
         <Row>
@@ -115,10 +113,10 @@ const Edit: React.FC<editPros> = (props) => {
           <Col span={24}>
             <Form.Item
               {...formItemLayout}
-              name="parent_id"
+              name="column_id"
               label="栏目名称"
               rules={[{ required: true, message: '请选择栏目名称' }]}
-              initialValue={params?.parent_id}
+              initialValue={params?.column_id}
             >
               <Select placeholder="请选择栏目名称">
                 {dataList && dataList.length
@@ -141,7 +139,6 @@ const Edit: React.FC<editPros> = (props) => {
               rules={[{ required: false, message: '请输入内容' }]}
               initialValue={params?.content ? params?.content : ''}
             >
-              {/*<RichText setContent={setContent} />*/}
               <MyEditor data={params?.content ? params?.content : ''} />
             </Form.Item>
           </Col>

src/pages/cms/ArticleManagement/index.tsx

@@ -57,6 +57,11 @@ const ArticleManagement: React.FC = () => {
       setSearchData(data);
     });
   };
+
+  useEffect(() => {
+    getList();
+  }, [searchData]);
+
   //  重置
   const onReset = () => {
     form.resetFields();
@@ -95,7 +100,7 @@ const ArticleManagement: React.FC = () => {
     console.log(record);
     Modal.confirm({
       title: '删除',
-      content: `确认删除项目：[${record.name}]`,
+      content: `确认删除项目：[${record.title}]`,
       onOk: () => {
         delArticle(record?.record_id)
           .then((res) => {

src/pages/cms/ColumnList/index.tsx

@@ -54,6 +54,9 @@ const ColumnList: React.FC = () => {
       setSearchData(data);
     });
   };
+  useEffect(() => {
+    getList();
+  }, [searchData]);
   //  重置
   const onReset = () => {
     form.resetFields();
@@ -89,7 +92,6 @@ const ColumnList: React.FC = () => {
   };
   // 删除
   const toDel = (record: any) => {
-    console.log(record);
     Modal.confirm({
       title: '删除',
       content: `确认删除项目：[${record.name}]`,
@@ -107,8 +109,6 @@ const ColumnList: React.FC = () => {
           });
       },
     });
-
-    console.log(record);
   };
   // 编辑弹框回调
   const handleEdit = () => {

src/services/myEditor.ts

@@ -0,0 +1,12 @@
+import { request } from '@@/plugin-request/request';
+
+/**
+ * 上传文件
+ * @param params
+ */
+export async function upload(params: object) {
+  return request(`/web/v1/files`, {
+    method: 'POST',
+    data: params,
+  });
+}