From 93fc1e3e4435d4052226fbb9f3a4718b20efbfd5 Mon Sep 17 00:00:00 2001 From: jl-zhoujl2 Date: Tue, 5 Jul 2022 21:57:38 +0800 Subject: [PATCH 1/3] 7.5 wangeditor --- config/router.config.ts | 7 +++- src/components/richText/wang/index.tsx | 2 +- .../ProjectManager/components/WangEditor.tsx | 35 +++++++++++++++++++ 3 files changed, 42 insertions(+), 2 deletions(-) create mode 100644 src/pages/MainPage/ProjectManager/components/WangEditor.tsx diff --git a/config/router.config.ts b/config/router.config.ts index c4de15a..a814f7f 100644 --- a/config/router.config.ts +++ b/config/router.config.ts @@ -36,6 +36,11 @@ export default [ path: '/Calendar', component: './MainPage/ProjectManager/components/CalendarForm', }, + //富文本组件 + { + path: '/editor', + component: './MainPage/ProjectManager/components/WangEditor', + }, //401错误页 { exact: true, @@ -243,7 +248,7 @@ export default [ path: '/Supervision', component: './Project/ProjectManage/Supervision' }, - {//审查人员 项目管理页 + {//审查人员 项目管理页 name: 'Examination', path: '/Examination', component: './Project/ProjectManage/Examination' diff --git a/src/components/richText/wang/index.tsx b/src/components/richText/wang/index.tsx index e1151f8..14dd2eb 100644 --- a/src/components/richText/wang/index.tsx +++ b/src/components/richText/wang/index.tsx @@ -46,7 +46,7 @@ const BraftText: React.FC = (props) => { 'fullscreen', //全屏 // 'emoticon',//表情 - // 'image',//图片 + 'image',//图片 // 'video',//视频 // 'table',//表格 // 'todo',//待办 diff --git a/src/pages/MainPage/ProjectManager/components/WangEditor.tsx b/src/pages/MainPage/ProjectManager/components/WangEditor.tsx new file mode 100644 index 0000000..f6fe537 --- /dev/null +++ b/src/pages/MainPage/ProjectManager/components/WangEditor.tsx @@ -0,0 +1,35 @@ +import React, { useRef, useState } from 'react'; +import { Button, Typography } from 'antd'; +import BraftText from '@/components/richText/wang'; +import ProCard from '@ant-design/pro-card'; +import { isEmpty } from '@/utils/CommonUtils'; + +const Editor: React.FC<{}> = () => { + const braftRef = useRef(null); + const [text, setText] = useState(); + const { Text, Paragraph } = Typography; + return ( + + setText(braftRef.current?.getHtml())}>生成}> + + + + {isEmpty(text) ? '没有' : ( + + 
+                            
+                                {text}
+                            
+
+ + )} + + + ); +}; + +export default Editor; From 26b7130352b8b5338f0dd2a0648b8c7713bd41e5 Mon Sep 17 00:00:00 2001 From: jl-zhoujl2 Date: Tue, 12 Jul 2022 16:37:11 +0800 Subject: [PATCH 2/3] =?UTF-8?q?7.11=20=E5=AF=8C=E6=96=87=E6=9C=AC=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E6=9C=AC=E5=9C=B0=E5=9B=BE=E7=89=87=E4=B8=8A=E4=BC=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/richText/wang/index.tsx | 105 ++++++++++++++++-- .../ProjectManager/components/WangEditor.tsx | 6 +- 2 files changed, 97 insertions(+), 14 deletions(-) diff --git a/src/components/richText/wang/index.tsx b/src/components/richText/wang/index.tsx index 14dd2eb..ee1ef7f 100644 --- a/src/components/richText/wang/index.tsx +++ b/src/components/richText/wang/index.tsx @@ -1,7 +1,8 @@ import React, { useEffect, useImperativeHandle, useState } from 'react'; import AlertMenu from './fullScreen' import E from 'wangeditor'; -import { Button } from 'antd'; +import { Button, message, Spin } from 'antd'; +import { pictureDisplayPath, uploadAttachmentPath } from '@/utils/DownloadUtils'; interface WangType { braftRef: any;//挂载 @@ -21,6 +22,8 @@ const BraftText: React.FC = (props) => { //======================================================================================state const [content, setContent] = useState(''); const [fullScreen, fullScreenSet] = useState(false); + //遮罩 + const [loading, setLoading] = useState(false); const { braftRef, echo, @@ -33,7 +36,7 @@ const BraftText: React.FC = (props) => { const tools = [//工具栏 'head',//标题 'fontSize', //字号 - 'lineHeight', //行高 + // 'lineHeight', //行高 'foreColor', //颜色 'bold', //加粗 'italic', //斜体 @@ -41,12 +44,13 @@ const BraftText: React.FC = (props) => { 'strikeThrough', //文字删除线 'indent', //缩进 'justify', //文字对齐方式 + 'list', //列表 + 'image',//图片 'undo', //撤销 - 'redo', //重做 + 'redo', //恢复 'fullscreen', //全屏 // 'emoticon',//表情 - 'image',//图片 // 'video',//视频 // 'table',//表格 // 'todo',//待办 @@ -56,12 +60,12 @@ const BraftText: React.FC = (props) => { useEffect(() => { if (willCreate) { // 注：class写法需要在componentDidMount 创建编辑器 - editor = new E("#div1") + editor = new E("#div1"); //工具栏 editor.config.menus = tools; //提示 - editor.config.placeholder = '为了能顺利发布，建议您内容去掉下划线等格式，尽量以纯文本形式发布。' + editor.config.placeholder = '为了能顺利发布，建议您内容去掉下划线等格式，尽量以纯文本形式发布。'; // 配置 onchange 回调函数 editor.config.onchange = editorOnChange; // 注册菜单 @@ -73,6 +77,85 @@ const BraftText: React.FC = (props) => { // 设置编辑区域高度为 500px height && (editor.config.height = height); + //关闭网络上传图片 + editor.config.showLinkImg = false; + // 关闭粘贴内容中的样式 + editor.config.pasteFilterStyle = false; + // 忽略粘贴内容中的图片 + editor.config.pasteIgnoreImg = true; + // 上传图片到服务器,对应的是controller层的@RequestMapping("/upload") + editor.config.uploadImgServer = uploadAttachmentPath;//接口名称 + //自定义name,接收的时候图片文件的那么用这个，对应的是参数中的MultipartFile upimg名称,这个名称即上传到浏览器的参数名称 + editor.config.uploadFileName = "multipartFiles";//这个需要和后台商量上传图片的名称 + //设置请求体额外参数 + editor.config.uploadImgParams = { + appCode: 'ebtp-cloud-frontend', + objectId: '1546325338156965888', + }; + // 将 timeout 时间改为 60s + editor.config.uploadImgTimeout = 60000; + // 将图片大小限制为 500k + editor.config.uploadImgMaxSize = 500 * 1024; + // 限制一次最多上传 1 张图片 + editor.config.uploadImgMaxLength = 1; + //上传图片的错误提示默认使用alert弹出,也可以自定义用户体验更好的提示方式 + editor.config.customAlert = function (info: string) { + const repinfo = info.replace(/0.48828125M/g, '500K'); + // info 是需要提示的内容 + message.error(repinfo); + }; + // 上传图片的结果反馈 + editor.config.uploadImgHooks = { + before: function (xhr: any, editor: any, files: any) { + console.log('before xhr', xhr); + console.log('before files', files); + setLoading(true); + // 图片上传之前触发 + // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件 + // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传 + // return { + // prevent: true, + // msg: '放弃上传' + // } + // console.log("before:",xhr) + }, + success: function (xhr: any, editor: any, result: any) { + // 图片上传并返回结果，图片插入成功之后触发 + // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果 + // console.log("success:",result) + }, + fail: function (xhr: any, editor: any, result: any) { + // 图片上传并返回结果，但图片插入错误时触发 + // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果 + }, + error: function (xhr: any, editor: any) { + // 图片上传出错时触发 + // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象 + }, + // 上传图片超时 + timeout: function (xhr: any) { + message.error('服务器超时！'); + setLoading(false); + }, + // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置 + // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错） + customInsert: function (insertImg: (arg0: any) => void, result: any, editor: any) { + // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！） + // insertImg 是插入图片的函数，参数editor 是编辑器对象，result 是服务器端返回的结果 + // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片： + console.log('customInsert result', result) + if (result?.success) { + const url = pictureDisplayPath + '?filePath=' + result.data[0].sysStorageVO.filePath; + insertImg(url); + } else { + message.error('图片上传失败！'); + } + setLoading(false); + // var url = result.result.remote_path; + // insertImg(url); + // result 必须是一个 JSON 格式字符串！！！否则报错 + } + }; /**一定要创建 */ editor.create(); @@ -132,11 +215,11 @@ const BraftText: React.FC = (props) => { onChange?.(newHtml); }; return ( -
- {/* - */} -
-
+ +
+
+
+ ) } export default BraftText \ No newline at end of file diff --git a/src/pages/MainPage/ProjectManager/components/WangEditor.tsx b/src/pages/MainPage/ProjectManager/components/WangEditor.tsx index f6fe537..41e7579 100644 --- a/src/pages/MainPage/ProjectManager/components/WangEditor.tsx +++ b/src/pages/MainPage/ProjectManager/components/WangEditor.tsx @@ -14,10 +14,10 @@ const Editor: React.FC<{}> = () => { bordered headerBordered > - setText(braftRef.current?.getHtml())}>生成}> - + + setText(value)} /> - + {isEmpty(text) ? '没有' : ( 

From 8276d04729fddcd81dd6a93a00b0db60b4ec245c Mon Sep 17 00:00:00 2001
From: jl-zhoujl2 
Date: Wed, 13 Jul 2022 10:04:01 +0800
Subject: [PATCH 3/3] =?UTF-8?q?7.13=20=E5=AF=8C=E6=96=87=E6=9C=AC=E6=94=B9?=
 =?UTF-8?q?=E9=80=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/richText/wang/index.tsx        | 63 ++++++++++++++-----
 .../ProjectManager/components/WangEditor.tsx  | 10 ++-
 2 files changed, 57 insertions(+), 16 deletions(-)

diff --git a/src/components/richText/wang/index.tsx b/src/components/richText/wang/index.tsx
index ee1ef7f..e0efd6c 100644
--- a/src/components/richText/wang/index.tsx
+++ b/src/components/richText/wang/index.tsx
@@ -1,8 +1,10 @@
-import React, { useEffect, useImperativeHandle, useState } from 'react';
+import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
 import AlertMenu from './fullScreen'
 import E from 'wangeditor';
 import { Button, message, Spin } from 'antd';
 import { pictureDisplayPath, uploadAttachmentPath } from '@/utils/DownloadUtils';
+import { isEmpty } from '@/utils/CommonUtils';
+import { createNewFileBid } from '@/services/download_';
 
 interface WangType {
   braftRef: any;//挂载
@@ -10,7 +12,9 @@ interface WangType {
   echo?: any;//回显内容
   value?: any;
   height?: number;
-  onChange?: (value: any) => void
+  onChange?: (value: any) => void;
+  useImage?: boolean;//使用图片上传
+  imageId?: string;//图片objectId
 }
 let editor: any = null;
 
@@ -24,6 +28,8 @@ const BraftText: React.FC = (props) => {
   const [fullScreen, fullScreenSet] = useState(false);
   //遮罩
   const [loading, setLoading] = useState(false);
+  //imageId
+  const objectId = useRef(null);
   const {
     braftRef,
     echo,
@@ -31,6 +37,8 @@ const BraftText: React.FC = (props) => {
     value,
     height,
     onChange,
+    useImage,
+    imageId,
   } = props;
 
   const tools = [//工具栏
@@ -45,11 +53,11 @@ const BraftText: React.FC = (props) => {
     'indent', //缩进
     'justify', //文字对齐方式
     'list', //列表
-    'image',//图片
     'undo', //撤销
     'redo', //恢复
     'fullscreen', //全屏
 
+    // 'image',//图片
     // 'emoticon',//表情
     // 'video',//视频
     // 'table',//表格
@@ -62,6 +70,8 @@ const BraftText: React.FC = (props) => {
       // 注：class写法需要在componentDidMount 创建编辑器
       editor = new E("#div1");
 
+      //添加图片上传
+      useImage && tools.splice(-3, 0, 'image');
       //工具栏
       editor.config.menus = tools;
       //提示
@@ -88,28 +98,38 @@ const BraftText: React.FC = (props) => {
       //自定义name,接收的时候图片文件的那么用这个，对应的是参数中的MultipartFile upimg名称,这个名称即上传到浏览器的参数名称
       editor.config.uploadFileName = "multipartFiles";//这个需要和后台商量上传图片的名称
       //设置请求体额外参数
-      editor.config.uploadImgParams = {
-        appCode: 'ebtp-cloud-frontend',
-        objectId: '1546325338156965888',
-      };
+      if (useImage) {
+        if (isEmpty(imageId)) {
+          createNewFileBid().then(res => {//获取雪花id
+            editor.config.uploadImgParams = {
+              appCode: 'ebtp-cloud-frontend',
+              objectId: res?.id,
+            };
+            objectId.current = res?.id;
+          })
+        } else {
+          editor.config.uploadImgParams = {
+            appCode: 'ebtp-cloud-frontend',
+            objectId: imageId,
+          };
+          objectId.current = imageId;
+        }
+      }
       // 将 timeout 时间改为 60s
       editor.config.uploadImgTimeout = 60000;
-      // 将图片大小限制为 500k
-      editor.config.uploadImgMaxSize = 500 * 1024;
+      // 将图片大小限制为 600k
+      editor.config.uploadImgMaxSize = 600 * 1024;
       // 限制一次最多上传 1 张图片
       editor.config.uploadImgMaxLength = 1;
       //上传图片的错误提示默认使用alert弹出,也可以自定义用户体验更好的提示方式
       editor.config.customAlert = function (info: string) {
-        const repinfo = info.replace(/0.48828125M/g, '500K');
+        const repinfo = info.replace(/0.5859375M/g, '600K');
         // info 是需要提示的内容
         message.error(repinfo);
       };
       // 上传图片的结果反馈
       editor.config.uploadImgHooks = {
         before: function (xhr: any, editor: any, files: any) {
-          console.log('before xhr', xhr);
-          console.log('before files', files);
-          setLoading(true);
           // 图片上传之前触发
           // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
           // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
@@ -118,6 +138,16 @@ const BraftText: React.FC = (props) => {
           // msg: '放弃上传'
           // }
           // console.log("before:",xhr)
+          if (isEmpty(objectId.current)) {
+            return {
+              prevent: true,
+              msg: '上传失败，原因：上传参数错误'
+            }
+          }
+          setLoading(true);
+          return {
+            prevent: false,
+          }
         },
         success: function (xhr: any, editor: any, result: any) {
           // 图片上传并返回结果，图片插入成功之后触发
@@ -143,7 +173,6 @@ const BraftText: React.FC = (props) => {
           // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
           // insertImg 是插入图片的函数，参数editor 是编辑器对象，result 是服务器端返回的结果
           // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
-          console.log('customInsert result', result)
           if (result?.success) {
             const url = pictureDisplayPath + '?filePath=' + result.data[0].sysStorageVO.filePath;
             insertImg(url);
@@ -182,6 +211,7 @@ const BraftText: React.FC = (props) => {
     getHtml,
     getHtml1,
     makeDis,
+    getImageId,
   }));
 
   // 获取html方法1
@@ -214,6 +244,11 @@ const BraftText: React.FC = (props) => {
   const triggerChange = (newHtml: any) => {
     onChange?.(newHtml);
   };
+
+  //获取富文本图片objectId
+  function getImageId() {
+    return objectId.current;
+  }
   return (
     
       

diff --git a/src/pages/MainPage/ProjectManager/components/WangEditor.tsx b/src/pages/MainPage/ProjectManager/components/WangEditor.tsx
index 41e7579..025fa87 100644
--- a/src/pages/MainPage/ProjectManager/components/WangEditor.tsx
+++ b/src/pages/MainPage/ProjectManager/components/WangEditor.tsx
@@ -7,6 +7,7 @@ import { isEmpty } from '@/utils/CommonUtils';
 const Editor: React.FC<{}> = () => {
     const braftRef = useRef(null);
     const [text, setText] = useState();
+    const [code, setCode] = useState();
     const { Text, Paragraph } = Typography;
     return (
          = () => {
             headerBordered
         >
             
-                 setText(value)} />
+                 setText(value)} useImage />
             
-            
+            
+                    {code}
+                    
+                
+            }>
                 {isEmpty(text) ? '没有' : (