diff --git a/.env.base b/.env.base index 1c695ec..a8c77b2 100644 --- a/.env.base +++ b/.env.base @@ -4,8 +4,8 @@ VITE_NODE_ENV=development VITE_DEV=true # 请求路径 -# VITE_BASE_URL='http://47.98.161.246:48080' -VITE_BASE_URL='http://114.215.207.150:48080' +VITE_BASE_URL='http://47.98.161.246:48080' +# VITE_BASE_URL='http://114.215.207.150:48080' # 高德地图key密钥 # 1寻驾 diff --git a/package.json b/package.json index 9cebdcb..a93eb5e 100644 --- a/package.json +++ b/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", diff --git a/src/components/Editor/src/Editor.vue b/src/components/Editor/src/Editor.vue index 33affc4..22df80b 100644 --- a/src/components/Editor/src/Editor.vue +++ b/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 diff --git a/src/main.js b/src/main.js index bb6458c..ee7185e 100644 --- a/src/main.js +++ b/src/main.js @@ -42,8 +42,13 @@ 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) diff --git a/yarn.lock b/yarn.lock index 20279a3..3d11f6f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2507,6 +2507,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" @@ -3738,6 +3745,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" @@ -7250,6 +7264,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"