From 7dfee441a5a31d044dcd4514b57dee2c17a21c6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=92=83=E7=99=BD?= <18511759309@163.com>
Date: Tue, 6 Jul 2021 20:01:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=B7=BB=E5=8A=A0=E9=AB=98=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/App.vue | 17 ++++++++++++++++-
src/assets/js/utils.js | 12 +++++++++++-
src/components/content/md-preview.vue | 16 +++++++++++++++-
src/components/content/md-textarea.vue | 22 ++++++++++++++++------
src/components/header/md-header.vue | 8 ++++----
src/components/header/tool-button.vue | 1 +
src/main.js | 2 ++
7 files changed, 65 insertions(+), 13 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 8f9c2ac..c93e5fb 100644
--- a/src/App.vue
+++ b/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
/>
@@ -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);
}
diff --git a/src/assets/js/utils.js b/src/assets/js/utils.js
index a42aeb3..17555d0 100644
--- a/src/assets/js/utils.js
+++ b/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;
+}
diff --git a/src/components/content/md-preview.vue b/src/components/content/md-preview.vue
index 8f71927..983fdf3 100644
--- a/src/components/content/md-preview.vue
+++ b/src/components/content/md-preview.vue
@@ -1,6 +1,12 @@