fix

src/App.vue

@@ -13,6 +13,7 @@
       :canPreview="canPreview"
       :toolsOptions="toolsOptions"
       :zIndex="zIndex"
+      :tabSize="tabSize"
       :fullScreen.sync="fullScreen"
       :themeOptions="themeOptions"
       @upload="$refs.mdUploadFile.click()"
@@ -51,6 +52,7 @@
       :ref="'md_textarea' + id"
       @tab="$refs['md_header' + id].tab()"
       @submit="submit"
+      @enter="$refs['md_header' + id].resetUlNum()"
       v-else
     />
     <div v-if="maxLength && showWordLimit && !showPreview" class="word_limit">
@@ -88,6 +90,10 @@ export default {
       type: String,
       default: ""
     },
+    tabSize: {
+      type: [String, Number],
+      default: ""
+    },
     // canAttachFile: {
     //   type: Boolean,
     //   default: true
@@ -168,6 +174,7 @@ export default {
       fileList: [],
       text: "",
       html: "",
+      ulNum: 1,
       htmlMinHeight: 150,
       textLength: "",
       selectionInfo: {

src/components/content/md-preview.vue

@@ -39,9 +39,11 @@ export default {
   methods: {
     addClass() {
       setTimeout(() => {
-        const previewDom = document.querySelector(".md_preview code");
-        if (!previewDom) return;
-        previewDom.className = "md_hljs";
+        const previewDomList = document.querySelectorAll(".md_preview code");
+        if (!previewDomList.length) return;
+        previewDomList.forEach(item => {
+          item.className = "md_hljs";
+        });
       }, 0);
     }
   }

src/components/content/md-textarea.vue

@@ -7,6 +7,7 @@
       @focus="setFocus(true)"
       @blur="setFocus(false)"
       @paste="pasteFile"
+      @keydown.enter="$emit('enter')"
       @keydown.meta.enter.exact="submit"
       @keydown.ctrl.enter.exact="submit"
       @keydown.tab.prevent="$emit('tab')"
@@ -102,7 +103,6 @@ export default {
       immediate: true,
       handler: function(val) {
         const cursorPoint = getPosition(this.id);
-        console.log(cursorPoint);
         this.textContent = val;
         this.transferMarkdown(val);
       }

src/components/header/md-header.vue

@@ -17,11 +17,12 @@
     </div>
     <div class="header_tools" v-if="!showPreview">
       <tool-button
-        ref="tool_button"
+        :ref="item.name"
+        :ulNum.sync="ulNum"
         :info="item"
         :fullScreen="fullScreen"
         @setFullScreen="$emit('update:fullScreen', $event)"
-        @updateText="updateText"
+        @updateText="handleUpdateText"
         @upload="$emit('upload')"
         v-for="(item, index) in toolsShow"
         :key="index"
@@ -71,6 +72,10 @@ export default {
       type: [String, Number],
       default: ""
     },
+    tabSize: {
+      type: [String, Number],
+      default: ""
+    },
     text: {
       type: [String, Number],
       default: ""
@@ -109,11 +114,13 @@ export default {
   },
   data() {
     return {
+      cursorPoint: "",
       cancelFullScreenBtn: {
         name: "cancelFullScreen",
         icon: "quxiaoquanping_o",
         tip: "退出全屏"
       },
+      ulNum: 1,
       fullScreenBtn: {
         name: "fullScreen",
         icon: "fullScreen",
@@ -201,48 +208,46 @@ export default {
   },
 
   methods: {
+    resetUlNum() {
+      this.ulNum = 1;
+    },
     tab() {
-      const startStr = " ";
+      let startStr = "";
+      const tabSize = parseInt(this.tabSize);
+      Array.from({ length: tabSize }).forEach(() => {
+        startStr += " ";
+      });
       const endStr = "";
       const originalText = this.text;
       const cursorPoint = getPosition(this.id);
-      console.log(cursorPoint);
-
       const selectionInfo = {
         selectionStart: cursorPoint,
         selectionEnd: cursorPoint
       };
       const newText = formatText(originalText, selectionInfo, startStr, endStr);
       const len = newText.length - originalText.length;
-      // const len = 0;
-      this.$emit("update:selectionInfo", {
-        selectorId: "",
-        selectionStart: cursorPoint.selectionStart + len,
-        selectionEnd: cursorPoint.selectionEnd + len
-      });
-      this.updateText(newText, len);
+      this.updateText(newText, len, cursorPoint);
     },
     setShowPreview(val) {
       this.$emit("update:showPreview", val);
     },
+    handleUpdateText({ val, len }) {
+      const cursorPoint = getPosition(this.id);
+      this.updateText(val, len, cursorPoint);
+    },
     updateText(val, len = 0) {
-      console.log(val);
-      this.$emit("update:text", val);
+      const textEl = document.getElementById(this.id);
+      textEl.blur();
       const cursorPoint = getPosition(this.id);
-      console.log(cursorPoint);
-
+      this.$emit("update:text", val);
       this.$emit("update:selectionInfo", {
         selectorId: "",
         selectionStart: "",
         selectionEnd: ""
       });
-      console.log(cursorPoint);
-
       setTimeout(() => {
-        // document.getElementById(this.id).setSelectionRange(0, 0);
-        document
-          .getElementById(this.id)
-          .setSelectionRange(cursorPoint + len, cursorPoint + len);
+        textEl.focus();
+        textEl.setSelectionRange(cursorPoint + len, cursorPoint + len);
       }, 0);
     }
   }

src/components/header/tool-button.vue

@@ -42,11 +42,15 @@ export default {
     selectionInfo: {
       type: Object,
       default: () => {}
+    },
+    ulNum: {
+      type: Number,
+      default: 1
     }
   },
   data() {
     return {
-      ulNum: 1
+      // ulNum: 1
     };
   },
   computed: {
@@ -66,6 +70,9 @@ export default {
     }
   },
   methods: {
+    // resetUlNum() {
+    //   this.ulNum = 1;
+    // },
     handleTool(type, startStr, endStr) {
       switch (type) {
         case "bold":
@@ -80,8 +87,8 @@ export default {
           break;
         case "ol":
           let ulNum = this.ulNum;
-          this.updateText(`\n${ulNum}. `, "");
-          this.ulNum++;
+          this.updateText(`\n${ulNum++}. `, "");
+          this.$emit("update:ulNum", ulNum);
           break;
         case "file":
           this.$emit("upload");
@@ -100,7 +107,12 @@ export default {
       const originalText = this.text;
       const selectionInfo = this.selectionInfo;
       const newText = formatText(originalText, selectionInfo, startStr, endStr);
-      this.$emit("updateText", newText);
+      const len =
+        selectionInfo.selectionEnd -
+        selectionInfo.selectionStart +
+        startStr.length +
+        endStr.length;
+      this.$emit("updateText", { val: newText, len });
     }
   }
 };

src/main.js

@@ -27,6 +27,7 @@ function initMdEditor(obj) {
     zIndex = 2000,
     filePathRule,
     rows = 6,
+    tabSize = 2,
     maxLength,
     showWordLimit,
     throttle = 600,
@@ -53,6 +54,7 @@ function initMdEditor(obj) {
     placeholder,
     maxLength,
     zIndex,
+    tabSize,
     setPreview: false,
     setFullScreen: false,
     focus: false,