阅读量:1
实现功能：基于tinymce TinyMCE中文文档中文手册 拖拽图片排序，去掉全部上传按钮，点击保存上传图片并关闭弹窗，优化了一些交互提示
声明：本人不是做vue前端的，可能有些更好的方法实现拖拽或者其他一些开源库实现。
代码plugin.js：
tinymce.PluginManager.add('axupimgs', function(editor, url) { var pluginName='Ax多图片上传'; window.axupimgs={}; //扔外部公共变量，也可以扔一个自定义的位置 var baseURL=tinymce.baseURL; // var iframe1 = baseURL+'/plugins/axupimgs/upfiles.html'; var iframe1 = location.origin+'/tinymce/axupimgs/upfiles_new.html'; axupimgs.images_upload_handler = editor.getParam('images_upload_handler', 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() { isAddEventListener(true) return editor.windowManager.openUrl({ title: pluginName, size: 'large', url:iframe1, buttons: [ { type: 'custom', text: 'Close', name: 'close', }, { type: 'custom', text: 'Save', name: 'save', primary: true }, ], onAction: function (api, details) { switch (details.name) { case 'save': //发送给upfiles,上传图片 window.postMessage({ action: 'upLoadPictureFile' }, '*'); break; case 'close': window.postMessage({ action: 'closeUpLoadPictureFile' }, '*'); isAddEventListener(false) break; default: break; } }, }); }; //保存 function save() { // 链接插入富文本显示 var html = ''; var imgs = axupimgs.res; var len = imgs.length; for (let i = 0; i < len; i++) { if (imgs[i].url) { html += '<img src="' + imgs[i].url + '" />'; } } editor.insertContent(html); axupimgs.res = []; tinymce.activeEditor.windowManager.close() }; //处理消息 function handleMessage(event){ var data = event.data; if (data.action === 'savePictureFile') { save(); isAddEventListener(false) } } //添加监听 function isAddEventListener(isAdd){ if(isAdd){ // 接收来自 iframe1 的消息 window.addEventListener('message', handleMessage, false) }else{ window.removeEventListener('message',handleMessage, false) } } editor.ui.registry.getAll().icons.axupimgs || editor.ui.registry.addIcon('axupimgs','<svg viewBox="0 0 1280 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M1126.2,779.8V87.6c0-24-22.6-86.9-83.5-86.9H83.5C14.7,0.7,0,63.7,0,87.7v692c0,36.2,29.2,89.7,83.5,89.7l959.3-1.3c51.7,0,83.5-42.5,83.5-88.3zm-1044,4V86.3h961.6V783.7H82.2v0.1z" fill="#53565A"/><path d="M603,461.6L521.1,366.3,313,629.8,227.2,546.8,102.4,716.8H972.8v-170L768.2,235.2,603.1,461.6zM284.6,358.4a105.4,105.4,0,0,0,73.5-30c19.5-19.1,30.3-45,30.2-71.8,0-56.8-45.9-103-102.4-103-56.6,0-102.4,46.1-102.4,103C183.4,313.5,228,358.4,284.6,358.4z" fill="#9598A0"/><path d="M1197.7,153.6l-0.3,669.3s13.5,113.9-67.4,113.9H153.6c0,24.1,23.9,87.2,83.5,87.2h959.3c58.3,0,83.6-49.5,83.6-89.9V240.8c-0.1-41.8-44.9-87.2-82.3-87.2z" fill="#53565A"/></svg>'); 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", }; } }; }); htmlupfiles_new.html
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>axupimgs</title> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection" content="telephone=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <style> html, body { height: 100%; margin: 0; padding: 0; background: #fff; } ul { margin: 0; padding: 0; list-style: none; } #wrap { padding: 10px; } #topbar { padding: 10px 0; border-bottom: 1px solid #ccc; /* text-align: right; */ } #topbar button { margin: 0; margin-left: 5px; outline: none; padding: 4px 16px; box-sizing: border-box; display: inline-block; border: none; border-radius: 3px; text-align: center; cursor: pointer; font-size: 14px; line-height: 1.5; background-color: #f0f0f0; color: #223; } #topbar button.primary { background-color: #3d97d4; color: #fff; } #topbar button:hover { background-color: #207ab7; color: #fff; } #topbar button.addfile { float: right; } #file_list { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); padding-top: 10px; } #file_list:empty:after { content: '可以直接拖拽文件到这里'; color: #777; font-size: 0.8em; } #file_list li { position: relative; display: block; vertical-align: top; padding: 5px 5px; border-radius: 5px; } #file_list li.up-over {} #file_list li.up-now {} #file_list li.up-now:after { content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8) url(loading.gif) center center no-repeat; border-radius: 5px; z-index: 999; } #file_list li:hover { background-color: #ddd; } #file_list li .picbox { display: flex; flex: 0 0 auto; justify-content: center; overflow: hidden; position: relative; width: 100%; padding-top: 100%; align-items: center; } #file_list li .picbox img { display: block; max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } #file_list li.up-over .picbox:after { content: url('data:image/svg+xml;%20charset=utf8,%3Csvg%20viewBox%3D%220%200%201024%201024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M512%200C229.376%200%200%20229.376%200%20512s229.376%20512%20512%20512%20512-229.376%20512-512S794.624%200%20512%200z%22%20fill%3D%22%234AC711%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M855.552%20394.752l-358.4%20358.4a50.9952%2050.9952%200%200%201-72.192%200l-204.8-204.8c-18.944-19.968-18.944-51.2%200-71.168a50.5344%2050.5344%200%200%201%2072.192-1.024L460.8%20644.608l322.048-322.048c19.968-18.944%2051.2-18.944%2071.168%200%2020.48%2019.456%2020.992%2051.712%201.536%2072.192z%22%20fill%3D%22%23FFFFFF%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E'); position: absolute; bottom: 2px; right: 2px; z-index: 9; } #file_list li .tools { display: none; position: absolute; bottom: 5px; right: 5px; z-index: 99; } #file_list li:hover .tools { display: block; } #file_list li .tools .remove { cursor: pointer; } #file_list li .tools .remove:after { content: url('data:image/svg+xml;%20charset=utf8,%3Csvg%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M17%206h3a1%201%200%200%201%200%202h-1v11a3%203%200%200%201-3%203H8a3%203%200%200%201-3-3V8H4a1%201%200%201%201%200-2h3V5a3%203%200%200%201%203-3h4a3%203%200%200%201%203%203v1zm-2%200V5a1%201%200%200%200-1-1h-4a1%201%200%200%200-1%201v1h6zm2%202H7v11a1%201%200%200%200%201%201h8a1%201%200%200%200%201-1V8zm-8%203a1%201%200%200%201%202%200v6a1%201%200%200%201-2%200v-6zm4%200a1%201%200%200%201%202%200v6a1%201%200%200%201-2%200v-6z%22%3E%3C/path%3E%3C/svg%3E'); } #file_list li .namebox { font-size: 14px; line-height: 20px; max-height: 40px; overflow: hidden; padding: 5px 10px; text-align: center; display: flex; justify-content: center; align-items: flex-start; } #file_list li .namebox span { word-break: break-all; vertical-align: top; } #loading_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */ z-index: 1000; /* 确保遮罩层在最顶层 */ display: none; /* 初始隐藏 */ justify-content: center; align-items: center; display: flex; } .loading_spinner { border: 4px solid #f3f3f3; /* Light grey */ border-top: 4px solid #3498db; /* Blue */ border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; } .loading_text { margin-top: 10px; font-size: 16px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div id="wrap"> <div id="topbar"><button class="removeall">清空列表</button><button class="addfile primary">+ 添加文件</button></div> <ul id="file_list"></ul> </div> <!-- 加载遮罩层和动画 --> <div id="loading_overlay" style="display: none;"> <div class="loading_spinner"></div> <!-- <div class="loading_text">加载中...</div> --> </div> <script> var editor = parent.tinymce.activeEditor; var axupimgs = parent.axupimgs; axupimgs.res = []; //存放本地文件的数组 var blobInfo = { file: null } 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) => { el.setAttribute('data-num', i); }); } function addList(files) { var files_sum = files.length; var vDom = document.createDocumentFragment(); for (let i = 0; i < files_sum; i++) { let file = files[i]; let blobUrl = window.URL.createObjectURL(file) axupimgs.res.push({ file: file, blobUrl: blobUrl, url: '' }); let li = document.createElement('li'); li.setAttribute('class', 'up-no'); li.setAttribute('data-time', file.lastModified); li.setAttribute('draggable', 'true'); li.innerHTML = '<div class="picbox"><img src="' + blobUrl + '"></div><div class="namebox"><span>' + file.name + '</span></div><div class="tools"><a class="remove"></a></div>'; vDom.appendChild(li); } document.querySelector('#file_list').appendChild(vDom); } //清空列表 document.querySelector('#topbar .removeall').addEventListener('click', () => { if (axupimgs.res.length > 0) { if (confirm("确定清空列表吗")) { axupimgs.res = [] document.querySelectorAll('#file_list li').forEach((el, i) => { el.parentNode.removeChild(el) }); } } }); //是否内部拖动 var isInputDrag = false //拖拽添加 document.addEventListener('dragover', (e) => { e.stopPropagation(); e.preventDefault(); if (isInputDrag) { e.dataTransfer.dropEffect = 'move'; } else { e.dataTransfer.dropEffect = 'copy'; } }); document.addEventListener('dragend', (e) => { isInputDrag = false }); document.addEventListener('dragstart', (e) => { isInputDrag = true e.dataTransfer.effectAllowed = 'move'; var li = e.target.parentNode.parentNode; var n = li.getAttribute('data-num'); e.dataTransfer.setData('text/plain', n); }); document.addEventListener('drop', (e) => { e.stopPropagation(); e.preventDefault(); // 获取目标元素 let target = e.target; // 获取鼠标指针相对于目标元素的位置 let mouseX = e.clientX; let targetRect = target.getBoundingClientRect(); let targetCenterX = targetRect.left + targetRect.width / 2; var isLeft = true // 判断鼠标指针在目标元素的左侧还是右侧 if (mouseX < targetCenterX) { // 在左侧的处理逻辑 isLeft = true } else { isLeft = false // 在右侧的处理逻辑 } //内部拖拽 if (isInputDrag) { //拖拽有问题未完成（有时候切换不了位置） var li = e.target.parentNode.parentNode; if (li) { var oldData = e.dataTransfer.getData('text/plain'); try { var newData = li.getAttribute('data-num'); if (newData == null) { newData = e.target.parentNode.getAttribute('data-num') } // 可能会引发异常的代码块 } catch (error) { newData = e.target.parentNode.getAttribute('data-num') // 异常处理代码块 } console.log("打印切换位置:", oldData, newData) if (newData && oldData && (oldData != newData)) { var oldEl = document.querySelectorAll('#file_list li')[oldData]; var newEl = document.querySelectorAll('#file_list li')[newData]; if (newEl && oldEl) { if (newData !== oldData) { if (isLeft) { document.querySelector('#file_list').insertBefore(oldEl, newEl); } else { insertAfter(oldEl, newEl) } changePosition(oldData, newData, isLeft) } } } } return false } if (!e.dataTransfer.files) { return false; } var dropfiles = e.dataTransfer.files; if (!(dropfiles.length > 0)) { return false; } var exts = axupimgs.axupimgs_filetype.replace(/(\s)+/g, '').toLowerCase().split(','); var files = []; for (let file of dropfiles) { ext = file.name.split('.'); ext = '.' + ext[ext.length - 1]; for (let s of exts) { if (s == ext) { files.push(file); break; } } } if (files.length > 0) { addList(files) } }); //添加文件 document.querySelector('#topbar .addfile').addEventListener('click', () => { var input = document.createElement('input'); input.setAttribute('type', 'file'); input.setAttribute('multiple', 'multiple'); input.setAttribute('accept', axupimgs.axupimgs_filetype); input.click(); input.onchange = function () { var files = this.files; addList(files); } }); var file_i = 0; //功能: 在targetElement之后插入 新节点newElement function insertAfter(newElement, targetElement) { var parent = targetElement.parentNode; if (parent.lastChild == targetElement) { parent.appendChild(newElement); } else { parent.insertBefore(newElement, targetElement.nextSibling); } } //上传所有文件 function upAllFiles() { // isShowAddFile(false) isShowLoading(true) axupimgs.res.forEach((data, index) => { console.log(`Index ${index}: ${data.isUpLoad}`, data.url); //isUpLoad:undefined未上传 1成功 -1:失败 2:上传中 if (data.isUpLoad == undefined || data.isUpLoad == -1) { blobInfo.file = data.file; uploadFile(index, blobInfo) } }); } //单独上传文件 function uploadFile(index, blobInfo) { axupimgs.res[index].isUpLoad = 2; upload_handler(blobInfo, function (url) { 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) != '/') { url = upload_base_path + '/' + url; } else { url = upload_base_path + url; } } axupimgs.res[index].url = url; axupimgs.res[index].isUpLoad = 1; filename = url.split('/').pop(); var li = document.querySelectorAll('#file_list li')[index]; li.setAttribute('class', 'up-over'); li.querySelector('.namebox span').innerText = filename; window.parent.postMessage({ action: 'upLoadPictureFileProgress' }, '*'); }, function (err) { document.querySelectorAll('#file_list li.up-now').forEach((el, i) => { el.setAttribute('class', 'up-no'); }); axupimgs.res[index].isUpLoad = -1; window.parent.postMessage({ action: 'upLoadPictureFileProgress' }, '*'); var name = axupimgs.res[index].file.name if (alert("图片" + name + "上传失败:" + err)) { } }); } //判断是否全部上传 function checkisAllUpLoad() { const finedData = axupimgs.res.find(item => item.isUpLoad !== 1); if (finedData) { return false; } else { return true; } } //判断是否正在上传中 function checkisUpLoadLoading() { const finedData = axupimgs.res.find(item => item.isUpLoad === 2); if (finedData) { return true; } else { return false; } } //切换位置 function changePosition(oldIndex, newIndex, isLeft) { let oldData = axupimgs.res[oldIndex]; let newData = axupimgs.res[newIndex]; //右移 if (newIndex > oldIndex) { axupimgs.res.splice(oldIndex, 1); console.log("axupimgs.res-右移", isLeft, oldIndex, newIndex) axupimgs.res.splice(isLeft ? newIndex - 1 : newIndex, 0, oldData); } //左移 if (newIndex < oldIndex) { axupimgs.res.splice(oldIndex, 1); console.log("axupimgs.res-左移", isLeft, oldIndex, newIndex) if (!isLeft) { if (newIndex >= axupimgs.res.length) { newIndex = newIndex } else { newIndex++ } } axupimgs.res.splice(newIndex, 0, oldData); } axupimgs.res.forEach((element) => { console.log("name:", element.file.name); }); } //接收js发送的message window.parent.addEventListener('message', function (event) { var data = event.data; //上传图片 if (data.action === 'upLoadPictureFile') { 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'; }); if (checkisAllUpLoad()) { console.log("upLoadPictureFile-图片全部上传成功") window.parent.postMessage({ action: 'savePictureFile' }, '*'); } else { console.log("upLoadPictureFile-图片正在上传或者上传失败") upAllFiles(); } } else { if (confirm("暂未上传图片，确定要关闭吗")) { close(); } } } //进度 if (data.action === 'upLoadPictureFileProgress') { if (checkisAllUpLoad()) { window.parent.postMessage({ action: 'savePictureFile' }, '*'); } // isShowAddFile(!checkisUpLoadLoading()) isShowLoading(checkisUpLoadLoading()) } //关闭弹窗 if (data.action === 'closeUpLoadPictureFile') { checkClose(); } }, false); // 检测关闭弹窗 function checkClose() { console.log("checkClose", axupimgs.res) if (axupimgs.res.length > 0) { if (confirm("系统可不会保存您的编辑，确定要关闭吗")) { close(); } } else { close(); } } //关闭弹窗 function close() { window.parent.tinymce.activeEditor.windowManager.close(); } //是否显示添加文件按钮 function isShowAddFile(isShow) { document.querySelector('.addfile').style.display = isShow ? 'inline' : 'none'; } // 获取 loading 遮罩层元素 var loadingOverlay = document.getElementById('loading_overlay'); // 当需要显示 loading 时调用此函数 function isShowLoading(isShow) { loadingOverlay.style.display = isShow ? 'flex' : 'none'; // 显示遮罩层 document.body.style.pointerEvents = isShow ? 'none' : 'auto'; // 禁用页面点击事件 } var observ_flist = new MutationObserver((muList, observe) => { if (muList[0].addedNodes.length > 0) { muList[0].addedNodes.forEach((el) => { el.querySelector('.remove').addEventListener('click', (e) => { var li = e.target.parentNode.parentNode; var n = li.getAttribute('data-num'); var el = document.querySelectorAll('#file_list li')[n]; el.parentNode.removeChild(el); axupimgs.res.splice(n, 1); }); }); } reSort(); }); observ_flist.observe(document.querySelector('#file_list'), { childList: true }); </script> </body> </html>