From 4c9a595cac01b6fd7a0bdfdf54681d78a1d93c5b Mon Sep 17 00:00:00 2001 From: JimQing Date: Sun, 17 May 2020 22:19:45 +0800 Subject: [PATCH 1/2] feature: night-mode-fix --- public/assets/css/app.css | 4 +- src/assets/images/favicon.png | Bin 0 -> 1029 bytes src/assets/less/theme.less | 21 ++++-- src/components/codeMirror/header.vue | 86 ++++++++++++---------- src/components/codeMirror/resetDialog.vue | 43 +++++++++++ src/scripts/converter.js | 6 +- src/view/CodemirrorEditor.vue | 62 +++++++++++++++- 7 files changed, 166 insertions(+), 56 deletions(-) create mode 100644 src/assets/images/favicon.png create mode 100644 src/components/codeMirror/resetDialog.vue diff --git a/public/assets/css/app.css b/public/assets/css/app.css index 847e38c..d3a5630 100644 --- a/public/assets/css/app.css +++ b/public/assets/css/app.css @@ -228,6 +228,6 @@ section { } .CodeMirror-scroll, .preview-wrapper { - overflow: unset!important; - overflow-y: scroll!important; + overflow: unset; + overflow-y: scroll; } \ No newline at end of file diff --git a/src/assets/images/favicon.png b/src/assets/images/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..e151decccde5a3a4674869f92e087201e76b832b GIT binary patch literal 1029 zcmeAS@N?(olHy`uVBq!ia0vp^DIm8&EL#Y7+!>a@a2CEqi4C48d;*Yuk)ou^)332`ZAE<=EvhfxDDHOF&H1u3gaNVzECsRA{k%I+-0P|rP?ysMCx{6kGp~ZpIp+qH^}OxreBIge zoF_yt(9N%3e?J6tw{=O7Uogw&Pe#3_e5BTL=>wo?2ej1xo(mYu{ z&{sUB`rWFRyH4lNm++8&Tka)P5b}{-*na<Ih+L^k;M!Q z+`=Ht$S`Y;1W=H@#M9T6{V|UWhqR8^F@tQNp7)+Ejv*QM-rl-dbVxyjErGF<%`|%T zwY;*e-OI{0cH6%HA7^^RD!5lg;6z6If3ru+8;-NAxSCUD=%F-&K|trS6XVLmN~N1Q zSmm-r3WJUq-j3}(k|8B0taUqDi=#-hbYiB9mDo+;maVrU{^}O)KKe=UTI3%Ao6y72 zChs=bv`90on>BITw*6k$%ssm&uW$R2`TEYgtfrDuA@g%iKiWA(cAw@o+pWlbFmXvv zfht$w#QU6j#;qH5wc92#$IsX%_C(;w$FB;p2d~Ec&q$E7v}eRXXSbC8i|x!zTee(u=i7A2#nyXI)Ly&VUhCp! zqTC;JVusHQiIe}niz??h9n)6v%lpx(JnxXdLG12tf0X7O;`5YqdZg;K{eJRv$4k5O zcdb5QQu%T&lTv)E?xyY& zzoRPu7&PX%*eAUY(@7HS&T!&dD)Y&c`{`-DRg!LJ)-QY1$?j4cJEP(Hsd({c+ILoU zd3UWX2;USIe{>yl_LTefnNQx$FHjAV{gH9_#-`<>R;kN22pdI*=`8Bl@pyy4+UFa(mE8PMH?w28X9Q6MY~4VUT;ba@7{Dm4AV$LAAs+q9i4;B-JXp zC>2OC7#SE^>KYp98d-!GSXddETbY<>8yHv_7<`H-;X%=mo1c=IR*73fGwYcRKn)C@ Lu6{1-oD!M
+ @@ -81,6 +82,7 @@ import { } from '../../scripts/converter' import config from '../../scripts/config' import DEFAULT_CSS_CONTENT from '../../scripts/themes/default-theme-css' +import resetDialog from '../codeMirror/resetDialog' import {mapState, mapMutations} from 'vuex' export default { name: 'editor-header', @@ -88,11 +90,15 @@ export default { return { config: config, citeStatus: false, + showResetConfirm: false, selectFont: '', selectSize: '', selectColor: '' }; }, + components: { + resetDialog + }, computed: { effect() { return this.nightMode ? 'dark' : 'light' @@ -165,28 +171,32 @@ export default { }, // 复制到微信公众号 copy() { - let clipboardDiv = document.getElementById('output') - solveWeChatImage() - this.setHtml(solveHtml()) + this.$emit('startCopy'); + setTimeout(() => { + let clipboardDiv = document.getElementById('output') + solveWeChatImage() + this.setHtml(solveHtml(this.nightMode)) - clipboardDiv.focus() - window.getSelection().removeAllRanges() - let range = document.createRange() + clipboardDiv.focus() + window.getSelection().removeAllRanges() + let range = document.createRange() - range.setStartBefore(clipboardDiv.firstChild) - range.setEndAfter(clipboardDiv.lastChild) - window.getSelection().addRange(range) - document.execCommand('copy') - // 输出提示 - this.$notify({ - showClose: true, - message: '已复制渲染后的文章到剪贴板，可直接到公众号后台粘贴', - offset: 80, - duration: 1600, - type: 'success' - }) - clipboardDiv.innerHTML = this.output; // 恢复现场 - this.$emit('refresh') + range.setStartBefore(clipboardDiv.firstChild) + range.setEndAfter(clipboardDiv.lastChild) + window.getSelection().addRange(range) + document.execCommand('copy') + // 输出提示 + this.$notify({ + showClose: true, + message: '已复制渲染后的文章到剪贴板，可直接到公众号后台粘贴', + offset: 80, + duration: 1600, + type: 'success' + }) + clipboardDiv.innerHTML = this.output; // 恢复现场 + this.$emit('refresh') + this.$emit('endCopy'); + }, 1000); }, // 自定义CSS样式 async customStyle () { @@ -207,26 +217,22 @@ export default { }, // 重置页面 reset() { - this.$confirm('此操作将丢失本地缓存的文本和自定义样式，是否继续?', '提示', { - confirmButtonText: '确定', - cancelButtonText: '取消', - confirmButtonClass: 'el-button--success', - cancelButtonClass: 'el-button--success is-plain', - type: 'warning', - center: true - }).then(() => { - localStorage.clear() - this.clearEditorToDefault(); - this.editor.focus() - this.citeStatus = false; - this.statusChanged(false); - this.fontChanged(this.config.builtinFonts[0].value) - this.colorChanged(this.config.colorOption[1].value) - this.sizeChanged(this.config.sizeOption[2].value) - this.$emit('cssChanged') - }).catch(() => { - this.editor.focus() - }) + this.showResetConfirm = true; + }, + confirmReset() { + localStorage.clear() + this.clearEditorToDefault(); + this.editor.focus() + this.citeStatus = false; + this.statusChanged(false); + this.fontChanged(this.config.builtinFonts[0].value) + this.colorChanged(this.config.colorOption[1].value) + this.sizeChanged(this.config.sizeOption[2].value) + this.$emit('cssChanged') + }, + cancelReset() { + this.showResetConfirm = false; + this.editor.focus() }, // 下载编辑器内容到本地 downloadEditorContent () { diff --git a/src/components/codeMirror/resetDialog.vue b/src/components/codeMirror/resetDialog.vue new file mode 100644 index 0000000..90be414 --- /dev/null +++ b/src/components/codeMirror/resetDialog.vue @@ -0,0 +1,43 @@ + + + + + \ No newline at end of file diff --git a/src/scripts/converter.js b/src/scripts/converter.js index 0f52083..a9f7524 100644 --- a/src/scripts/converter.js +++ b/src/scripts/converter.js @@ -13,9 +13,9 @@ export function solveWeChatImage() { image.style.height = height; } } -export function solveHtml() { +export function solveHtml(nightMode = false) { const element = document.getElementById("output-wrapper"); - let html = element.innerHTML; + let html = element.innerHTML let res = ""; res = juice.inlineContent( html, @@ -25,4 +25,4 @@ export function solveHtml() { } ); return res; -} +} \ No newline at end of file diff --git a/src/view/CodemirrorEditor.vue b/src/view/CodemirrorEditor.vue index 279a9ed..9d83dac 100644 --- a/src/view/CodemirrorEditor.vue +++ b/src/view/CodemirrorEditor.vue @@ -1,7 +1,7 @@