feat: change copy method ,use juice

This commit is contained in:
majianquan 2020-03-14 23:12:04 +08:00
parent 3fdd225817
commit 8b57302416
2 changed files with 52 additions and 4 deletions

View File

@ -70,7 +70,7 @@
</textarea>
</el-col>
<el-col :span="12" class="preview-wrapper" id="preview">
<section>
<section id="output-wrapper">
<div class="preview" contenteditable="true" >
<section id="output" v-html="output">
</section>
@ -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 () {

29
src/scripts/converter.js Normal file
View File

@ -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;
}