修复文本分析时，复制分析文本到富文本丢失样式

package-lock.json

@@ -4587,6 +4587,27 @@
       "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
       "dev": true
     },
+    "cnchar": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmmirror.com/cnchar/-/cnchar-3.2.5.tgz",
+      "integrity": "sha512-VJaF9FRjabzP2lIBAoffFVlAp7kbO/HJfmBttJIyoA16GSwT9jNwTm7Dh8AIIuppcnGYXs/LnrwDIaC7qExzpQ==",
+      "requires": {
+        "cnchar-types": "^3.2.5"
+      }
+    },
+    "cnchar-radical": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmmirror.com/cnchar-radical/-/cnchar-radical-3.2.5.tgz",
+      "integrity": "sha512-Rh0FbSk1cOlvPIFiy8MIhwCOgOGZLOvnPjr8Ba3ZWe/2225fetdN/6RiMndQvj+VGewCcAaEPCpMonuxzUPKNw==",
+      "requires": {
+        "cnchar-types": "^3.2.5"
+      }
+    },
+    "cnchar-types": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmmirror.com/cnchar-types/-/cnchar-types-3.2.5.tgz",
+      "integrity": "sha512-E4QhUYzCmlZB5EcEXnz9ZrTWl/Cf+Asat6DcMH4TzlmC73NLA/SoEef8Z+IrO7pWKjUA7ZALzERlgVUfC0Wg3A=="
+    },
     "coa": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/coa/-/coa-2.0.2.tgz",
@@ -11539,6 +11560,11 @@
         "pinkie": "^2.0.0"
       }
     },
+    "pinyin-pro": {
+      "version": "3.19.4",
+      "resolved": "https://registry.npmmirror.com/pinyin-pro/-/pinyin-pro-3.19.4.tgz",
+      "integrity": "sha512-xgv2T3zy3vwB3D5bAp/Mvmg+SzTLe2Oq5p0uqQNTHAw2ZXIBclLk/4H8nsFpFF0rweZoS3lVLLjG2BDINxgQaQ=="
+    },
     "pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmmirror.com/pkg-dir/-/pkg-dir-4.2.0.tgz",

src/views/Textanalysis/index.vue

@@ -282,7 +282,7 @@
               </div>
               <span class="edit-btn" @click="editArticle()"><i class="el-icon-edit"></i>修改文本</span>
             </div>
-            <div class="articel">
+            <div ref="articel" class="articel">
               <div v-for="(items, index) in ArticelData" :key="index + 'paragraph'" class="paragraph">
                 <!-- <span
                   class="sentence"
@@ -938,7 +938,7 @@
         <span class="left">{{ noPosContent.length }}/{{ 3000 }}</span>
         <div>
           <el-button @click="handleClose">取 消</el-button>
-          <el-button type="primary" @click="saveWord(id)" :loading="loading">确 定</el-button>
+          <el-button type="primary" :loading="loading" @click="saveWord(id)">确 定</el-button>
         </div>
       </span>
     </el-dialog>
@@ -1044,6 +1044,55 @@ export default {
       this.noPosContent = record.txt;
     });
   },
