sc

package.json

@@ -39,6 +39,7 @@
     "@vueuse/core": "^10.1.2",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.10",
+    "@wangeditor/plugin-upload-attachment": "^1.1.0",
     "@zxcvbn-ts/core": "^3.0.1",
     "animate.css": "^4.1.1",
     "axios": "^1.4.0",

src/components/Editor/src/Editor.vue

@@ -42,7 +42,11 @@ const props = defineProps({
         'undo', // 撤销
         'redo', // 重做
         'fullScreen'
-      ]
+      ],
+      insertKeys: {
+        index: 20, // 自定义插入的位置
+        keys: ['uploadAttachment'] // “上传附件”菜单
+      }
     })
   }
 })
@@ -104,6 +108,12 @@ const editorConfig = computed((): IEditorConfig => {
       },
       autoFocus: false,
       scroll: true,
+      // 在编辑器中，点击选中“附件”节点时，要弹出的菜单
+      hoverbarKeys: {
+        attachment: {
+          menuKeys: ['downloadAttachment'] // “下载附件”菜单
+        }
+      },
       MENU_CONF: {
         ['uploadImage']: {
           server: import.meta.env.VITE_UPLOAD_URL,
@@ -218,6 +228,52 @@ const editorConfig = computed((): IEditorConfig => {
           customInsert(res: any, insertFn: InsertFnType) {
             insertFn(res.data, 'video', res.data)
           }
+        },
+        uploadAttachment: {
+          server: import.meta.env.VITE_UPLOAD_URL,
+          timeout: 20 * 1000, // 2s
+
+          fieldName: 'file',
+          // meta: { token: 'xxx', a: 100 }, // 请求时附加的数据
+          // metaWithUrl: true, // meta 拼接到 url 上
+          // headers: { Accept: 'text/x-json' },
+          // 自定义增加 http  header
+          headers: {
+            Accept: '*',
+            Authorization: 'Bearer ' + getAccessToken(),
+            'tenant-id': getTenantId(),
+            'instance-id': getAppId()
+          },
+
+          maxFileSize: 20 * 1024 * 1024, // 20M
+
+          onBeforeUpload(file: File) {
+            console.log('onBeforeUpload', file)
+            return file // 上传 file 文件
+            // return false // 会阻止上传
+          },
+          onProgress(progress: number) {
+            console.log('onProgress', progress)
+          },
+          onSuccess(file: File, res: any) {
+            console.log('onSuccess', file, res)
+          },
+          onFailed(file: File, res: any) {
+            alert(res.message)
+            console.log('onFailed', file, res)
+          },
+          onError(file: File, err: Error, res: any) {
+            alert(err.message)
+            console.error('onError', file, err, res)
+          },
+          // 上传成功后，用户自定义插入文件
+          customInsert(res: any, file: File, insertFn: Function) {
+            console.log('customInsert', res)
+
+            // 插入附件到编辑器
+            insertFn(file.name, res.data)
+            // insertFn(res.data, `customInsert-${file.name}`, res.data)
+          }
         }
       },
       uploadImgShowBase64: true

src/main.js

@@ -41,9 +41,14 @@ import '@/plugins/tongji' // 百度统计
 
 import Logger from '@/utils/Logger'
 import VueDOMPurifyHTML from 'vue-dompurify-html'
+import { Boot } from '@wangeditor/editor'
+import attachmentModule from '@wangeditor/plugin-upload-attachment'
 
 // 创建实例
 const setupAll = async () => {
+  // 注册。要在创建编辑器之前注册，且只能注册一次，不可重复注册。
+  Boot.registerModule(attachmentModule)
+
   const app = createApp(App)
 
   await setupI18n(app)

yarn.lock

@@ -2502,6 +2502,13 @@
   resolved "https://registry.yarnpkg.com/@wangeditor/list-module/-/list-module-1.0.5.tgz#3fc0b167acddf885536b45fa0c127f9c6adaea33"
   integrity sha512-uDuYTP6DVhcYf7mF1pTlmNn5jOb4QtcVhYwSSAkyg09zqxI1qBqsfUnveeDeDqIuptSJhkh81cyxi+MF8sEPOQ==
 
+"@wangeditor/plugin-upload-attachment@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@wangeditor/plugin-upload-attachment/-/plugin-upload-attachment-1.1.0.tgz#a014de72703a9f3d5ae44a428ac01406640ac80a"
+  integrity sha512-K6SsV3Cv1g+Ob1xjRRQ13Sh3lcj3yAa/aXMaKKbaPI76rNZiOpyAGH/iVv5i9enmwbZql01IXpvhK+HtrikVyQ==
+  dependencies:
+    dom7 "^4.0.4"
+
 "@wangeditor/table-module@^1.1.4":
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/@wangeditor/table-module/-/table-module-1.1.4.tgz#757d4a5868b2b658041cd323854a4d707c8347e9"
@@ -3733,6 +3740,13 @@ dom7@^3.0.0:
   dependencies:
     ssr-window "^3.0.0-alpha.1"
 
+dom7@^4.0.4:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/dom7/-/dom7-4.0.6.tgz#091a51621d7a19ce0fb86045cafb3c10035e97ed"
+  integrity sha512-emjdpPLhpNubapLFdjNL9tP06Sr+GZkrIHEXLWvOGsytACUrkbeIdjO5g77m00BrHTznnlcNqgmn7pCN192TBA==
+  dependencies:
+    ssr-window "^4.0.0"
+
 domelementtype@1, domelementtype@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
@@ -7245,6 +7259,11 @@ ssr-window@^3.0.0-alpha.1:
   resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-3.0.0.tgz#fd5b82801638943e0cc704c4691801435af7ac37"
   integrity sha512-q+8UfWDg9Itrg0yWK7oe5p/XRCJpJF9OBtXfOPgSJl+u3Xd5KI328RUEvUqSMVM9CiQUEf1QdBzJMkYGErj9QA==
 
+ssr-window@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-4.0.2.tgz#dc6b3ee37be86ac0e3ddc60030f7b3bc9b8553be"
+  integrity sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==
+
 stable@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"