From 5bf8ed033b347b870a4a484c96d1d02a89cd6bf4 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 21:17:34 +0800 Subject: [PATCH] fix --- src/App.vue | 7 ++++ src/components/content/md-preview.vue | 8 +++-- src/components/content/md-textarea.vue | 2 +- src/components/header/md-header.vue | 49 ++++++++++++++------------ src/components/header/tool-button.vue | 20 ++++++++--- src/main.js | 2 ++ 6 files changed, 58 insertions(+), 30 deletions(-) diff --git a/src/App.vue b/src/App.vue index 714fa78..8f9c2ac 100644 --- a/src/App.vue +++ b/src/App.vue @@ -13,6 +13,7 @@ :canPreview="canPreview" :toolsOptions="toolsOptions" :zIndex="zIndex" + :tabSize="tabSize" :fullScreen.sync="fullScreen" :themeOptions="themeOptions" @upload="$refs.mdUploadFile.click()" @@ -51,6 +52,7 @@ :ref="'md_textarea' + id" @tab="$refs['md_header' + id].tab()" @submit="submit" + @enter="$refs['md_header' + id].resetUlNum()" v-else />
@@ -88,6 +90,10 @@ export default { type: String, default: "" }, + tabSize: { + type: [String, Number], + default: "" + }, // canAttachFile: { // type: Boolean, // default: true @@ -168,6 +174,7 @@ export default { fileList: [], text: "", html: "", + ulNum: 1, htmlMinHeight: 150, textLength: "", selectionInfo: { diff --git a/src/components/content/md-preview.vue b/src/components/content/md-preview.vue index eff6eee..8aecc57 100644 --- a/src/components/content/md-preview.vue +++ b/src/components/content/md-preview.vue @@ -39,9 +39,11 @@ export default { methods: { addClass() { setTimeout(() => { - const previewDom = document.querySelector(".md_preview code"); - if (!previewDom) return; - previewDom.className = "md_hljs"; + const previewDomList = document.querySelectorAll(".md_preview code"); + if (!previewDomList.length) return; + previewDomList.forEach(item => { + item.className = "md_hljs"; + }); }, 0); } } diff --git a/src/components/content/md-textarea.vue b/src/components/content/md-textarea.vue index 9e1e237..61be8ec 100644 --- a/src/components/content/md-textarea.vue +++ b/src/components/content/md-textarea.vue @@ -7,6 +7,7 @@ @focus="setFocus(true)" @blur="setFocus(false)" @paste="pasteFile" + @keydown.enter="$emit('enter')" @keydown.meta.enter.exact="submit" @keydown.ctrl.enter.exact="submit" @keydown.tab.prevent="$emit('tab')" @@ -102,7 +103,6 @@ export default { immediate: true, handler: function(val) { const cursorPoint = getPosition(this.id); - console.log(cursorPoint); this.textContent = val; this.transferMarkdown(val); } diff --git a/src/components/header/md-header.vue b/src/components/header/md-header.vue index 8b86890..57ebb1e 100644 --- a/src/components/header/md-header.vue +++ b/src/components/header/md-header.vue @@ -17,11 +17,12 @@
{ + startStr += " "; + }); const endStr = ""; const originalText = this.text; const cursorPoint = getPosition(this.id); - console.log(cursorPoint); - const selectionInfo = { selectionStart: cursorPoint, selectionEnd: cursorPoint }; const newText = formatText(originalText, selectionInfo, startStr, endStr); const len = newText.length - originalText.length; - // const len = 0; - this.$emit("update:selectionInfo", { - selectorId: "", - selectionStart: cursorPoint.selectionStart + len, - selectionEnd: cursorPoint.selectionEnd + len - }); - this.updateText(newText, len); + this.updateText(newText, len, cursorPoint); }, setShowPreview(val) { this.$emit("update:showPreview", val); }, + handleUpdateText({ val, len }) { + const cursorPoint = getPosition(this.id); + this.updateText(val, len, cursorPoint); + }, updateText(val, len = 0) { - console.log(val); - this.$emit("update:text", val); + const textEl = document.getElementById(this.id); + textEl.blur(); const cursorPoint = getPosition(this.id); - console.log(cursorPoint); - + this.$emit("update:text", val); this.$emit("update:selectionInfo", { selectorId: "", selectionStart: "", selectionEnd: "" }); - console.log(cursorPoint); - setTimeout(() => { - // document.getElementById(this.id).setSelectionRange(0, 0); - document - .getElementById(this.id) - .setSelectionRange(cursorPoint + len, cursorPoint + len); + textEl.focus(); + textEl.setSelectionRange(cursorPoint + len, cursorPoint + len); }, 0); } } diff --git a/src/components/header/tool-button.vue b/src/components/header/tool-button.vue index 3d4b170..cb65937 100644 --- a/src/components/header/tool-button.vue +++ b/src/components/header/tool-button.vue @@ -42,11 +42,15 @@ export default { selectionInfo: { type: Object, default: () => {} + }, + ulNum: { + type: Number, + default: 1 } }, data() { return { - ulNum: 1 + // ulNum: 1 }; }, computed: { @@ -66,6 +70,9 @@ export default { } }, methods: { + // resetUlNum() { + // this.ulNum = 1; + // }, handleTool(type, startStr, endStr) { switch (type) { case "bold": @@ -80,8 +87,8 @@ export default { break; case "ol": let ulNum = this.ulNum; - this.updateText(`\n${ulNum}. `, ""); - this.ulNum++; + this.updateText(`\n${ulNum++}. `, ""); + this.$emit("update:ulNum", ulNum); break; case "file": this.$emit("upload"); @@ -100,7 +107,12 @@ export default { const originalText = this.text; const selectionInfo = this.selectionInfo; const newText = formatText(originalText, selectionInfo, startStr, endStr); - this.$emit("updateText", newText); + const len = + selectionInfo.selectionEnd - + selectionInfo.selectionStart + + startStr.length + + endStr.length; + this.$emit("updateText", { val: newText, len }); } } }; diff --git a/src/main.js b/src/main.js index 56744df..5eacc65 100644 --- a/src/main.js +++ b/src/main.js @@ -27,6 +27,7 @@ function initMdEditor(obj) { zIndex = 2000, filePathRule, rows = 6, + tabSize = 2, maxLength, showWordLimit, throttle = 600, @@ -53,6 +54,7 @@ function initMdEditor(obj) { placeholder, maxLength, zIndex, + tabSize, setPreview: false, setFullScreen: false, focus: false, -- GitLab