页面修改

src/components/editor/UeEditor.vue

@@ -62,6 +62,8 @@
         tempContent: this.value,
         isInputChange: false,
         uploadType: "1", //1-上传图片，2-上传附件,3-上传音频
+        //默认图片域名
+        defaultImgDomain: "http://imgfile.oytour.com/static/",
       };
     },
     watch: {
@@ -107,60 +109,74 @@
           let html = '';
           //图片
           if (this.uploadType == 1) {
-            for (let i in fileArray) {
-              html += '<img src="' + fileArray[i].fileUrl + '" style="max-width: 100%;">';
-            }
-            this.ue.execCommand('inserthtml', html);
+            fileArray.forEach(item => {
+              html += '<img src="' + item.fileUrl + '" style="max-width: 100%;">';
+            })
           }
           //附件
-          if (this.uploadType == 2) {
-            for (let i in fileArray) {
-              var type = fileArray[i].fileName.split('.')[1];
-              var imgUrl = "";
-              var dataName = "";
-              if (type == 'xlsx' || type == 'xls') {
-                imgUrl = "http://imgfile.oytour.com/static/excel.png";
-                dataName = "xls";
-              }
-              if (type == 'txt') {
-                imgUrl = "http://imgfile.oytour.com/static/txt.png";
-                dataName = "txt";
-              }
-              if (type == 'ppt' || type == 'pptx') {
-                imgUrl = "http://imgfile.oytour.com/static/ppt.png";
-                dataName = "ppt";
-              }
-              if (type == 'doc' || type == 'docx') {
-                imgUrl = "http://imgfile.oytour.com/static/word.png";
-                dataName = "doc";
-              }
-              if (type == 'mp3') {
-                imgUrl = "http://imgfile.oytour.com/static/video.png";
-                dataName = "mp3";
-              }
-              html +=
-                `<p><span contenteditable="false" style="display:-webkit-box;margin-top:10px;background: #F7F8FA;padding: 14px 16px;max-width: 572px;overflow: hidden;cursor:pointer;-webkit-box-align: center;text-align:left;cursor:pointer;" name="${fileArray[i].dataName}" data="${fileArray[i].fileName}">` +
-                `<img src="${imgUrl}" style="width:42px; height:42px; overflow:hidden; margin-right:14px;border-radius:4px;"><span style="font-size:14px; color:#181E33; line-height:20px; display:block; overflow:hidden;  text-overflow:ellipsis;">${fileArray[i].fileName}</span></span></p>`
-            }
-            this.ue.execCommand('inserthtml', html);
+          else if (this.uploadType == 2) {
+            fileArray.forEach(item => {
+              html += this.getIconContent(item);
+            })
           }
           //音频
-          if (this.uploadType == 3) {
-
+          else if (this.uploadType == 3) {
             fileArray.forEach(item => {
-              var musicObj = {
-                url: item.fileUrl,
-                width: 400,
-                height: 95,
-                align: "center",
-              }
-              console.log("musicObj", musicObj);
-              this.ue.execCommand('music', musicObj);
+              html += this.getIconContent(item);
             })
           }
+          if (html && html != '') {
+            this.ue.execCommand('inserthtml', html);
+          }
         }
         this.attachmentDialogVisible = false;
       },
+      //获取图标配置内容
+      getIconContent(item) {
+        var iconObj = this.getIcon(item.fileName);
+        return `<p><span contenteditable="false" style="display:-webkit-box;margin-top:10px;background: #F7F8FA;padding: 14px 16px;max-width: 572px;overflow: hidden;cursor:pointer;-webkit-box-align: center;text-align:left;cursor:pointer;" name="${iconObj.dataType}" data="${item.fileName}">` +
+          `<img src="${iconObj.iconUrl}" style="width:42px; height:42px; overflow:hidden; margin-right:14px;border-radius:4px;"><span style="font-size:14px; color:#181E33; line-height:20px; display:block; overflow:hidden;  text-overflow:ellipsis;">${item.fileName}</span></span></p>`;
+      },
+      //获取文件图标和类型
+      getIcon(fileName) {
+        var obj = {
+          iconUrl: "",
+          dataType: ""
+        }
+        if (!fileName) {
+          obj.iconUrl = this.defaultImgDomain + "file.png";
+          obj.dataType = "";
+          return obj;
+        }
+        var type = fileName.split('.')[1];
+        type = type.toLowerCase();
+        obj.dataType = type;
+        if (type === 'video' || type === 'svideo') {
+          obj.iconUrl = this.defaultImgDomain + "video.png";
+        } else if (type === 'txt' || type === 'text') {
+          obj.iconUrl = this.defaultImgDomain + "txt.png";
+        } else if (type === 'xls' || type === 'xlsx') {
+          obj.iconUrl = this.defaultImgDomain + "excel.png";
+        } else if (type === 'doc' || type === 'docx') {
+          obj.iconUrl = this.defaultImgDomain + "word.png";
+        } else if (type === 'zip' || type === 'rar' || type === 'gz') {
+          obj.iconUrl = this.defaultImgDomain + "zip.png";
+        } else if (type === 'mp3') {
+          obj.iconUrl = this.defaultImgDomain + "sound.png";
+        } else if (type === 'pdf') {
+          obj.iconUrl = this.defaultImgDomain + "pdf.png";
+        } else if (type === 'ppt' || type === 'pptx') {
+          obj.iconUrl = this.defaultImgDomain + "ppt.png";
+        } else if (type === 'avi' || type === 'rmvb' || type === '3gp' || type === 'mpg' ||
+          type === 'mpeg' || type === 'mov' || type === 'wmv' || type === 'asf' ||
+          type === 'mkv' || type === 'mp4' || type === 'vob' || type === 'f4v' ||
+          type === 'flv') {
+          obj.iconUrl = this.defaultImgDomain + "movie.png";
+        } else {
+          obj.iconUrl = this.defaultImgDomain + "unknown.png";
+        }
+        return obj;
+      },
       loadUe() {
         const _this = this;
         //上传附件