fix: update copy function

更新复制方法,支持 margin 设置
This commit is contained in:
yanglbme 2019-12-24 22:53:53 +08:00
parent cbbedeec90
commit b9f90433f2
2 changed files with 36 additions and 31 deletions

View File

@ -158,8 +158,8 @@ let app = new Vue({
this.refresh(); this.refresh();
}, },
cssChanged() { cssChanged() {
let json = css2json(this.cssEditor.getValue(0)) let json = css2json(this.cssEditor.getValue(0));
let theme = customCssWithTemplate(json, this.currentColor) let theme = customCssWithTemplate(json, this.currentColor);
this.wxRenderer.setOptions({ this.wxRenderer.setOptions({
theme: theme theme: theme
}); });
@ -247,19 +247,33 @@ let app = new Vue({
}, },
// 复制渲染后的内容到剪贴板 // 复制渲染后的内容到剪贴板
copy() { copy() {
let clipboardDiv = document.getElementById('output'); const text = document.getElementById('output').innerHTML
clipboardDiv.focus(); let input = document.getElementById('copy-input');
window.getSelection().removeAllRanges(); if (!input) {
let range = document.createRange(); input = document.createElement('input');
range.setStartBefore(clipboardDiv.firstChild); input.id = 'copy-input';
range.setEndAfter(clipboardDiv.lastChild); input.style.position = 'absolute';
window.getSelection().addRange(range); input.style.left = '-1000px';
this.refresh() input.style.zIndex = -1000;
try { document.body.appendChild(input);
}
input.value = 'doocs/md';
input.setSelectionRange(0, input.value.length);
input.focus();
// 复制触发
document.addEventListener('copy', function copyCall(e) {
e.preventDefault();
e.clipboardData.setData('text/html', text);
e.clipboardData.setData('text/plain', text);
console.log(e.clipboardData)
document.removeEventListener('copy', copyCall);
});
if (document.execCommand('copy')) { if (document.execCommand('copy')) {
this.$notify({ this.$notify({
showClose: true, showClose: true,
message: '已复制文章到剪贴板,可直接到公众号后台粘贴', message: '已复制渲染后的文章到剪贴板,可直接到公众号后台粘贴',
offset: 80, offset: 80,
duration: 1600, duration: 1600,
type: 'success' type: 'success'
@ -273,15 +287,6 @@ let app = new Vue({
type: 'warning' type: 'warning'
}); });
} }
} catch (err) {
this.$notify({
showClose: true,
message: '未能复制文章到剪贴板,请全选后右键复制',
offset: 80,
duration: 1600,
type: 'warning'
});
}
} }
}, },
updated() { updated() {

View File

@ -108,8 +108,8 @@
<el-col :span="12" class="preview-wrapper" id="preview"> <el-col :span="12" class="preview-wrapper" id="preview">
<section> <section>
<div class="preview" contenteditable="true"> <div class="preview" contenteditable="true">
<div id="output" v-html="output"> <section id="output" v-html="output">
</div> </section>
</div> </div>
</section> </section>
</el-col> </el-col>