From 49d3ee271b9c1538aa4059d7593a05b37844e242 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=92=83=E7=99=BD?= <18511759309@163.com>
Date: Tue, 31 Aug 2021 15:10:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=B7=BB=E5=8A=A0=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E6=A0=8F=E6=B3=A8=E5=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   | 46 +++++++++-----
 src/assets/style/iconfont.less                |  6 +-
 .../content/components/help-doc.vue           |  8 +--
 src/components/footer/upload-files.vue        |  2 +-
 .../header/components/tool-button.vue         | 42 ++++++++-----
 src/components/header/md-header.vue           | 44 +++++++------
 src/main.js                                   | 62 ++++---------------
 7 files changed, 103 insertions(+), 107 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index bcf1948..dfc7017 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,7 +17,9 @@
       :disabled="disabled"
       :fullScreen.sync="fullScreen"
       :themeOptions="themeOptions"
-      :uploadPercent="uploadPercent"
+      :uploadImgPercent="uploadImgPercent"
+      :uploadVideoPercent="uploadVideoPercent"
+      :registerTools="registerTools"
       @upload="handleUpload"
       @getFormatType="formatType = $event"
       @updateShowHelp="showHelp = $event"
@@ -166,6 +168,11 @@ export default {
       type: Object,
       default: () => {}
     },
