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