+  mounted() {
+    // 为了复制到富文本不丢失样式
+    this.$refs.articel.addEventListener('copy', (e) => {
+      // 获取用户的选区
+      let content = window.getSelection().getRangeAt(0).cloneContents();
+      let div = document.createElement('div');
+      div.classList = 'paragraph';
+      div.style = 'display: flex; flex-wrap: wrap; margin-bottom: 22px;font-weight: 500;';
+      // 将 content 设到 div 中
+      div.appendChild(content);
+      console.log(div);
+      // words
+      let words = div.querySelectorAll('.words');
+      words.forEach((item) => {
+        item.style.cssText += 'display: flex;';
+      });
+      // word
+      let word = div.querySelectorAll('.word');
+      word.forEach((item) => {
+        item.style.cssText +=
+          item.style.display === 'initial' ? 'text-align: center;' : 'display: flex; text-align: center;';
+      });
+      // pinyin
+      let pinyin = div.querySelectorAll('.pinyin');
+      pinyin.forEach((item) => {
+        item.style.cssText +=
+          'min-height: 12px; font-family: "League"; line-height: 12px; color: rgba(0, 0, 0, 50%); text-align: center;';
+      });
+      // hanzi
+      let hanzi = div.querySelectorAll('.hanzi');
+      hanzi.forEach((item) => {
+        item.style.cssText += 'line-height: 28px; color: #000; text-align: center;';
+      });
+      // hanzi_fz
+      let hanzi_fz = div.querySelectorAll('.hanzi-fz');
+      hanzi_fz.forEach((item) => {
+        item.style.cssText += 'font-family: "FZJCGFKTK";';
+      });
+
+      // 将 div 转为字符串，包含样式
+      let divHtml = div.outerHTML;
+
+      // 修改复制到剪贴板的数据
+      e.clipboardData.setData('text/html', divHtml);
+
+      // 阻止默认的复制操作
+      e.preventDefault();
+    });
+  },
   methods: {
     // 词表
     gowordTable() {
@@ -1081,28 +1130,16 @@ export default {
         // this.$(".articel").html(html);
       }
       let richness =
-        '<div style="text-align:center;font-size: 五号;font-weight: 600;line-height: 22px;color: #a5a5a5;">' +
-        '音节丰富度 ' +
-        (this.difficulty.pinyinDifficulty * 1).toFixed(2) +
-        ' | ' +
-        this.base.pinyinCount +
-        '/' +
-        this.base.pinyinTextCount +
-        '    ' +
-        '汉字丰富度 ' +
-        (this.difficulty.wordDifficulty * 1).toFixed(2) +
-        ' | ' +
-        this.base.wordCount +
-        '/' +
-        this.base.wordTextCount +
-        '    ' +
-        '词汇丰富度 ' +
-        (this.difficulty.vocabularyDifficulty * 1).toFixed(2) +
-        ' | ' +
-        this.base.vocabularyCount +
-        '/' +
-        this.base.vocabularyTextCount +
-        '</div><br/>';
+        `<div style="text-align:center;font-size: 五号;font-weight: 600;line-height: 22px;color: #a5a5a5;">` +
+        `音节丰富度 ${Number(this.difficulty.pinyinDifficulty).toFixed(2)} | ${this.base.pinyinCount}/${
+          this.base.pinyinTextCount
+        }    ` +
+        `汉字丰富度 ${Number(this.difficulty.wordDifficulty).toFixed(2)} | ${this.base.wordCount}/${
+          this.base.wordTextCount
+        }    ` +
+        `词汇丰富度 ${Number(this.difficulty.vocabularyDifficulty).toFixed(2)} | ${this.base.vocabularyCount}/${
+          this.base.vocabularyTextCount
+        }</div><br/>`;
       let dv = document.createElement('div');
       dv.id = 'html_dv';
       dv.innerHTML = richness + html;
@@ -1207,9 +1244,7 @@ export default {
       document.body.removeChild(elink);
     },
     ciyunEvent() {
-      window.location.href =
-        window.location.origin +
-        `/GCLS-TC/ciyun/ciyunindex.html?partitionKey=${this.id}&searchType=${this.leftNavIndex}&userID=${this.userID}`;
+      window.location.href = `${window.location.origin}/GCLS-TC/ciyun/ciyunindex.html?partitionKey=${this.id}&searchType=${this.leftNavIndex}&userID=${this.userID}`;
       // window.open(
       //   `./ciyun/ciyunindex.html?partitionKey=${this.id}&searchType=${this.leftNavIndex}&userID=${this.userID}`,
       //   '_blank',
@@ -2052,26 +2087,29 @@ export default {
 
       > .left {
         width: 352px;
+
         .go-back {
-          border-radius: 4px;
-          border: 1px solid #d9d9d9;
-          background: #fff;
-          box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.02);
           display: flex;
+          align-items: center;
           width: 60px;
-          color: #333;
+          padding: 9px 8px;
+          margin-bottom: 16px;
           font-size: 14px;
           font-weight: 400;
           line-height: 22px;
-          padding: 9px 8px;
-          align-items: center;
+          color: #333;
           cursor: pointer;
-          margin-bottom: 16px;
+          background: #fff;
+          border: 1px solid #d9d9d9;
+          border-radius: 4px;
+          box-shadow: 0 2px 0 0 rgba(0, 0, 0, 2%);
+
           .el-icon-arrow-left {
-            font-size: 16px;
             margin-right: 8px;
+            font-size: 16px;
           }
         }
+
         .top_nav {
           display: flex;
           align-items: center;
@@ -2191,8 +2229,8 @@ export default {
 
         .result-left-numberclose {
           display: flex;
-          justify-content: space-between;
           align-items: center;
+          justify-content: space-between;
           padding-bottom: 16px;
           margin-top: 16px;
           font-size: 14px;
@@ -2202,9 +2240,11 @@ export default {
 
           .resule-right-btn {
             display: inline-block;
+            height: 32px;
+
             // width: 88px;
             padding: 0 16px;
-            height: 32px;
+            margin-left: 8px;
             line-height: 32px;
             text-align: center;
             cursor: pointer;
@@ -2212,7 +2252,6 @@ export default {
             border: 1px solid #d9d9d9;
             border-radius: 4px;
             box-shadow: 0 2px 0 rgba(0, 0, 0, 2%);
-            margin-left: 8px;
           }
         }
 
@@ -2362,11 +2401,11 @@ export default {
           position: relative;
           width: 352px;
           height: 374px;
+          padding-top: 20px;
           margin: 0 auto;
           margin-top: 24px;
           background: #f5f5f5;
           border-radius: 4px;
-          padding-top: 20px;
 
           .tubiao_top {
             height: 22px;
@@ -2516,23 +2555,26 @@ export default {
           height: calc(100% - 137px);
           padding: 12px 15px;
           margin-top: 16px;
+          border: 1px solid rgba(0, 0, 0, 8%);
+
           // background: #f9f9f9;
           border-radius: 4px;
-          border: 1px solid rgba(0, 0, 0, 0.08);
 
           .right_main_top {
             display: flex;
+            flex: 1;
             align-items: center;
             justify-content: center;
             font-size: 14px;
             font-weight: 600;
             line-height: 22px;
             color: #a5a5a5;
-            flex: 1;
+
             > div {
               display: flex;
               align-items: center;
             }
+
             .twoline {
               margin: 0 20px;
 
@@ -2545,24 +2587,27 @@ export default {
             //   margin-left: 24px;
             // }
             .line {
+              flex-shrink: 0;
               width: 1px;
               margin: 0 12px;
-              color: #525252;
-              flex-shrink: 0;
               font-size: 12px;
               line-height: 1;
+              color: #525252;
             }
           }
+
           .edit-btn {
-            color: #000;
             font-size: 14px;
             font-weight: 600;
             line-height: 22px;
+            color: #000;
             cursor: pointer;
+
             .el-icon-edit {
               margin-right: 8px;
             }
           }
+
           .articel {
             width: 640px;
             margin: 0 auto;
@@ -2582,8 +2627,8 @@ export default {
                 display: flex;
 
                 .word {
-                  text-align: center;
                   display: flex;
+                  text-align: center;
                 }
 
                 .pinyin {
@@ -2599,6 +2644,7 @@ export default {
                   color: #000;
                   text-align: center;
                 }
+
                 .hanzi-fz {
                   font-family: 'FZJCGFKTK';
                 }
@@ -2640,27 +2686,33 @@ export default {
     height: 8px;
   }
 }
+
 .edit-dialog {
   .el-dialog__header {
     padding: 0;
   }
+
   .el-dialog__body {
     padding: 16px;
   }
+
   .el-dialog__footer {
     padding-top: 0;
   }
+
   .dialog-footer {
     display: flex;
     justify-content: space-between;
+
     .el-button {
-      border-radius: 4px;
-      border: 1px solid rgba(0, 0, 0, 0.15);
-      background: #f8f8f8;
-      box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.04);
       width: 124px;
       padding: 8px;
       color: #000;
+      background: #f8f8f8;
+      border: 1px solid rgba(0, 0, 0, 15%);
+      border-radius: 4px;
+      box-shadow: 0 2px 0 0 rgba(0, 0, 0, 4%);
+
       &.el-button--primary {
         background: #ffc600;
       }