From ed6d7f7beebe8598c6193b30981895584ed1dcdf Mon Sep 17 00:00:00 2001 From: JimQing Date: Tue, 13 Oct 2020 00:07:14 +0800 Subject: [PATCH 1/2] update: format code --- src/assets/scripts/uploadImageFile.js | 5 +- src/assets/scripts/util.js | 25 +++ .../CodemirrorEditor/aboutDialog.vue | 2 +- src/components/CodemirrorEditor/header.vue | 33 +-- .../CodemirrorEditor/insertForm.vue | 194 ++++++++---------- .../CodemirrorEditor/resetDialog.vue | 56 ++--- .../CodemirrorEditor/uploadImgDialog.vue | 24 +-- src/plugins/element/index.js | 38 ++-- src/store/index.js | 59 +++--- src/view/CodemirrorEditor.vue | 28 +-- 10 files changed, 240 insertions(+), 224 deletions(-) diff --git a/src/assets/scripts/uploadImageFile.js b/src/assets/scripts/uploadImageFile.js index 6249762..b95b27e 100644 --- a/src/assets/scripts/uploadImageFile.js +++ b/src/assets/scripts/uploadImageFile.js @@ -3,13 +3,14 @@ import fileApi from '../../api/file'; export function uploadImgFile(file) { return new Promise((resolve, reject) => { const checkImageResult = isImageIllegal(file); + if (checkImageResult) { reject(checkImageResult); return; } const base64Reader = new FileReader(); - base64Reader.readAsDataURL(file); + base64Reader.readAsDataURL(file); base64Reader.onload = function () { const base64Content = this.result.split(',').pop(); fileApi.fileUpload(base64Content, file).then(res => { @@ -17,7 +18,7 @@ export function uploadImgFile(file) { }).catch(err => { reject(err); }) - } + }; }); } diff --git a/src/assets/scripts/util.js b/src/assets/scripts/util.js index 9273229..2c326f9 100644 --- a/src/assets/scripts/util.js +++ b/src/assets/scripts/util.js @@ -216,3 +216,28 @@ export function downLoadMD(doc) { downLink.click(); document.body.removeChild(downLink); } + +/** + * 生成列表字符串 + * @param {*} data 对应内容集合 + * @param {*} rows 行 + * @param {*} cols 列 + */ +export function createTable({data, rows, cols}) { + let table = ""; + let currRow = []; + for (let i = 0; i < rows + 2; ++i) { + table += "|\t"; + currRow = []; + for (let j = 0; j < cols; ++j) { + const rowIdx = i > 1 ? i - 1 : i; + i === 1 ? + currRow.push("---\t") : + currRow.push(data[`k_${rowIdx}_${j}`] || ""); + } + table += currRow.join("\t|\t"); + table += "\t|\n"; + } + + return table; +} \ No newline at end of file diff --git a/src/components/CodemirrorEditor/aboutDialog.vue b/src/components/CodemirrorEditor/aboutDialog.vue index c45b2fe..d1775fc 100644 --- a/src/components/CodemirrorEditor/aboutDialog.vue +++ b/src/components/CodemirrorEditor/aboutDialog.vue @@ -24,7 +24,7 @@ export default { }, methods: { onRedirect(url) { - window.open(url) + window.open(url); } } } diff --git a/src/components/CodemirrorEditor/header.vue b/src/components/CodemirrorEditor/header.vue index db72bde..235c4a2 100644 --- a/src/components/CodemirrorEditor/header.vue +++ b/src/components/CodemirrorEditor/header.vue @@ -120,9 +120,9 @@ export default { fontChanged(fonts) { this.setWxRendererOptions({ fonts: fonts - }) + }); this.setCurrentFont(fonts); - this.$emit('refresh') + this.$emit('refresh'); }, sizeChanged(size) { let theme = setFontSize(size.replace('px', '')) @@ -130,26 +130,27 @@ export default { this.setWxRendererOptions({ size: size, theme: theme - }) + }); this.setCurrentSize(size); - this.$emit('refresh') + this.$emit('refresh'); }, colorChanged(color) { - let theme = setFontSize(this.currentSize.replace('px', '')) - theme = setColorWithCustomTemplate(theme, color) + let theme = setFontSize(this.currentSize.replace('px', '')); + + theme = setColorWithCustomTemplate(theme, color); this.setWxRendererOptions({ theme: theme - }) + }); this.setCurrentColor(color); - this.$emit('refresh') + this.$emit('refresh'); }, codeThemeChanged(theme) { this.setCurrentCodeTheme(theme); - this.$emit('refresh') + this.$emit('refresh'); }, statusChanged(val) { - this.setCiteStatus(val) - this.$emit('refresh') + this.setCiteStatus(val); + this.$emit('refresh'); }, // 复制到微信公众号 copy(e) { @@ -167,7 +168,7 @@ export default { range.setEndAfter(clipboardDiv.lastChild); window.getSelection().addRange(range); document.execCommand('copy'); - window.getSelection().removeAllRanges() + window.getSelection().removeAllRanges(); fixCodeWhiteSpace('normal'); clipboardDiv.innerHTML = this.output; @@ -189,16 +190,16 @@ export default { this.$emit('showCssEditor'); this.$nextTick(() => { if(!this.cssEditor) { - this.cssEditor.refresh() + this.cssEditor.refresh(); } }) setTimeout(() => { - this.cssEditor.refresh() + this.cssEditor.refresh(); },50) - let flag = await localStorage.getItem('__css_content') + let flag = await localStorage.getItem('__css_content'); if (!flag) { - this.setCssEditorValue(DEFAULT_CSS_CONTENT) + this.setCssEditorValue(DEFAULT_CSS_CONTENT); } }, // 重置页面 diff --git a/src/components/CodemirrorEditor/insertForm.vue b/src/components/CodemirrorEditor/insertForm.vue index 64ad6f1..aa34a45 100644 --- a/src/components/CodemirrorEditor/insertForm.vue +++ b/src/components/CodemirrorEditor/insertForm.vue @@ -1,118 +1,102 @@ diff --git a/src/components/CodemirrorEditor/resetDialog.vue b/src/components/CodemirrorEditor/resetDialog.vue index 7c7eae7..c382eab 100644 --- a/src/components/CodemirrorEditor/resetDialog.vue +++ b/src/components/CodemirrorEditor/resetDialog.vue @@ -11,33 +11,39 @@ \ No newline at end of file + .reset__dialog { + text-align: center; + } + + .text { + text-align: center; + } + + .dialog-footer { + text-align: center; + } + + diff --git a/src/components/CodemirrorEditor/uploadImgDialog.vue b/src/components/CodemirrorEditor/uploadImgDialog.vue index e30cd40..6559e1a 100644 --- a/src/components/CodemirrorEditor/uploadImgDialog.vue +++ b/src/components/CodemirrorEditor/uploadImgDialog.vue @@ -246,29 +246,25 @@ export default { return false; }, validateConfig() { + let checkRes = true, errMessage = ''; + switch (localStorage.getItem('imgHost')) { case "github": - if (!(this.formGitHub.repo && this.formGitHub.accessToken)) { - this.$message.error("请先配置 GitHub 图床参数"); - return false; - } + checkRes = this.formGitHub.repo && this.formGitHub.accessToken; + errMessage = !checkRes ? '请先配置 GitHub 图床参数' : ''; break; case 'aliOSS': - if (!(this.formAliOSS.accessKeyId && this.formAliOSS.accessKeySecret && this.formAliOSS.bucket && this.formAliOSS.region)) { - this.$message.error("请先配置阿里云 OSS 参数"); - return false; - } + checkRes = this.formAliOSS.accessKeyId && this.formAliOSS.accessKeySecret && this.formAliOSS.bucket && this.formAliOSS.region; + errMessage = !checkRes ? '请先配置阿里云 OSS 参数' : ''; break; case 'txCOS': - if (!(this.formTxCOS.secretId && this.formTxCOS.secretKey && this.formTxCOS.bucket && this.formTxCOS.region)) { - this.$message.error("请先配置腾讯云 COS 参数"); - return false; - } + checkRes = this.formTxCOS.secretId && this.formTxCOS.secretKey && this.formTxCOS.bucket && this.formTxCOS.region; + errMessage = !checkRes ? '请先配置腾讯云 COS 参数' : ''; break; default: - return true; } - return true; + errMessage && this.$message.error(errMessage); + return checkRes; }, }, }; diff --git a/src/plugins/element/index.js b/src/plugins/element/index.js index 74adb11..67bbdea 100644 --- a/src/plugins/element/index.js +++ b/src/plugins/element/index.js @@ -19,23 +19,23 @@ import { Message } from 'element-ui' -Vue.use(Container) -Vue.use(Header) -Vue.use(Upload) -Vue.use(Tooltip) -Vue.use(Form) -Vue.use(FormItem) -Vue.use(Select) -Vue.use(Option) -Vue.use(ColorPicker) -Vue.use(Switch) -Vue.use(Button) -Vue.use(Main) -Vue.use(Col) -Vue.use(Row) -Vue.use(Dialog) -Vue.use(Loading) -Vue.component(Message.name, Message) +Vue.use(Container); +Vue.use(Header); +Vue.use(Upload); +Vue.use(Tooltip); +Vue.use(Form); +Vue.use(FormItem); +Vue.use(Select); +Vue.use(Option); +Vue.use(ColorPicker); +Vue.use(Switch); +Vue.use(Button); +Vue.use(Main); +Vue.use(Col); +Vue.use(Row); +Vue.use(Dialog); +Vue.use(Loading); +Vue.component(Message.name, Message); -Vue.prototype.$loading = Loading.service -Vue.prototype.$message = Message +Vue.prototype.$loading = Loading.service; +Vue.prototype.$message = Message; diff --git a/src/store/index.js b/src/store/index.js index 30ffadf..e1d138c 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -29,54 +29,54 @@ const state = { }; const mutations = { setEditorValue(state, data) { - state.editor.setValue(data) + state.editor.setValue(data); }, setCssEditorValue(state, data) { - state.cssEditor.setValue(data) + state.cssEditor.setValue(data); }, setWxRendererOptions(state, data) { state.wxRenderer.setOptions(data); }, setCiteStatus(state, data) { state.citeStatus = data; - localStorage.setItem('citeStatus', data) + localStorage.setItem('citeStatus', data); }, setCurrentFont(state, data) { state.currentFont = data; - localStorage.setItem('fonts', data) + localStorage.setItem('fonts', data); }, setCurrentSize(state, data) { state.currentSize = data; - localStorage.setItem('size', data) + localStorage.setItem('size', data); }, setCurrentColor(state, data) { state.currentColor = data; - localStorage.setItem('color', data) + localStorage.setItem('color', data); }, setCurrentCodeTheme(state, data) { state.codeTheme = data; - localStorage.setItem('codeTheme', data) + localStorage.setItem('codeTheme', data); }, setRightClickMenuVisible(state, data) { state.rightClickMenuVisible = data; }, themeChanged(state) { state.nightMode = !state.nightMode; - localStorage.setItem('nightMode', state.nightMode) + localStorage.setItem('nightMode', state.nightMode); }, initEditorState(state) { - state.currentFont = localStorage.getItem('fonts') || config.builtinFonts[0].value - state.currentColor = localStorage.getItem('color') || config.colorOption[1].value - state.currentSize = localStorage.getItem('size') || config.sizeOption[2].value - state.codeTheme = localStorage.getItem('codeTheme') || config.codeThemeOption[0].value - state.citeStatus = localStorage.getItem('citeStatus') === 'true' - state.nightMode = localStorage.getItem('nightMode') === 'true' + state.currentFont = localStorage.getItem('fonts') || config.builtinFonts[0].value; + state.currentColor = localStorage.getItem('color') || config.colorOption[1].value; + state.currentSize = localStorage.getItem('size') || config.sizeOption[2].value; + state.codeTheme = localStorage.getItem('codeTheme') || config.codeThemeOption[0].value; + state.citeStatus = localStorage.getItem('citeStatus') === 'true'; + state.nightMode = localStorage.getItem('nightMode') === 'true'; state.wxRenderer = new WxRenderer({ theme: setColor(state.currentColor), fonts: state.currentFont, size: state.currentSize, status: state.citeStatus - }) + }); }, initEditorEntity(state) { state.editor = CodeMirror.fromTextArea( @@ -97,7 +97,7 @@ const mutations = { 'Ctrl-S': function save(editor) {} } } - ) + ); // 如果有编辑器内容被保存则读取，否则加载默认内容 state.editor.setValue(localStorage.getItem('__editor_content') || formatDoc(DEFAULT_CONTENT)) @@ -114,18 +114,19 @@ const mutations = { autofocus: true, extraKeys: { 'Ctrl-F': function autoFormat(editor) { - const totalLines = editor.lineCount() + const totalLines = editor.lineCount(); + editor.autoFormatRange({ line: 0, ch: 0 }, { line: totalLines - }) + }); }, 'Ctrl-S': function save(editor) {} } } - ) + ); // 如果有编辑器内容被保存则读取，否则加载默认内容 state.cssEditor.setValue(localStorage.getItem('__css_content') || DEFAULT_CSS_CONTENT) @@ -133,21 +134,23 @@ const mutations = { editorRefresh(state) { let output = marked(state.editor.getValue(0), { renderer: state.wxRenderer.getRenderer(state.citeStatus) - }) + }); + // 去除第一行的 margin-top - output = output.replace(/(style=".*?)"/, '$1;margin-top: 0"') + output = output.replace(/(style=".*?)"/, '$1;margin-top: 0"'); if (state.citeStatus) { // 引用脚注 - output += state.wxRenderer.buildFootnotes() + output += state.wxRenderer.buildFootnotes(); // 附加的一些 style - output += state.wxRenderer.buildAddition() + output += state.wxRenderer.buildAddition(); } - state.output = output + state.output = output; }, clearEditorToDefault(state) { - const doc = formatDoc(DEFAULT_CONTENT) - state.editor.setValue(doc) - state.cssEditor.setValue(DEFAULT_CSS_CONTENT) + const doc = formatDoc(DEFAULT_CONTENT); + + state.editor.setValue(doc); + state.cssEditor.setValue(DEFAULT_CSS_CONTENT); } } @@ -155,4 +158,4 @@ export default new Vuex.Store({ state, mutations, actions: {} -}) +}); diff --git a/src/view/CodemirrorEditor.vue b/src/view/CodemirrorEditor.vue index b9d449c..2adfd75 100644 --- a/src/view/CodemirrorEditor.vue +++ b/src/view/CodemirrorEditor.vue @@ -109,12 +109,12 @@ export default { }) }, created() { - this.initEditorState() + this.initEditorState(); this.$nextTick(() => { - this.initEditor() - this.initCssEditor() - this.onEditorRefresh() - }) + this.initEditor(); + this.initCssEditor(); + this.onEditorRefresh(); + }); }, methods: { initEditor() { @@ -122,8 +122,8 @@ export default { this.editor.on('change', (cm, e) => { if (this.changeTimer) clearTimeout(this.changeTimer); this.changeTimer = setTimeout(() => { - this.onEditorRefresh() - saveEditorContent(this.editor, '__editor_content') + this.onEditorRefresh(); + saveEditorContent(this.editor, '__editor_content'); }, 300); }); @@ -133,9 +133,9 @@ export default { return; } for (let i = 0, len = e.clipboardData.items.length; i < len; ++i) { - let item = e.clipboardData.items[i] - if (item.kind === 'file') { + let item = e.clipboardData.items[i]; + if (item.kind === 'file') { // 校验图床参数 const imgHost = localStorage.getItem('imgHost') || 'default'; if (imgHost != 'default' && !localStorage.getItem(`${imgHost}Config`)) { @@ -180,19 +180,19 @@ export default { // 自动提示 this.cssEditor.on('keyup', (cm, e) => { if ((e.keyCode >= 65 && e.keyCode <= 90) || e.keyCode === 189) { - cm.showHint(e) + cm.showHint(e); } }); this.cssEditor.on('update', (instance) => { this.cssChanged(); - saveEditorContent(this.cssEditor, '__css_content') + saveEditorContent(this.cssEditor, '__css_content'); }) }, cssChanged() { let json = css2json(this.cssEditor.getValue(0)); let theme = setFontSize(this.currentSize.replace('px', '')); - theme = customCssWithTemplate(json, this.currentColor, theme) + theme = customCssWithTemplate(json, this.currentColor, theme); this.setWxRendererOptions({ theme: theme }); @@ -208,7 +208,7 @@ export default { }); return; } - this.dialogUploadImgVisible = false + this.dialogUploadImgVisible = false; // 上传成功，获取光标 const cursor = this.editor.getCursor(); const imageUrl = response; @@ -316,7 +316,7 @@ export default { mounted() { setTimeout(() => { this.leftAndRightScroll(); - PR.prettyPrint() + PR.prettyPrint(); }, 300); } } From 86e9effb18674d8ab1d857027c79db33b028a08c Mon Sep 17 00:00:00 2001 From: yanglbme Date: Tue, 13 Oct 2020 10:22:23 +0800 Subject: [PATCH 2/2] feat: update `uploadImgDialog` component --- src/components/CodemirrorEditor/uploadImgDialog.vue | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/CodemirrorEditor/uploadImgDialog.vue b/src/components/CodemirrorEditor/uploadImgDialog.vue index 6559e1a..2c598cf 100644 --- a/src/components/CodemirrorEditor/uploadImgDialog.vue +++ b/src/components/CodemirrorEditor/uploadImgDialog.vue @@ -249,19 +249,18 @@ export default { let checkRes = true, errMessage = ''; switch (localStorage.getItem('imgHost')) { - case "github": + case 'github': checkRes = this.formGitHub.repo && this.formGitHub.accessToken; - errMessage = !checkRes ? '请先配置 GitHub 图床参数' : ''; + errMessage = checkRes ? '' : '请先配置 GitHub 图床参数'; break; case 'aliOSS': checkRes = this.formAliOSS.accessKeyId && this.formAliOSS.accessKeySecret && this.formAliOSS.bucket && this.formAliOSS.region; - errMessage = !checkRes ? '请先配置阿里云 OSS 参数' : ''; + errMessage = checkRes ? '' : '请先配置阿里云 OSS 参数'; break; case 'txCOS': checkRes = this.formTxCOS.secretId && this.formTxCOS.secretKey && this.formTxCOS.bucket && this.formTxCOS.region; - errMessage = !checkRes ? '请先配置腾讯云 COS 参数' : ''; + errMessage = checkRes ? '' : '请先配置腾讯云 COS 参数'; break; - default: } errMessage && this.$message.error(errMessage); return checkRes;