7.11 富文本增加本地图片上传

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<WangType> = (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<WangType> = (props) => {
   const tools = [//工具栏
     'head',//标题
     'fontSize', //字号
-    'lineHeight', //行高
+    // 'lineHeight', //行高
     'foreColor', //颜色
     'bold', //加粗
     'italic', //斜体
@@ -41,12 +44,13 @@ const BraftText: React.FC<WangType> = (props) => {
     'strikeThrough', //文字删除线
     'indent', //缩进
     'justify', //文字对齐方式
+    'list', //列表
+    'image',//图片
     'undo', //撤销
-    'redo', //重做
+    'redo', //恢复
     'fullscreen', //全屏
 
     // 'emoticon',//表情
-    'image',//图片
     // 'video',//视频
     // 'table',//表格
     // 'todo',//待办
@@ -56,12 +60,12 @@ const BraftText: React.FC<WangType> = (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<WangType> = (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<WangType> = (props) => {
     onChange?.(newHtml);
   };
   return (
-    <div>
+    <Spin spinning={loading} tip={"上传中……"}>
-      {/* <Button onClick={() => { editor.enable() }}>全屏</Button>
+      <div>
-      <Button onClick={() => { editor.disable() }}>全屏</Button> */}
+        <div id="div1" style={{ textAlign: 'left' }}></div>
-      <div id="div1" style={{ textAlign: 'left' }}></div>
+      </div>
-    </div>
+    </Spin>
   )
 }
 export default BraftText

src/pages/MainPage/ProjectManager/components/WangEditor.tsx

@@ -14,10 +14,10 @@ const Editor: React.FC<{}> = () => {
             bordered
             headerBordered
         >
-            <ProCard title="文本域" colSpan="50%" extra={<Button type='primary' onClick={() => setText(braftRef.current?.getHtml())}>生成</Button>}>
+            <ProCard title="文本域" colSpan="50%">
-                <BraftText braftRef={braftRef} echo={''} disabled={false} height={600} />
+                <BraftText braftRef={braftRef} echo={''} disabled={false} height={600} onChange={(value) => setText(value)} />
             </ProCard>
-            <ProCard title="代码段">
+            <ProCard title="代码段" colSpan="50%">
                 {isEmpty(text) ? '没有' : (
                     <Paragraph>
                         <pre>