feat: import markdown content (#89)

* feat: import markdown content

* feat: alert success msg

* feat: alert error msg

src/assets/scripts/util.js

@@ -224,7 +224,7 @@ export function fixCodeWhiteSpace(value = "pre") {
 }
 
 /**
- * 下载原始 Markdown 文档
+ * 导出原始 Markdown 文档
  * @param {文档内容} doc
  */
 export function downloadMD(doc) {

src/components/CodemirrorEditor/header.vue

@@ -9,11 +9,11 @@
           @click="$emit('show-dialog-upload-img')"
         ></i>
       </el-tooltip>
-      <!-- 下载文本文档 -->
+      <!-- 导出 Markdown 文档 -->
       <el-tooltip
         class="header__item"
         :effect="effect"
-        content="下载 Markdown 文档"
+        content="导出 Markdown 文档"
         placement="bottom-start"
       >
         <i
@@ -26,7 +26,7 @@
       <el-tooltip
         class="header__item"
         :effect="effect"
-        content="导出 HTML"
+        content="导出 HTML 页面"
         placement="bottom-start"
       >
         <i class="el-icon-document" size="medium" @click="$emit('export')"></i>

src/components/CodemirrorEditor/rightClickMenu.vue

@@ -53,11 +53,15 @@ export default {
         ],
         [
           {
-            text: "下载 Markdown 文档",
+            text: '导入 Markdown 文档',
+            key: 'importMarkdown',
+          },
+          {
+            text: "导出 Markdown 文档",
             key: "download",
           },
           {
-            text: "导出 HTML",
+            text: "导出 HTML 页面",
             key: "export",
           },
           {

src/pages/index/view/CodemirrorEditor.vue

@@ -328,7 +328,7 @@ export default {
         this.isCoping = false;
       }, 800);
     },
-    // 下载编辑器内容到本地
+    // 导出编辑器内容到本地
     downloadEditorContent() {
       downloadMD(this.editor.getValue(0));
     },
@@ -338,6 +338,38 @@ export default {
         exportHTML();
       });
     },
+    // 导入 Markdown 文档
+    importMarkdownContent() {
+      let menu = document.getElementById("menu");
+      let input = document.createElement("input");
+      input.type = "file";
+      input.name = "filename";
+      input.accept = ".txt,.md";
+      menu.appendChild(input);
+      input.onchange = () => {
+        if (!input.files) {
+          return;
+        }
+        const file = input.files[0];
+        if (!/\.(txt|TXT|MD|md)$/.test(file.name)) {
+          this.$message.error("不支持的文档格式");
+          return;
+        }
+        const reader = new FileReader();
+        reader.readAsText(file);
+        reader.onload = (event) => {
+          let txt = event.target.result;
+          txt = formatDoc(txt);
+          if (txt) {
+            localStorage.setItem("__editor_content", txt);
+            this.editor.setValue(txt);
+            this.$message.success("文档导入成功");
+          }
+        };
+      };
+      input.click();
+      menu.removeChild(input);
+    },
     // 格式化文档
     formatContent() {
       const doc = formatDoc(this.editor.getValue(0));
@@ -375,6 +407,9 @@ export default {
         case "insertTable":
           this.dialogFormVisible = true;
           break;
+        case "importMarkdown":
+          this.importMarkdownContent();
+          break;
         case "formatMarkdown":
           this.formatContent();
           break;