diff --git a/src/components/CodemirrorEditor.vue b/src/components/CodemirrorEditor.vue index c1bdd85..85d24f2 100644 --- a/src/components/CodemirrorEditor.vue +++ b/src/components/CodemirrorEditor.vue @@ -70,8 +70,8 @@ -
-
+
+
@@ -150,6 +150,7 @@ import DEFAULT_CSS_CONTENT from '../scripts/themes/default-theme-css' require('codemirror/mode/javascript/javascript') import '../scripts/closebrackets' import $ from 'jquery' +import { solveWeChatImage, solveHtml, copySafari } from '../scripts/converter' export default { data () { let d = { @@ -182,7 +183,8 @@ export default { rows: 1, cols: 1 }, - timeout: null + timeout: null, + html: '' } d.currentFont = d.builtinFonts[0].value d.currentSize = d.sizeOption[2].value @@ -332,6 +334,7 @@ export default { }, cssChanged () { let json = css2json(this.cssEditor.getValue(0)) + console.log(json) let theme = setFontSize(this.currentSize.replace('px', '')) theme = customCssWithTemplate(json, this.currentColor, theme) this.wxRenderer.setOptions({ @@ -493,7 +496,7 @@ export default { } }, // 复制渲染后的内容到剪贴板 - copy () { + copy12 () { let clipboardDiv = document.getElementById('output') clipboardDiv.focus() window.getSelection().removeAllRanges() @@ -511,6 +514,22 @@ export default { type: 'success' }) }, + // 复制到微信公众号 + copy() { + let clipboardDiv = document.getElementById('output') + const clipboardHTML = clipboardDiv.innerHTML + // solveWeChatImage() + this.html = solveHtml(); + // 输出提示 + this.$notify({ + showClose: true, + message: '已复制渲染后的文章到剪贴板,可直接到公众号后台粘贴', + offset: 80, + duration: 1600, + type: 'success' + }) + clipboardDiv.innerHTML = clipboardHTML; // 恢复现场 + }, // 左右栏同步滚动 leftAndRightScroll() { $('div.CodeMirror-scroll, #preview').on('scroll', function callback () { diff --git a/src/scripts/converter.js b/src/scripts/converter.js new file mode 100644 index 0000000..b3a22d4 --- /dev/null +++ b/src/scripts/converter.js @@ -0,0 +1,29 @@ +import juice from 'juice' + +export function solveWeChatImage() { + const clipboardDiv = document.getElementById(output); + const images = clipboardDiv.getElementsByTagName("img"); + for (let i = 0; i < images.length; i++) { + const image = images[i]; + const width = image.getAttribute("width"); + const height = image.getAttribute("height"); + image.removeAttribute("width"); + image.removeAttribute("height"); + image.style.width = width; + image.style.height = height; + } +} +export function solveHtml() { + const element = document.getElementById("output-wrapper"); + let html = element.innerHTML; + let res = ""; + res = juice.inlineContent( + html, + { + inlinePseudoElements: true, + preserveImportant: true + } + ); + console.log(res); + return res; +}