feat:添加高度

src/App.vue

@@ -31,6 +31,7 @@
       :id="textareaId"
       :fullScreen.sync="fullScreen"
       :text="text"
+      :height="textareaHeight"
       :html.sync="html"
       :htmlMinHeight="htmlMinHeight"
       v-if="showPreview"
@@ -47,12 +48,14 @@
       :maxLength="maxLength"
       :textLength.sync="textLength"
       :rows="rows"
+      :height="textareaHeight"
       :html.sync="html"
       :id="textareaId"
       :ref="'md_textarea' + id"
       @tab="$refs['md_header' + id].tab()"
       @submit="submit"
       @enter="$refs['md_header' + id].resetUlNum()"
+      @getFilteredTags="filteredTags = $event"
       v-else
     />
     <div v-if="maxLength && showWordLimit && !showPreview" class="word_limit">
@@ -101,7 +104,7 @@ export default {
     // 初始化时赋值
     value: {
       type: [String, Number],
-      default: " "
+      default: ""
     },
     // 全屏时的z-index
     zIndex: {
@@ -145,6 +148,11 @@ export default {
       type: [Number, String],
       default: ""
     },
+    // 高度
+    height: {
+      type: Number,
+      default: 0
+    },
     // 最大长度
     maxLength: {
       type: [Number, String],
@@ -164,6 +172,11 @@ export default {
   computed: {
     textareaId() {
       return "textarea_" + this.id;
+    },
+    textareaHeight() {
+      const height = this.height;
+      if (!height) return 0;
+      return height - 83;
     }
   },
   data() {
@@ -172,6 +185,7 @@ export default {
       isFocus: false,
       showPreview: false,
       fileList: [],
+      filteredTags: [],
       text: "",
       html: "",
       ulNum: 1,
@@ -242,6 +256,7 @@ export default {
           const checkResult = checktUrl(val, this.filePathRule);
           emitContent.invalidList = checkResult;
         }
+        emitContent.filteredTags = this.filteredTags;
         this.$emit("change", emitContent);
         this.$emit("input", emitContent);
       }

src/assets/js/utils.js

@@ -173,8 +173,18 @@ export function checkBoswer() {
   );
   return agent !== null;
 }
-
+// 去除头部空格行
 export function removeBlankLine(val) {
   if (!val) return "";
   return val.replace(/^\n/, "");
 }
+
+// 获取被过滤掉的标签
+export function getFilteredTags(oldStr, newStr) {
+  if (oldStr.length - newStr.length === 0) return [];
+  const filteredStr = oldStr.replace(newStr.trim(), "");
+  const virtualDom = document.createElement("div");
+  virtualDom.innerHTML = filteredStr;
+  const filteredTags = Array.from(virtualDom.getElementsByTagName("*"));
+  return filteredTags;
+}

src/components/content/md-preview.vue

 <template>
   <div :class="['md_preview', { fullScreen }]">
-    <div v-html="html" :style="{ 'min-height': htmlMinHeight + 'px' }"></div>
+    <div
+      v-html="html"
+      :style="{
+        height: height > 0 ? height + 'px' : 'auto',
+        'min-height': htmlMinHeight + 'px'
+      }"
+    ></div>
   </div>
 </template>
 <script>
@@ -21,6 +27,10 @@ export default {
     htmlMinHeight: {
       default: ""
     },
+    height: {
+      type: Number,
+      default: 0
+    },
     html: {
       type: String,
       default: ""
@@ -56,6 +66,10 @@ export default {
   box-sizing: border-box;
   color: var(--md-editor-text-color);
   word-break: break-all;
+  overflow-y: auto;
+  & > div {
+    overflow-y: auto;
+  }
   &.fullScreen {
     max-height: calc(100% - 42px);
     overflow-y: auto;

src/components/content/md-textarea.vue

@@ -24,6 +24,7 @@
 import {
   getSelectionInfo,
   getPosition,
+  getFilteredTags,
   throttle as throttleFn
 } from "@/assets/js/utils";
 import marked from "marked";
@@ -72,6 +73,10 @@ export default {
       type: [String, Number],
       default: ""
     },
+    height: {
+      type: Number,
+      default: 0
+    },
     selectionInfo: {
       type: Object,
       default: () => {}
@@ -159,11 +164,7 @@ export default {
         gfm: true,
         langPrefix: "language-",
         highlight: function(code, lang, callback) {
-          const html = require("highlight.js").highlightAuto(code).value;
-
-          // const html = require("highlight.js").highlight(code, {
-          //   language: lang || "xml"
-          // }).value;
+          let html = require("highlight.js").highlightAuto(code).value;
           return html;
         }
       });
@@ -174,13 +175,18 @@ export default {
       virtualDom.innerHTML = html;
       virtualDom.querySelectorAll("code").forEach(item => {
         if (!/language-/.test(item.className)) {
-          item.className = "language-xml";
+          item.className = "language-html";
         }
       });
       const DOMPurify = require("dompurify");
       const cleanHtml = DOMPurify.sanitize(virtualDom.innerHTML, {
         FORBID_TAGS: ["style", "script"]
       });
+      // console.log(html.length);
+      // console.log(cleanHtml.length);
+
+      const filteredTags = getFilteredTags(html, cleanHtml);
+      this.$emit("getFilteredTags", filteredTags);
       this.$emit("update:html", cleanHtml);
     },
     input() {
@@ -188,6 +194,8 @@ export default {
       this.emitText();
     },
     reSizeTextareaHeight() {
+      console.log("setHeight");
+
       const textEl = document.getElementById(this.id);
       if (!textEl) return;
       const fontSize = getComputedStyle(textEl).getPropertyValue("font-size");
@@ -213,6 +221,8 @@ export default {
       const contentHeight = hideEl.offsetHeight;
       this.editorHeight = this.fullScreen
         ? "calc(100% - 42px)"
+        : this.height
+        ? this.height + "px"
         : this.autoSize
         ? `${contentHeight + parseFloat(fontSize) * 1.2}px`
         : "auto";

src/components/header/md-header.vue

@@ -200,7 +200,7 @@ export default {
           icon: "biaoge",
           tip: "添加表格",
           startStr:
-            "\n\n| header | header |\n| ------ | ------ |\n| cell | cell |\n| cell | cell |\n\n",
+            "\n| header | header |\n| ------ | ------ |\n| cell | cell |\n| cell | cell |\n\n",
           endStr: ""
         },
         {
@@ -231,14 +231,14 @@ export default {
       };
       const newText = formatText(originalText, selectionInfo, startStr, endStr);
       const len = newText.length - originalText.length;
-      this.updateText(newText, len, cursorPoint);
+      this.updateText(newText, len);
     },
     setShowPreview(val) {
       this.$emit("update:showPreview", val);
     },
     handleUpdateText({ val, len }) {
-      const cursorPoint = getPosition(this.id);
-      this.updateText(val, len, cursorPoint);
+      // const cursorPoint = getPosition(this.id);
+      this.updateText(val, len);
     },
     updateText(val, len = 0) {
       const textEl = document.getElementById(this.id);

src/components/header/tool-button.vue

@@ -111,6 +111,7 @@ export default {
         selectionInfo.selectionEnd -
         selectionInfo.selectionStart +
         startStr.length;
+
       this.$emit("updateText", { val: newText, len });
     }
   }

src/main.js

@@ -27,6 +27,7 @@ function initMdEditor(obj) {
     zIndex = 2000,
     filePathRule,
     rows = 6,
+    height,
     tabSize = 2,
     maxLength,
     showWordLimit,
@@ -47,6 +48,7 @@ function initMdEditor(obj) {
     themeOptions,
     filePathRule,
     rows,
+    height: parseInt(height),
     id,
     throttle,
     canPreview,