From 44c32ed79df66cee9096d4930ddcd505b1847982 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=92=83=E7=99=BD?= <18511759309@163.com>
Date: Tue, 29 Jun 2021 14:11:34 +0800
Subject: [PATCH] fix
---
package.json | 2 +-
src/App.vue | 51 +++++++++++++++++++-------
src/components/content/md-preview.vue | 21 +++++++----
src/components/content/md-textarea.vue | 36 ++++++++++++++++++
src/components/header/tool-button.vue | 6 ++-
src/main.js | 35 ++++++++++++++----
6 files changed, 120 insertions(+), 31 deletions(-)
diff --git a/package.json b/package.json
index 4d92cc1..b7ff65b 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.vue b/src/App.vue
index 1c23eab..7c9766f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -31,7 +31,8 @@
:fullScreen.sync="fullScreen"
:text="text"
:html.sync="html"
- v-show="showPreview"
+ :htmlMinHeight="htmlMinHeight"
+ v-if="showPreview"
/>
{{ textLength }} {
+ 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,
diff --git a/src/components/content/md-preview.vue b/src/components/content/md-preview.vue
index c1359be..50631cb 100644
--- a/src/components/content/md-preview.vue
+++ b/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);
}
}
}
diff --git a/src/components/content/md-textarea.vue b/src/components/content/md-textarea.vue
index 22680d7..2c62744 100644
--- a/src/components/content/md-textarea.vue
+++ b/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();
diff --git a/src/components/header/tool-button.vue b/src/components/header/tool-button.vue
index d38ceb9..3d4b170 100644
--- a/src/components/header/tool-button.vue
+++ b/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;
diff --git a/src/main.js b/src/main.js
index 0db9115..56744df 100644
--- a/src/main.js
+++ b/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();
};
--
GitLab