From 7ce2d6edb7215a9b4c5e5d75856d43063da45ad9 Mon Sep 17 00:00:00 2001 From: dj <1042039504@qq.com> Date: Thu, 19 Dec 2024 22:26:17 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=A4=9A=E5=9B=BE?= =?UTF-8?q?=E7=89=87=E4=B8=8A=E4=BC=A0=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/upfiles.html | 52 +++++++------ src/assets/axupimgs/plugin.js | 139 +++++++++++++++++----------------- src/components/Tinymce.vue | 73 +++++++++++------- 3 files changed, 146 insertions(+), 118 deletions(-) diff --git a/public/upfiles.html b/public/upfiles.html index 7f8f62c..b9b9e9e 100644 --- a/public/upfiles.html +++ b/public/upfiles.html @@ -42,7 +42,7 @@
-
+
@@ -54,7 +54,6 @@ blobInfo.blob = function(){return this.file;} var upload_handler = axupimgs.images_upload_handler; var upload_base_path = axupimgs.images_upload_base_path; - //为列表添加排序 function reSort(){ document.querySelectorAll('#file_list li').forEach((el,i)=>{ @@ -74,8 +73,17 @@ li.setAttribute('data-time',file.lastModified); li.innerHTML='
'+file.name+'
'; vDom.appendChild(li); + } + document.querySelector('#file_list').appendChild(vDom); + if(axupimgs.res.length>0){ + document.querySelectorAll('#file_list li.up-no').forEach((el,i)=>{ + el.classList ? el.classList.add('up-now') : el.className+=' up-now'; + }); + upAllFiles(0); + } + //reSort(); } @@ -134,7 +142,7 @@ file_i = n; if(len == n){ file_i=0; - document.querySelector('#topbar .upall').innerText='全部上传'; + // document.querySelector('#topbar .upall').innerText='全部上传'; return true; } if( axupimgs.res[n].url!='' ){ @@ -142,9 +150,8 @@ upAllFiles(n) }else{ blobInfo.file=axupimgs.res[n].file; - upload_handler(blobInfo,function(url){ + upload_handler(blobInfo,function(url,name){ if(upload_base_path){ - if(upload_base_path.slice(-1)=='/' && url.substr(0,1)=='/' ){ url = upload_base_path + url.slice(1); }else if(upload_base_path.slice(-1)!='/' && url.substr(0,1)!='/' ){ @@ -154,33 +161,34 @@ } } axupimgs.res[file_i].url = url; - filename = url.split('/').pop(); + // filename = url.split('/').pop(); + filename = name var li = document.querySelectorAll('#file_list li')[file_i]; li.setAttribute('class','up-over'); li.querySelector('.namebox span').innerText = filename; n++ upAllFiles(n); },function(err){ - document.querySelector('#topbar .upall').innerText='全部上传'; - document.querySelectorAll('#file_list li.up-now').forEach((el,i)=>{ - el.setAttribute('class','up-no'); - }); - alert(err); + // document.querySelector('#topbar .upall').innerText='全部上传'; + // document.querySelectorAll('#file_list li.up-now').forEach((el,i)=>{ + // el.setAttribute('class','up-no'); + // }); + // alert(err); }); } } - - document.querySelector('#topbar .upall').addEventListener('click',(e)=>{ - if(e.target.innerText!='全部上传'){return false;} - if(axupimgs.res.length>0){ - document.querySelectorAll('#file_list li.up-no').forEach((el,i)=>{ - el.classList ? el.classList.add('up-now') : el.className+=' up-now'; - }); - e.target.innerText='上传中...'; - upAllFiles(0); - } - }); + // + // document.querySelector('#topbar .upall').addEventListener('click',(e)=>{ + // if(e.target.innerText!='全部上传'){return false;} + // if(axupimgs.res.length>0){ + // document.querySelectorAll('#file_list li.up-no').forEach((el,i)=>{ + // el.classList ? el.classList.add('up-now') : el.className+=' up-now'; + // }); + // e.target.innerText='上传中...'; + // upAllFiles(0); + // } + // }); var observ_flist = new MutationObserver( (muList,observe)=>{ if(muList[0].addedNodes.length>0){ diff --git a/src/assets/axupimgs/plugin.js b/src/assets/axupimgs/plugin.js index 5eab499..cd9ee75 100644 --- a/src/assets/axupimgs/plugin.js +++ b/src/assets/axupimgs/plugin.js @@ -1,76 +1,77 @@ -tinymce.PluginManager.add('axupimgs', function(editor, url) { - var pluginName='多图片上传'; - window.axupimgs={}; //扔外部公共变量，也可以扔一个自定义的位置 - const baseURL = import.meta.env.VITE_BASE_URL +tinymce.PluginManager.add('axupimgs', function (editor, url) { + var pluginName = '多图片上传'; + window.axupimgs = {}; //扔外部公共变量，也可以扔一个自定义的位置 + const baseURL = import.meta.env.VITE_BASE_URL - // var baseURL=tinymce.baseURL; - var iframe1 = '/upfiles.html'; - axupimgs.images_upload_handler = editor.getParam('images_upload_handler', undefined, 'function'); - axupimgs.images_upload_base_path = editor.getParam('images_upload_base_path', '','string'); + // var baseURL=tinymce.baseURL; + var iframe1 = '/upfiles.html'; + console.log('editor',editor) + axupimgs.images_upload_handler = editor.getParam('images_upload_handler_not_loading', undefined, 'function'); + axupimgs.images_upload_base_path = editor.getParam('images_upload_base_path', '', 'string'); axupimgs.axupimgs_filetype = editor.getParam('axupimgs_filetype', '.png,.gif,.jpg,.jpeg', 'string'); - axupimgs.res=[]; - var openDialog = function() { - return editor.windowManager.openUrl({ - title: pluginName, - size: 'large', - url:iframe1, - buttons: [ - { - type: 'cancel', - text: 'Close' - }, - { - type: 'custom', - text: 'Save', - name: 'save', - primary: true - }, - ], - onAction: function (api, details) { - switch (details.name) { - case 'save': - var html = ''; - var imgs = axupimgs.res; - var len = imgs.length; - for(let i=0;i'; - } - } - editor.insertContent(html); - axupimgs.res=[]; - api.close(); - break; - default: - break; - } + axupimgs.res = []; + var openDialog = function () { + return editor.windowManager.openUrl({ + title: pluginName, + size: 'large', + url: iframe1, + buttons: [ + { + type: 'cancel', + text: 'Close' + }, + { + type: 'custom', + text: 'Save', + name: 'save', + primary: true + }, + ], + onAction: function (api, details) { + switch (details.name) { + case 'save': + var html = ''; + var imgs = axupimgs.res; + var len = imgs.length; + for (let i = 0; i < len; i++) { + if (imgs[i].url) { + html += ''; + } + } + editor.insertContent(html); + axupimgs.res = []; + api.close(); + break; + default: + break; + } - } - }); - }; + } + }); + }; - editor.ui.registry.getAll().icons.axupimgs || editor.ui.registry.addIcon('axupimgs',''); + editor.ui.registry.getAll().icons.axupimgs || editor.ui.registry.addIcon('axupimgs', ''); - editor.ui.registry.addButton('axupimgs', { - icon: 'axupimgs', + editor.ui.registry.addButton('axupimgs', { + icon: 'axupimgs', tooltip: pluginName, - onAction: function() { - openDialog(); - } - }); - editor.ui.registry.addMenuItem('axupimgs', { - icon: 'axupimgs', - text: '图片批量上传...', - onAction: function() { - openDialog(); - } - }); - return { - getMetadata: function() { - return { - name: pluginName, - url: "http://tinymce.ax-z.cn/more-plugins/axupimgs.php", - }; - } - }; + onAction: function () { + openDialog(); + } + }); + editor.ui.registry.addMenuItem('axupimgs', { + icon: 'axupimgs', + text: '图片批量上传...', + onAction: function () { + openDialog(); + } + }); + return { + getMetadata: function () { + return { + name: pluginName, + url: "http://tinymce.ax-z.cn/more-plugins/axupimgs.php", + }; + } + }; }); diff --git a/src/components/Tinymce.vue b/src/components/Tinymce.vue index f2b612a..f9fa88d 100644 --- a/src/components/Tinymce.vue +++ b/src/components/Tinymce.vue @@ -70,11 +70,11 @@ const props = defineProps({ type: [String, Array], default: "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;" }, - width:{ + width: { type: String, default: 'auto' }, - height:{ + height: { type: Number, default: 500 } @@ -90,7 +90,7 @@ const init = reactive({ placeholder: "在这里输入文字", //textarea中的提示信息 min_width: 300, min_height: 200, - width:props.width, + width: props.width, height: props.height, //注：引入autoresize插件时，此属性失效 resize: "both", //编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号 promotion: false, @@ -117,9 +117,15 @@ const init = reactive({ let formData = new FormData() formData.append('file', blobInfo.blob()) //上传图片接口 上传成功后返回图片地址，用于显示在富文本中 - uploadFile(formData, props.imageUrl, success) + uploadFile(formData, props.imageUrl, success, true) // }), }, + images_upload_handler_not_loading: (blobInfo, success) => { + let formData = new FormData() + formData.append('file', blobInfo.blob()) + //上传图片接口 + uploadFile(formData, props.imageUrl, success, false) + }, file_picker_callback: (callback, value, meta) => { // 使用案例http://tinymce.ax-z.cn/general/upload-images.php // meta.filetype //根据这个判断点击的是什么file image media @@ -141,34 +147,34 @@ const init = reactive({ let xhr, formData; xhr = new XMLHttpRequest(); xhr.withCredentials = false; - xhr.open('POST', import.meta.env.VITE_BASE_URL+props.imageUrl); + xhr.open('POST', import.meta.env.VITE_BASE_URL + props.imageUrl); xhr.setRequestHeader( - 'Authorization',getToken() + 'Authorization', getToken() ) - let loading= ElLoading.service({ + let loading = ElLoading.service({ lock: true, text: '文件上传中...', background: 'rgba(0, 0, 0, 0.7)', }) - xhr.onload = function() { + xhr.onload = function () { let res; // if (xhr.status != 200) { // failure('HTTP Error: ' + xhr.status); // return; // } res = JSON.parse(xhr.responseText); - ElNotification({ - title: '提示', - message: res.code === 1000 ? '上传成功' : '上传失败', - type: res.code === 1000 ? 'success' : 'error' - }) + ElNotification({ + title: '提示', + message: res.code === 1000 ? '上传成功' : '上传失败', + type: res.code === 1000 ? 'success' : 'error' + }) loading.close() const fileUrl = res.data.url; // '?fileId='+res.data.id+ - callback(fileUrl+'?fileName='+res.data.originalFilename, {text:file.name ,title: file.name }); + callback(fileUrl + '?fileName=' + res.data.originalFilename, {text: file.name, title: file.name}); }; formData = new FormData(); - formData.append('file', file, file.name ); + formData.append('file', file, file.name); xhr.send(formData); // // let reader = new FileReader(); @@ -192,12 +198,16 @@ const init = reactive({ watch(() => { emit("update:value", content.value); }); -const uploadFile = (formData, url,success) => { - let loading= ElLoading.service({ - lock: true, - text: '图片上传中...', - background: 'rgba(0, 0, 0, 0.7)', - }) +const uploadFile = (formData, url, success, isLoading) => { + let loading = null + if (isLoading) { + loading = ElLoading.service({ + lock: true, + text: '图片上传中...', + background: 'rgba(0, 0, 0, 0.7)', + }) + } + axios.post( import.meta.env.VITE_BASE_URL + url, formData, @@ -214,16 +224,24 @@ const uploadFile = (formData, url,success) => { let data = res.data if (data.code !== 1000) { ElMessage.error(data.msg) - loading.close() - }else { - success(data.data.url) - loading.close() + if (loading) { + loading.close() + } + } else { + if (isLoading) { + success(data.data.url) + } else { + success(data.data.url, data.data.originalFilename) + } + if (loading) { + loading.close() + } } }) } -