diff --git a/src/assets/scripts/converter.js b/src/assets/scripts/converter.js index 0cf017d..1f54f8d 100644 --- a/src/assets/scripts/converter.js +++ b/src/assets/scripts/converter.js @@ -13,13 +13,10 @@ export function solveWeChatImage() { image.style.height = height } } -export function solveHtml() { - const element = document.getElementById(`output-wrapper`) - let html = element.innerHTML - let res = `` - res = juice.inlineContent(html, { + +export function mergeCss(html) { + return juice(html, { inlinePseudoElements: true, preserveImportant: true, }) - return res } diff --git a/src/components/CodemirrorEditor/EditorHeader/index.vue b/src/components/CodemirrorEditor/EditorHeader/index.vue index 66adcef..d4d74f7 100644 --- a/src/components/CodemirrorEditor/EditorHeader/index.vue +++ b/src/components/CodemirrorEditor/EditorHeader/index.vue @@ -147,6 +147,13 @@ 自定义 CSS + + + Mac 代码块 + import { setFontSize, setColorWithCustomTemplate } from '@/assets/scripts/util' -import { solveWeChatImage, solveHtml } from '@/assets/scripts/converter' +import { solveWeChatImage, mergeCss } from '@/assets/scripts/converter' import DEFAULT_CSS_CONTENT from '@/assets/example/theme-css.txt' import config from '@/assets/scripts/config' import ResetDialog from './ResetDialog' @@ -239,11 +246,12 @@ export default { }, config: config, citeStatus: false, + isMacCodeBlock: true, showResetConfirm: false, selectFont: ``, selectSize: ``, selectColor: ``, - selectCodeTheme: config.codeThemeOption[0].value, + selectCodeTheme: config.codeThemeOption[2].value, } }, components: { @@ -270,6 +278,7 @@ export default { codeTheme: (state) => state.codeTheme, nightMode: (state) => state.nightMode, currentCiteStatus: (state) => state.citeStatus, + currentIsMacCodeBlock: (state) => state.isMacCodeBlock, }), }, methods: { @@ -349,13 +358,25 @@ export default { this.setCiteStatus(this.citeStatus) this.$emit(`refresh`) }, + codeBlockChanged() { + this.isMacCodeBlock = !this.isMacCodeBlock + this.setIsMacCodeBlock(this.isMacCodeBlock) + this.$emit(`refresh`) + }, // 复制到微信公众号 copy() { this.$emit(`startCopy`) setTimeout(() => { - let clipboardDiv = document.getElementById(`output`) solveWeChatImage() - solveHtml() + + const clipboardDiv = document.getElementById(`output`) + clipboardDiv.innerHTML = mergeCss(clipboardDiv.innerHTML) + if (this.isMacCodeBlock) { + clipboardDiv.innerHTML = clipboardDiv.innerHTML.replaceAll( + /( { diff --git a/src/store/index.js b/src/store/index.js index ebe4d42..efb9afd 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -19,9 +19,10 @@ const state = { currentFont: ``, currentSize: ``, currentColor: ``, - citeStatus: 0, + citeStatus: false, nightMode: false, - codeTheme: config.codeThemeOption[0].value, + codeTheme: config.codeThemeOption[2].value, + isMacCodeBlock: true, } const mutations = { setEditorValue(state, data) { @@ -53,6 +54,10 @@ const mutations = { state.codeTheme = data localStorage.setItem(`codeTheme`, data) }, + setIsMacCodeBlock(state, data) { + state.isMacCodeBlock = data + localStorage.setItem(`isMacCodeBlock`, data) + }, themeChanged(state) { state.nightMode = !state.nightMode localStorage.setItem(`nightMode`, state.nightMode) @@ -65,9 +70,10 @@ const mutations = { state.currentSize = localStorage.getItem(`size`) || config.sizeOption[2].value state.codeTheme = - localStorage.getItem(`codeTheme`) || config.codeThemeOption[0].value + localStorage.getItem(`codeTheme`) || config.codeThemeOption[2].value state.citeStatus = localStorage.getItem(`citeStatus`) === `true` state.nightMode = localStorage.getItem(`nightMode`) === `true` + state.isMacCodeBlock = !(localStorage.getItem(`isMacCodeBlock`) === `false`) state.wxRenderer = new WxRenderer({ theme: setColor(state.currentColor), fonts: state.currentFont, @@ -135,7 +141,7 @@ const mutations = { }) }, editorRefresh(state) { - let renderer = state.wxRenderer.getRenderer(state.citeStatus) + const renderer = state.wxRenderer.getRenderer(state.citeStatus) marked.setOptions({ renderer }) let output = marked.parse(state.editor.getValue(0)) @@ -147,6 +153,35 @@ const mutations = { // 附加的一些 style output += state.wxRenderer.buildAddition() } + + if (state.isMacCodeBlock) { + output += ` + + ` + } state.output = output }, } diff --git a/src/views/CodemirrorEditor.vue b/src/views/CodemirrorEditor.vue index 333e929..9d0027e 100644 --- a/src/views/CodemirrorEditor.vue +++ b/src/views/CodemirrorEditor.vue @@ -526,6 +526,7 @@ export default { exportEditorContent() { this.$nextTick(() => { exportHTML() + document.getElementById(`output`).innerHTML = this.output }) }, // 导入 Markdown 文档