fix

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "start": "webpack serve --mode=development",
     "build": "webpack --mode=production",
-    "p": "npm run build && ssh -t root@45.76.193.214 rm -rf /test/markdown-editor.js exit && scp -r dist/markdown-editor.js root@45.76.193.214:/test/"
+    "p": "npm run build && ssh -t root@45.76.193.214 rm -rf /test/* exit && scp -r dist/* root@45.76.193.214:/test/"
   },
   "devDependencies": {
     "chalk": "^4.1.1",

src/App.vue

@@ -31,7 +31,8 @@
       :fullScreen.sync="fullScreen"
       :text="text"
       :html.sync="html"
-      v-show="showPreview"
+      :htmlMinHeight="htmlMinHeight"
+      v-if="showPreview"
     />
     <markdown-editor
       :selectionInfo.sync="selectionInfo"
@@ -40,14 +41,16 @@
       :placeholder="placeholder"
       :isFocus.sync="isFocus"
       :throttleTime="throttle"
+      :htmlMinHeight.sync="htmlMinHeight"
       :fullScreen.sync="fullScreen"
       :maxLength="maxLength"
       :textLength.sync="textLength"
       :rows="rows"
+      :html.sync="html"
       :id="textareaId"
       @tab="$refs['md_header' + id].tab()"
       @submit="submit"
-      v-show="!showPreview"
+      v-else
     />
     <div v-if="maxLength && showWordLimit && !showPreview" class="word_limit">
       <span>{{ textLength }}</span
@@ -103,8 +106,12 @@ export default {
       type: Number,
       default: 0
     },
-    preview: {
-      type: String,
+    setPreview: {
+      type: Boolean,
+      default: false
+    },
+    setFullScreen: {
+      // type: Boolean,
       default: ""
     },
     // 是否可以预览
@@ -160,6 +167,7 @@ export default {
       fileList: [],
       text: "",
       html: "",
+      htmlMinHeight: 150,
       textLength: "",
       selectionInfo: {
         selectorId: "",
@@ -179,17 +187,34 @@ export default {
   watch: {
     focus: {
       handler: function(val) {
-        const textEl = document.getElementById(this.textareaId);
-        if (val) {
-          textEl.focus();
-        } else {
-          textEl.blur();
-        }
+        setTimeout(() => {
+          const textEl = document.getElementById(this.textareaId);
+          if (val) {
+            textEl.focus();
+          } else {
+            textEl.blur();
+          }
+        });
       }
     },
-    preview: {
+    showPreview: {
       handler: function(val) {
-        this.showPreview = val === "preview";
+        this.$emit("changeTab", val);
+      }
+    },
+    setPreview: {
+      handler: function(val) {
+        this.showPreview = val;
+      }
+    },
+    setFullScreen: {
+      handler: function(val) {
+        this.fullScreen = val;
+      }
+    },
+    fullScreen: {
+      handler: function(val) {
+        this.$emit("changeFullScreen", val);
       }
     },
     text: {
@@ -199,7 +224,7 @@ export default {
       }
     },
     html: {
-      immediate: true,
+      immediate: false,
       handler: function(val) {
         const emitContent = {
           text: this.text,

src/components/content/md-preview.vue

@@ -7,9 +7,7 @@
 import marked from "marked";
 export default {
   data() {
-    return {
-      htmlMinHeight: 150
-    };
+    return {};
   },
   props: {
     id: {
@@ -20,6 +18,9 @@ export default {
       type: [String, Number],
       default: ""
     },
+    htmlMinHeight: {
+      default: ""
+    },
     html: {
       type: String,
       default: ""
@@ -31,8 +32,8 @@ export default {
   },
   mounted() {
     setTimeout(() => {
-      this.resetMinHeight();
-    }, 0) 
+      // this.resetMinHeight();
+    }, 0);
     this.addClass();
   },
   updated() {
@@ -59,9 +60,13 @@ export default {
       this.$emit("update:html", html);
     },
     resetMinHeight() {
+      console.log("resetHeight");
+
       const textEl = document.getElementById(this.id);
       if (!textEl) return;
       const height = textEl.offsetHeight;
+      console.log("编辑区高度", height);
+
       this.htmlMinHeight = height;
     }
   },
@@ -69,8 +74,10 @@ export default {
     text: {
       immediate: true,
       handler: function(val) {
-        this.resetMinHeight();
-        this.transferMarkdown(val);
+        setTimeout(() => {
+          // this.resetMinHeight();
+        }, 0);
+        // this.transferMarkdown(val);
       }
     }
   }

src/components/content/md-textarea.vue

@@ -25,12 +25,20 @@ import {
   getPosition,
   throttle as throttleFn
 } from "@/assets/js/utils";
+import marked from "marked";
 export default {
   props: {
     id: {
       type: String,
       default: ""
     },
+    html: {
+      type: String,
+      default: ""
+    },
+    htmlMinHeight: {
+      default: ""
+    },
     fullScreen: {
       type: Boolean,
       default: false
@@ -79,6 +87,11 @@ export default {
   created() {
     document.addEventListener("mouseup", this.checkSelection);
   },
+  mounted() {
+    setTimeout(() => {
+      this.resetMinHeight();
+    }, 0);
+  },
   watch: {
     text: {
       immediate: true,
@@ -86,6 +99,7 @@ export default {
         const cursorPoint = getPosition(this.id);
         console.log(cursorPoint);
         this.textContent = val;
+        this.transferMarkdown(val);
       }
     },
     fullScreen: {
@@ -125,6 +139,28 @@ export default {
     }
   },
   methods: {
+    resetMinHeight() {
+      console.log("resetHeight");
+
+      const textEl = document.getElementById(this.id);
+      if (!textEl) return;
+      const height = textEl.offsetHeight;
+      console.log("编辑区高度", height);
+      this.$emit("update:htmlMinHeight", height);
+      // this.htmlMinHeight = height;
+    },
+    transferMarkdown(val) {
+      marked.setOptions({
+        highlight: function(code, lang, callback) {
+          const html = require("highlight.js").highlightAuto(code).value;
+          return html;
+        }
+      });
+      const str = val + "";
+      // if (!str.trim()) return;
+      const html = marked(str);
+      this.$emit("update:html", html);
+    },
     input() {
       this.$emit("update:textLength", this.textContent.length);
       this.emitText();

src/components/header/tool-button.vue

@@ -111,8 +111,10 @@ export default {
     font-size: 18px;
     color: var(--md-editor-text-color);
     cursor: pointer;
-    &:hover {
-      color: var(--md-editor-text-color-active);
+    @media (any-hover: hover) {
+      &:hover {
+        color: var(--md-editor-text-color-active);
+      }
     }
     &.icon-quxiaoquanping_o {
       font-size: 24px;

src/main.js

@@ -29,7 +29,7 @@ function initMdEditor(obj) {
     rows = 6,
     maxLength,
     showWordLimit,
-    throttle = 1000,
+    throttle = 600,
     canPreview,
     canAttachFile,
     themeOptions,
@@ -53,15 +53,26 @@ function initMdEditor(obj) {
     placeholder,
     maxLength,
     zIndex,
-    preview: "",
+    setPreview: false,
+    setFullScreen: false,
     focus: false,
     showWordLimit
   };
   const listeners = {
+    changeTab(val) {
+      props.setPreview = val;
+      props.focus = !val;
+      _this.vEl.$forceUpdate();
+    },
+    changeFullScreen(val) {
+      props.setFullScreen = val;
+      _this.vEl.$forceUpdate();
+    },
     change(val) {
       onChange(val);
       _this.value = val;
       props.value = val.text;
+      _this.vEl.$forceUpdate();
     },
     input(val) {
       onInput(val);
@@ -85,8 +96,6 @@ function initMdEditor(obj) {
     },
     submit(val) {
       onSubmit(val);
-      _this.value = val;
-      props.value = val.text;
     },
     upload({ val, callback }) {
       onUpload(val, function(res) {
@@ -124,11 +133,21 @@ function initMdEditor(obj) {
     this.vEl.$forceUpdate();
   };
 
-  this.toggleTab = function(tabName) {
-    if (!tabName) {
-      props.preview = props.preview === "edit" ? "preview" : "edit";
+  this.toggleTab = function(setPreview) {
+    if (setPreview !== "edit" && setPreview !== "preview") {
+      props.setPreview = !props.preview;
+    } else {
+      props.setPreview = setPreview === "preview";
+    }
+    props.focus = !props.setPreview;
+    this.vEl.$forceUpdate();
+  };
+
+  this.toggleFullScreen = function(setFullScreen) {
+    if (setFullScreen === undefined) {
+      props.setFullScreen = !props.setFullScreen;
     } else {
-      props.preview = tabName;
+      props.setFullScreen = setFullScreen;
     }
     this.vEl.$forceUpdate();
   };