From 00e9ed9c2c1dfa785eeb88391eb8577a90a1307f Mon Sep 17 00:00:00 2001
From: guoweijia <guowj@csdn.net>
Date: Sun, 6 Jun 2021 23:19:15 +0800
Subject: [PATCH] feat:upload

---
 src/App.vue                            | 32 ++++++++++++++++++++++----
 src/assets/js/utils.js                 | 12 ++++++++++
 src/components/content/md-textarea.vue | 15 ++++++++++++
 src/components/footer/upload-files.vue | 22 +++---------------
 src/components/header/tool-button.vue  | 13 +++--------
 src/main.js                            | 11 ++++++---
 src/store/index.js                     |  5 ++++
 7 files changed, 74 insertions(+), 36 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 77dd908..e7de36e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,8 @@
 <template>
   <div :class="['md_container', { active: isFocus }]">
     <markdown-header />
-    <markdownPreview v-if="showPreview" />
-    <markdown-editor v-else />
+    <markdownPreview v-show="showPreview" />
+    <markdown-editor v-show="!showPreview" />
     <markdown-footer
       :can-attach-file="canAttachFile"
       v-if="!showPreview && canAttachFile"
@@ -22,9 +22,33 @@ export default {
     markdownEditor,
     markdownPreview
   },
-
   computed: {
-    ...mapState(["showPreview", "isFocus", "canAttachFile"])
+    ...mapState([
+      "showPreview",
+      "isFocus",
+      "canAttachFile",
+      "text",
+      "html",
+      "fileList"
+    ])
+  },
+  watch: {
+    html: {
+      immediate: true,
+      handler: function(val) {
+        this.$emit("change", {
+          text: this.text,
+          html: this.html
+        });
+      }
+    },
+    fileList: {
+      immediate: false,
+      deep: true,
+      handler: function(val) {
+        this.$emit("upload", val);
+      }
+    }
   }
 };
 </script>
diff --git a/src/assets/js/utils.js b/src/assets/js/utils.js
index 5210d2a..92811cd 100644
--- a/src/assets/js/utils.js
+++ b/src/assets/js/utils.js
@@ -1,4 +1,7 @@
+import store from '@/store'
+
 // 获取选中文本信息
+
 export function getSelectionInfo(selectorId) {
   const selector = document.getElementById(selectorId);
   // const selection = window.getSelection();
@@ -22,6 +25,15 @@ export function formatText(text, selectionInfo, startStr = "", endStr = "") {
   );
 }
 
+//
+export function updateText(startStr, endStr) {
+  const selectionInfo = store.state.selectionInfo;
+  const originalText = store.state.text;
+  const newText = formatText(originalText, selectionInfo, startStr, endStr);
+  if (!newText) return;
+  store.commit("setText", newText);
+}
+
 // 初始化样式
 export function initStyle({
   borderColor,
diff --git a/src/components/content/md-textarea.vue b/src/components/content/md-textarea.vue
index 6c8a941..8b0b5cf 100644
--- a/src/components/content/md-textarea.vue
+++ b/src/components/content/md-textarea.vue
@@ -5,6 +5,7 @@
       @change="setText(textContent)"
       @focus="setFocus(true)"
       @blur="setFocus(false)"
+      @paste="pasteFile"
       v-model="textContent"
       rows="10"
     >
@@ -55,6 +56,19 @@ export default {
       const info = getSelectionInfo(this.id);
       if (!info) return;
       this.setSelectionInfo(info);
+    },
+    pasteFile(event) {
+      let fileList = [];
+      const items = (event.clipboardData || window.clipboardData).items;
+      for (let i = 0; i < items.length; i++) {
+        console.log(items[i]);
+        if (items[i].type.indexOf("image") !== -1) {
+          fileList.push(items[i].getAsFile());
+          break;
+        }
+      }
+      if (!fileList.length) return;
+      console.log(fileList);
     }
   }
 };
