fix: update copy function

更新复制方法，支持 margin 设置

assets/scripts/editor.js

@@ -158,8 +158,8 @@ let app = new Vue({
       this.refresh();
     },
     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({
         theme: theme
       });
@@ -247,33 +247,38 @@ let app = new Vue({
     },
     // 复制渲染后的内容到剪贴板
     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);
-        if (document.execCommand('copy')) {
+      }
-          this.$notify({
+      input.value = 'doocs/md';
-            showClose: true,
+      input.setSelectionRange(0, input.value.length);
-            message: '已复制文章到剪贴板，可直接到公众号后台粘贴',
+      input.focus();
-            offset: 80,
+
-            duration: 1600,
+      // 复制触发
-            type: 'success'
+      document.addEventListener('copy', function copyCall(e) {
-          });
+        e.preventDefault();
-        } else {
+        e.clipboardData.setData('text/html', text);
-          this.$notify({
+        e.clipboardData.setData('text/plain', text);
-            showClose: true,
+        console.log(e.clipboardData)
-            message: '未能复制文章到剪贴板，请全选后右键复制',
+        document.removeEventListener('copy', copyCall);
-            offset: 80,
+      });
-            duration: 1600,
+      
-            type: 'warning'
+      if (document.execCommand('copy')) {
-          });
+        this.$notify({
-        }
+          showClose: true,
-      } catch (err) {
+          message: '已复制渲染后的文章到剪贴板，可直接到公众号后台粘贴',
+          offset: 80,
+          duration: 1600,
+          type: 'success'
+        });
+      } else {
         this.$notify({
           showClose: true,
           message: '未能复制文章到剪贴板，请全选后右键复制',

index.html

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