+    // 自定义工具栏
+    registerTools: {
+      type: Array,
+      default: () => []
+    },
     // 行高度
     rows: {
       type: [Number, String],
@@ -211,16 +218,25 @@ export default {
     uploadImgCallBack() {
       const _this = this;
       return function({ url, file: { name } }) {
-        const originalText = _this.text;
-        const selectionInfo = _this.selectionInfo;
-        const newText = formatText(
-          originalText,
-          selectionInfo,
-          "\n![img](",
-          `${url} "=600 #left")\n`
+        if (isNaN(parseInt(url))) {
+          const originalText = _this.text;
+          const selectionInfo = _this.selectionInfo;
+          const newText = formatText(
+            originalText,
+            selectionInfo,
+            "\n![img](",
+            `${url} "=600 #left")\n`
+          );
+          _this.text = newText;
+          _this.$refs.mdUploadFile.value = "";
+          _this.uploadImgPercent = 100;
+        } else {
+          _this.uploadImgPercent = parseInt(url);
+        }
+        _this.$refs["md_header" + _this.id].loading(
+          "img",
+          _this.uploadImgPercent
         );
-        _this.text = newText;
-        _this.$refs.mdUploadFile.value = "";
       };
     },
     uploadFileCallBack() {
@@ -252,13 +268,13 @@ export default {
           );
           _this.text = newText;
           _this.$refs.mdUploadFile.value = "";
-          _this.uploadPercent = 100;
+          _this.uploadVideoPercent = 100;
         } else {
-          _this.uploadPercent = parseInt(url);
+          _this.uploadVideoPercent = parseInt(url);
         }
         _this.$refs["md_header" + _this.id].loading(
           "video",
-          _this.uploadPercent
+          _this.uploadVideoPercent
         );
       };
     }
@@ -277,7 +293,9 @@ export default {
       formatType: "",
       htmlMinHeight: 150,
       showHelp: false,
-      uploadPercent: 0,
+      uploadImgPercent: 0,
+      uploadFlePercent: 0,
+      uploadVideoPercent: 0,
       textLength: "",
       userList: false,
       callUserList: [],
diff --git a/src/assets/style/iconfont.less b/src/assets/style/iconfont.less
index 1cb9bba..4f48fbe 100644
--- a/src/assets/style/iconfont.less
+++ b/src/assets/style/iconfont.less
@@ -47,7 +47,7 @@
   content: "\eaef";
 }
 
-.icon-tupian:before {
+.icon-img:before {
   content: "\e7ed";
 }
 
@@ -107,7 +107,7 @@
   content: "\e503";
 }
 
-.icon-wenjian:before {
+.icon-file:before {
   content: "\e607";
 }
 
@@ -119,7 +119,7 @@
   content: "\e6be";
 }
 
-.icon-shipin:before {
+.icon-video:before {
   content: "\e63c";
 }
 .icon-biaoti:before {
diff --git a/src/components/content/components/help-doc.vue b/src/components/content/components/help-doc.vue
index b746dcb..7cfa97d 100644
--- a/src/components/content/components/help-doc.vue
+++ b/src/components/content/components/help-doc.vue
@@ -69,22 +69,22 @@ export default {
         {
           title: "图片",
           doc: "![alt](url)",
-          icon: "tupian"
+          icon: "img"
         },
         {
           title: "图片大小",
           doc: '![alt](url "=300x200")',
-          icon: "tupian"
+          icon: "img"
         },
         {
           title: "图片位置",
           doc: '![alt](url "#left")',
-          icon: "tupian"
+          icon: "img"
         },
         {
           title: "图片名称",
           doc: '![alt](url "%title")',
-          icon: "tupian"
+          icon: "img"
         },
         {
           title: "代码",
diff --git a/src/components/footer/upload-files.vue b/src/components/footer/upload-files.vue
index 2959fe6..8c9d91c 100644
--- a/src/components/footer/upload-files.vue
+++ b/src/components/footer/upload-files.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="upload_files" @click="$refs.mdUploadFile.click()">
-    <span class="icon iconfont icon-tupian"></span>
+    <span class="icon iconfont icon-img"></span>
     <input
       ref="mdUploadFile"
       class="md_upload"
diff --git a/src/components/header/components/tool-button.vue b/src/components/header/components/tool-button.vue
index 32c8a3c..d2b934e 100644
--- a/src/components/header/components/tool-button.vue
+++ b/src/components/header/components/tool-button.vue
@@ -10,11 +10,19 @@
     <div key="loading" class="tool_button loading_button">
       <span class="circle">
         <span class="loading"></span>
-        <span class="percent">{{ uploadPercent + "%" }}</span>
+        <span class="percent">{{ info.percent + "%" }}</span>
       </span>
       <!-- <span :class="['icon loading iconfont', `icon-${info.icon}`]"> </span> -->
     </div>
   </transition-group>
+  <div
+    class="tool_button"
+    @click="info.click"
+    v-tip.bottom="info.tip"
+    v-else-if="info.register"
+  >
+    <img :src="info.icon" alt="" />
+  </div>
   <div
     v-else-if="info.name === 'code'"
     @click="handleTool(info.name, info.startStr, info.endStr)"
@@ -48,15 +56,17 @@
       <span :class="['icon iconfont', `icon-${info.icon}`]"></span>
     </div>
   </transition-group>
-  <div
-    v-else
-    v-tip.bottom="options"
-    @click="handleTool(info.name, info.startStr, info.endStr)"
-    @dblclick="handleDbClick(info.name)"
-    class="tool_button"
-  >
-    <span :class="['icon iconfont', `icon-${info.icon}`]"></span>
-  </div>
+  <transition-group name="loading" v-else>
+    <div
+      key="tool"
+      v-tip.bottom="options"
+      @click="handleTool(info.name, info.startStr, info.endStr)"
+      @dblclick="handleDbClick(info.name)"
+      class="tool_button"
+    >
+      <span :class="['icon iconfont', `icon-${info.icon}`]"></span>
+    </div>
+  </transition-group>
 </template>
 <script>
 import { checkBoswer } from "@/assets/js/utils";
@@ -95,10 +105,6 @@ export default {
     ulNum: {
       type: Number,
       default: 1
-    },
-    uploadPercent: {
-      type: Number,
-      default: 0
     }
   },
   data() {
@@ -322,7 +328,11 @@ export default {
       white-space: nowrap;
     }
   }
-
+  img {
+    width: 18px;
+    display: inline-block;
+    vertical-align: text-bottom;
+  }
   .icon {
     font-size: 18px;
     color: var(--md-editor-text-color);
@@ -355,7 +365,7 @@ export default {
       font-size: 16px;
     }
     &.icon-help,
-    &.icon-wenjian {
+    &.icon-file {
       font-size: 19px;
     }
   }
diff --git a/src/components/header/md-header.vue b/src/components/header/md-header.vue
index 6fcbd6e..a558271 100644
--- a/src/components/header/md-header.vue
+++ b/src/components/header/md-header.vue
@@ -36,7 +36,6 @@
         :zIndex="zIndex"
         :themeOptions="themeOptions"
         :selectionInfo="selectionInfo"
-        :uploadPercent="uploadPercent"
       />
     </div>
   </div>
@@ -86,6 +85,10 @@ export default {
       type: Object,
       default: () => {}
     },
+    registerTools: {
+      type: Array,
+      default: () => []
+    },
     zIndex: {
       type: [String, Number],
       default: ""
@@ -101,10 +104,6 @@ export default {
     selectionInfo: {
       type: Object,
       default: () => {}
-    },
-    uploadPercent: {
-      type: Number,
-      default: 0
     }
   },
   computed: {
@@ -124,7 +123,6 @@ export default {
   watch: {
     fullScreen: {
       handler: function(val) {
-        // console.log(val);
         if (val) {
           this.toolButtonList.pop();
           this.toolButtonList.push(this.cancelFullScreenBtn);
@@ -148,6 +146,20 @@ export default {
       handler: function(val) {
         this.$emit("getFormatType", val);
       }
+    },
+    registerTools: {
+      handler: function(val) {
+        const list = this.toolButtonList;
+        const tableIndex = list.findIndex(item => item.name === "table");
+        this.toolButtonList.splice(
+          tableIndex,
+          0,
+          ...val.map(item => {
+            item.register = true;
+            return item;
+          })
+        );
+      }
     }
   },
   data() {
@@ -237,21 +249,21 @@ export default {
         },
         {
           name: "img",
-          icon: "tupian",
+          icon: "img",
           tip: "上传图片",
           startStr: "",
           endStr: ""
         },
         {
           name: "file",
-          icon: "wenjian",
+          icon: "file",
           tip: "上传附件",
           startStr: "",
           endStr: ""
         },
         {
           name: "video",
-          icon: "shipin",
+          icon: "video",
           tip: "上传视频",
           startStr: "",
           endStr: ""
@@ -296,16 +308,10 @@ export default {
   methods: {
     loading(type, percent) {
       const list = this.toolButtonList;
-      switch (type) {
-        case "video":
-          list.find(item => item.name === type).icon =
-            parseInt(percent) === 100 || parseInt(percent) === 0
-              ? "shipin"
-              : "loading";
-          break;
-        default:
-          break;
-      }
+      const item = list.find(item => item.name === type);
+      this.$set(item, "percent", percent);
+      item.icon =
+        parseInt(percent) === 100 || parseInt(percent) === 0 ? type : "loading";
     },
     resetUlNum() {
       this.ulNum = 1;
diff --git a/src/main.js b/src/main.js
index 3ef0e6b..57ac4af 100644
--- a/src/main.js
+++ b/src/main.js
@@ -35,6 +35,7 @@ function initMdEditor(obj) {
     maxLength,
     showWordLimit,
     throttle = 600,
+    registerTools = [],
     canPreview,
     canAttachFile,
     themeOptions,
@@ -61,6 +62,7 @@ function initMdEditor(obj) {
     zIndex,
     disabled,
     tabSize,
+    registerTools,
     setPreview: false,
     setFullScreen: false,
     focus: false,
@@ -122,56 +124,6 @@ function initMdEditor(obj) {
     queryUserList({ keyWord, callback }) {
       if (!queryUserList) return callback(false); // 返回false则不触发@弹窗
       queryUserList(keyWord, function(res) {
-        // const list = [
-        //   {
-        //     id: 1,
-        //     name: "藤原拓海",
-        //     avatar:
-        //       "https://img2.baidu.com/it/u=2380211986,3979961921&fm=26&fmt=auto&gp=0.jpg"
-        //   },
-        //   {
-        //     id: 2,
-        //     name: "高桥凉介",
-        //     avatar:
-        //       "https://img0.baidu.com/it/u=777620324,2343967729&fm=26&fmt=auto&gp=0.jpg"
-        //   },
-        //   {
-        //     id: 3,
-        //     name: "马奎斯",
-        //     avatar:
-        //       "https://img2.baidu.com/it/u=1297316011,1869565258&fm=26&fmt=auto&gp=0.jpg"
-        //   },
-        //   {
-        //     id: 4,
-        //     name: "王一博",
-        //     url: "https://weibo.com/u/5492443184",
-        //     avatar:
-        //       "https://img2.baidu.com/it/u=298051053,3773223854&fm=26&fmt=auto&gp=0.jpg"
-        //   },
-        //   {
-        //     id: 5,
-        //     name: "王俊凯",
-        //     url: "https://weibo.com/tfwangjunkai",
-        //     avatar:
-        //       "https://img1.baidu.com/it/u=2378425879,2273515018&fm=26&fmt=auto&gp=0.jpg"
-        //   },
-        //   {
-        //     id: 6,
-        //     name: "易烊千玺",
-        //     url: "https://weibo.com/tfyiyangqianxi",
-        //     avatar:
-        //       "https://img0.baidu.com/it/u=2227200088,1939721201&fm=26&fmt=auto&gp=0.jpg"
-        //   },
-        //   {
-        //     id: 7,
-        //     name: "白敬亭",
-        //     url: "https://weibo.com/u/2112496475",
-        //     avatar:
-        //       "https://img1.baidu.com/it/u=3265411836,2089649447&fm=11&fmt=auto&gp=0.jpg"
-        //   }
-        // ];
-        // callback(res);
-
         const list = res;
         if (!keyWord) return callback(list);
         callback(
@@ -229,6 +181,16 @@ function initMdEditor(obj) {
     this.vEl.$forceUpdate();
   };
 
+  this.registerTools = function(option) {
+    props.registerTools = [];
+    if (Array.isArray(option)) {
+      props.registerTools.push(...option);
+    } else {
+      props.registerTools.push(option);
+    }
+    this.vEl.$forceUpdate();
+  };
+
   this.toggleTab = function(setPreview) {
     if (setPreview !== "edit" && setPreview !== "preview") {
       props.setPreview = !props.setPreview;
-- 
GitLab