实现功能：基于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 += ''; 			} 		} 		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','');  	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

                                                    
         
清空列表+ 添加文件