From 8276d04729fddcd81dd6a93a00b0db60b4ec245c Mon Sep 17 00:00:00 2001 From: jl-zhoujl2 Date: Wed, 13 Jul 2022 10:04:01 +0800 Subject: [PATCH] =?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) ? '没有' : (