富文本支持上传附件

package.json

@@ -34,6 +34,7 @@
     "@vueuse/core": "^10.9.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.10",
+    "@wangeditor/plugin-upload-attachment": "^1.1.0",
     "@zxcvbn-ts/core": "^3.0.4",
     "animate.css": "^4.1.1",
     "axios": "^1.6.8",

pnpm-lock.yaml

@@ -32,6 +32,9 @@ importers:
       '@wangeditor/editor-for-vue':
         specifier: ^5.1.10
         version: 5.1.12(@wangeditor/editor@5.1.23)(vue@3.4.21(typescript@5.3.3))
+      '@wangeditor/plugin-upload-attachment':
+        specifier: ^1.1.0
+        version: 1.1.0(@uppy/core@2.3.4)(@wangeditor/editor@5.1.23)(snabbdom@3.6.2)
       '@zxcvbn-ts/core':
         specifier: ^3.0.4
         version: 3.0.4
@@ -2058,6 +2061,13 @@ packages:
       slate: ^0.72.0
       snabbdom: ^3.1.0
 
+  '@wangeditor/plugin-upload-attachment@1.1.0':
+    resolution: {integrity: sha512-K6SsV3Cv1g+Ob1xjRRQ13Sh3lcj3yAa/aXMaKKbaPI76rNZiOpyAGH/iVv5i9enmwbZql01IXpvhK+HtrikVyQ==}
+    peerDependencies:
+      '@uppy/core': ^2.1.5
+      '@wangeditor/editor': '>=5.1.16'
+      snabbdom: ^3.3.1
+
   '@wangeditor/table-module@1.1.4':
     resolution: {integrity: sha512-5saanU9xuEocxaemGdNi9t8MCDSucnykEC6jtuiT72kt+/Hhh4nERYx1J20OPsTCCdVr7hIyQenFD1iSRkIQ6w==}
     peerDependencies:
@@ -2717,6 +2727,9 @@ packages:
   dom7@3.0.0:
     resolution: {integrity: sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g==}
 
+  dom7@4.0.6:
+    resolution: {integrity: sha512-emjdpPLhpNubapLFdjNL9tP06Sr+GZkrIHEXLWvOGsytACUrkbeIdjO5g77m00BrHTznnlcNqgmn7pCN192TBA==}
+
   domelementtype@1.3.1:
     resolution: {integrity: sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==}
 
@@ -4612,6 +4625,9 @@ packages:
   ssr-window@3.0.0:
     resolution: {integrity: sha512-q+8UfWDg9Itrg0yWK7oe5p/XRCJpJF9OBtXfOPgSJl+u3Xd5KI328RUEvUqSMVM9CiQUEf1QdBzJMkYGErj9QA==}
 
+  ssr-window@4.0.2:
+    resolution: {integrity: sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==}
+
   stable@0.1.8:
     resolution: {integrity: sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==}
     deprecated: 'Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility'
@@ -7355,6 +7371,13 @@ snapshots:
       slate: 0.72.8
       snabbdom: 3.6.2
 
+  '@wangeditor/plugin-upload-attachment@1.1.0(@uppy/core@2.3.4)(@wangeditor/editor@5.1.23)(snabbdom@3.6.2)':
+    dependencies:
+      '@uppy/core': 2.3.4
+      '@wangeditor/editor': 5.1.23
+      dom7: 4.0.6
+      snabbdom: 3.6.2
+
   '@wangeditor/table-module@1.1.4(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2)':
     dependencies:
       '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2)
@@ -8068,6 +8091,10 @@ snapshots:
     dependencies:
       ssr-window: 3.0.0
 
+  dom7@4.0.6:
+    dependencies:
+      ssr-window: 4.0.2
+
   domelementtype@1.3.1: {}
 
   domelementtype@2.3.0: {}
@@ -10063,6 +10090,8 @@ snapshots:
 
   ssr-window@3.0.0: {}
 
+  ssr-window@4.0.2: {}
+
   stable@0.1.8: {}
 
   static-extend@0.1.2:

src/components/Editor/src/Editor.vue

@@ -7,6 +7,7 @@ import { isNumber } from '@/utils/is'
 import { ElMessage } from 'element-plus'
 import { useLocaleStore } from '@/store/modules/locale'
 import { getAccessToken, getTenantId } from '@/utils/auth'
+import { updateFile } from '@/api/infra/file/index.ts'
 
 defineOptions({ name: 'Editor' })
 
@@ -61,7 +62,7 @@ const handleCreated = (editor: IDomEditor) => {
 
 // 编辑器配置
 import { getExcludeKeys } from './util/toolbarConfig'
-const toolbarConfig = reactive({ excludeKeys: getExcludeKeys() })
+const toolbarConfig = reactive({  insertKeys: {index: 0, keys: ['uploadAttachment']}, excludeKeys: getExcludeKeys() })
 
 // 编辑器配置
 const editorConfig = computed((): IEditorConfig => {
@@ -91,7 +92,7 @@ const editorConfig = computed((): IEditorConfig => {
       autoFocus: false,
       scroll: true,
       MENU_CONF: {
-        ['uploadImage']: {
+        uploadImage: {
           server: import.meta.env.VITE_UPLOAD_URL,
           // 单个文件的最大体积限制，默认为 2M
           maxFileSize: 5 * 1024 * 1024,
@@ -146,6 +147,25 @@ const editorConfig = computed((): IEditorConfig => {
           customInsert(res: any, insertFn: InsertFnType) {
             insertFn(res.data, 'image', res.data)
           }
+        },
+        // 上传附件
+        uploadAttachment: {
+          allowedFileTypes: ['.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx', '.pdf', '.txt'],
+          customUpload(file: File, insertFn: Function) {
+            let formData = new FormData()
+            formData.append("file", file)
+            const name = file.name.split('.')[0]
+            updateFile(formData).then(res => {
+              if (res.code === 0) {
+                insertFn(name, res.data)
+              }
+            })
+          }
+        }
+      },
+      hoverbarKeys: {
+        attachment: {
+          menuKeys: ['downloadAttachment']
         }
       },
       uploadImgShowBase64: true

src/main.ts

@@ -42,6 +42,10 @@ import Logger from '@/utils/Logger'
 
 import VueDOMPurifyHTML from 'vue-dompurify-html' // 解决v-html 的安全隐患
 
+import { Boot } from '@wangeditor/editor'
+import attachmentModule from '@wangeditor/plugin-upload-attachment'
+Boot.registerModule(attachmentModule)
+
 // 创建实例
 const setupAll = async () => {
   const app = createApp(App)

src/views/mall/product/spu/form/InfoForm.vue

@@ -95,7 +95,7 @@ const formData = reactive<Spu>({
   picUrl: '', // 商品封面图
   sliderPicUrls: [], // 商品轮播图
   introduction: '', // 商品简介
-  type: '', // 商品类型
+  type: '0', // 商品类型
   brandId: undefined // 商品品牌
 })
 const rules = reactive({
@@ -118,7 +118,7 @@ watch(
       return
     }
     copyValueToTarget(formData, data)
-    if (data.type) emit('changeProductType', data.type)
+    emit('changeProductType', data?.type || '0')
   },
   {
     immediate: true