diff --git a/CHANGELOG.md b/CHANGELOG.md index ab061c4d9..3bcc9a03b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -66,6 +66,7 @@ ### v3.2.6 / 2020-05-xx +* [411](https://github.com/Vanessa219/vditor/issues/411) 复制到微信公众号后代码块背景丢失 `修复缺陷` * [410](https://github.com/Vanessa219/vditor/issues/410) not delete inline code(firfox) `修复缺陷` * [405](https://github.com/Vanessa219/vditor/issues/405) translated mindmap into Korean `文档相关` diff --git a/src/assets/scss/_reset.scss b/src/assets/scss/_reset.scss index 92567945f..019062ab6 100644 --- a/src/assets/scss/_reset.scss +++ b/src/assets/scss/_reset.scss @@ -201,6 +201,10 @@ } } + pre { + margin: 1em 0; + } + pre > code { margin: 0; font-size: 85%; diff --git a/src/ts/preview/index.ts b/src/ts/preview/index.ts index 1a4c2b1bd..cc956624b 100644 --- a/src/ts/preview/index.ts +++ b/src/ts/preview/index.ts @@ -28,12 +28,13 @@ export class Preview { previewElement.classList.add(vditor.options.classes.preview); } previewElement.style.maxWidth = vditor.options.preview.maxWidth + "px"; - previewElement.addEventListener("copy", () => { - // 防止背景色被粘贴到公众号中 - this.element.style.backgroundColor = "#fff"; - setTimeout(() => { - this.element.style.backgroundColor = "var(--textarea-background-color)"; - }); + previewElement.addEventListener("copy", (event) => { + const tempElement = document.createElement("div"); + tempElement.className = "vditor-reset"; + tempElement.appendChild(getSelection().getRangeAt(0).cloneContents()); + + this.copyToWechat(vditor, tempElement); + event.preventDefault(); }); const actionElement = document.createElement("div"); @@ -57,21 +58,7 @@ export class Preview { } if (type === "mp-wechat") { - // fix math render - document.querySelectorAll(".katex-html .base").forEach((item: HTMLElement) => { - item.style.display = "initial"; - }); - - // 防止背景色被粘贴到公众号中 - this.element.style.backgroundColor = "#fff"; - const range = this.element.lastElementChild.ownerDocument.createRange(); - range.selectNode(this.element.lastElementChild); - setSelectionFocus(range); - document.execCommand("copy"); - vditor.tip.show("已复制,可到微信公众号平台进行粘贴"); - range.collapse(true); - - this.element.style.backgroundColor = "var(--textarea-background-color)"; + this.copyToWechat(vditor, this.element.lastElementChild.cloneNode(true) as HTMLElement); return; } @@ -185,4 +172,26 @@ export class Preview { abcRender(vditor.preview.element.lastElementChild as HTMLElement, vditor.options.cdn); mediaRender(vditor.preview.element.lastElementChild as HTMLElement); } + + private copyToWechat(vditor: IVditor, copyElement: HTMLElement) { + // fix math render + copyElement.querySelectorAll(".katex-html .base").forEach((item: HTMLElement) => { + item.style.display = "initial"; + }); + // 防止背景色被粘贴到公众号中 + copyElement.style.backgroundColor = "#fff"; + // 代码背景 + copyElement.querySelectorAll("code").forEach((item) => { + item.style.backgroundImage = "none"; + }); + this.element.append(copyElement); + + const range = copyElement.ownerDocument.createRange(); + range.selectNode(copyElement); + setSelectionFocus(range); + document.execCommand("copy"); + + this.element.lastElementChild.remove(); + vditor.tip.show("已复制,可到微信公众号平台进行粘贴"); + } }