@@ -63,6 +77,7 @@ export default {
 .md_textarea {
   position: relative;
   padding: 10px 0;
+  background: #fff;
   &.fullScreen {
     position: fixed;
     width: 100vw;
diff --git a/src/components/footer/upload-files.vue b/src/components/footer/upload-files.vue
index 0d50afe..ebe19db 100644
--- a/src/components/footer/upload-files.vue
+++ b/src/components/footer/upload-files.vue
@@ -15,7 +15,7 @@
 </template>
 <script>
 import { mapState, mapMutations } from "vuex";
-import { formatText } from "@/assets/js/utils";
+
 export default {
   data() {
     return {};
@@ -24,26 +24,10 @@ export default {
     ...mapState(["text", "selectionInfo"])
   },
   methods: {
-    ...mapMutations(["setText"]),
+    ...mapMutations(["setText", "setFileList"]),
     upload(e) {
       const fileList = Array.from(e.target.files);
-      console.log(fileList);
-      fileList.forEach(item => {
-        console.log(item);
-        // const formData = new formData();
-        // formData.append("file", item);
-        this.updateText(
-          "![",
-          "](data:image/jpeg;base64,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AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/Z)"
-        );
-      });
-    },
-    updateText(startStr, endStr) {
-      const selectionInfo = this.selectionInfo;
-      const originalText = this.text;
-      const newText = formatText(originalText, selectionInfo, startStr, endStr);
-      if (!newText) return;
-      this.setText(newText);
+      this.setFileList(fileList);
     }
   }
 };
diff --git a/src/components/header/tool-button.vue b/src/components/header/tool-button.vue
index 299e16f..9de803f 100644
--- a/src/components/header/tool-button.vue
+++ b/src/components/header/tool-button.vue
@@ -9,7 +9,7 @@
 </template>
 <script>
 import { mapMutations, mapState } from "vuex";
-import { formatText } from "@/assets/js/utils";
+import { updateText } from "@/assets/js/utils";
 export default {
   props: {
     info: {
@@ -32,11 +32,11 @@ export default {
         case "ul":
         case "task":
         case "table":
-          this.updateText(startStr, endStr);
+          updateText(startStr, endStr);
           break;
         case "ol":
           let ulNum = this.ulNum;
-          this.updateText(`\n${ulNum++}. `, "");
+          updateText(`\n${ulNum++}. `, "");
           this.setUlNum(ulNum);
           break;
         case "fullScreen":
@@ -45,13 +45,6 @@ export default {
         default:
           break;
       }
-    },
-    updateText(startStr, endStr) {
-      const selectionInfo = this.selectionInfo;
-      const originalText = this.text;
-      const newText = formatText(originalText, selectionInfo, startStr, endStr);
-      if (!newText) return;
-      this.setText(newText);
     }
   }
 };
diff --git a/src/main.js b/src/main.js
index bb9fc7e..c47b99b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,13 +3,13 @@ import App from "./App";
 import store from "./store";
 import Vtip from "vtip";
 import "vtip/lib/index.min.css";
-import { initStyle, isNotEmpty } from "@/assets/js/utils";
+import { initStyle, isNotEmpty, updateText } from "@/assets/js/utils";
 import "@/assets/style/global.less";
 
 Vue.use(Vtip.directive);
 
 function initMdEditor(obj) {
-  const { el, onChange, canAttachFile, themeOptions } = obj;
+  const { el, onChange, onUpload, canAttachFile, themeOptions } = obj;
   if (!el || !document.querySelector(el)) throw new Error("请指定容器");
   if (isNotEmpty(themeOptions)) initStyle(themeOptions);
   if (isNotEmpty(canAttachFile))
@@ -17,11 +17,16 @@ function initMdEditor(obj) {
 
   new Vue({
     store,
-    render: h =>
+    render: (h) =>
       h(App, {
         on: {
           change(val) {
             onChange(val);
+          },
+          upload(val) {
+            onUpload(val, function(res) {
+              updateText("\n\n![img](", `${res})\n`);
+            });
           }
         }
       })
diff --git a/src/store/index.js b/src/store/index.js
index ac39f49..78d9194 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,5 +1,6 @@
 import Vue from "vue";
 import Vuex from "vuex";
+import { formatText } from "@/assets/js/utils";
 
 Vue.use(Vuex);
 
@@ -79,6 +80,7 @@ export default new Vuex.Store({
         tip: "全屏模式"
       }
     ],
+    fileList: "",
     ulNum: 1,
     text: `
 # 标题一标题一标题一
@@ -150,6 +152,9 @@ _斜体文字_
     },
     setCanAttachFile(state, val) {
       state.canAttachFile = val;
+    },
+    setFileList(state, val) {
+      state.fileList = val;
     }
   }
 });
-- 
GitLab