From d652ab235471faa93120a2e359a201712d728bfb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A7=8B=E4=BA=8E=E5=88=9D=E8=A7=81?= <752204717@qq.com>
Date: Thu, 23 Jan 2025 11:13:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/page/GenerateCharts.vue        |   4 +-
 .../page/components/Tinymce/index.vue         |   2 +-
 .../page/components/table/content.vue         |   2 +-
 .../page/components/table/table.vue           |   2 +-
 src/components/page/components/table/word.vue | 117 ++++++++++--------
 5 files changed, 67 insertions(+), 60 deletions(-)

diff --git a/src/components/page/GenerateCharts.vue b/src/components/page/GenerateCharts.vue
index 4b95d40..f2e9f47 100644
--- a/src/components/page/GenerateCharts.vue
+++ b/src/components/page/GenerateCharts.vue
@@ -232,8 +232,8 @@
         >
             <el-form ref="editMes" :model="commentForm" label-width="115px">
                 <el-form-item label="Select Content:" v-if="commentForm.content">
-                    <p style="background: #eef0f4; line-height: 20px; padding: 10px; box-sizing: border-box">
-                        {{ commentForm.content }}
+                    <p style="background: #eef0f4; line-height: 20px; padding: 10px; box-sizing: border-box" v-html="commentForm.content">
+                       
                     </p>
                 </el-form-item>
                 <el-form-item label="Word">
diff --git a/src/components/page/components/Tinymce/index.vue b/src/components/page/components/Tinymce/index.vue
index a5b877b..725eb64 100644
--- a/src/components/page/components/Tinymce/index.vue
+++ b/src/components/page/components/Tinymce/index.vue
@@ -357,7 +357,7 @@ export default {
                 statusbar: false, // 关闭底部状态栏
                 custom_colors: false,
                 color_map: ['0082AA', 'TMR Blue'],
-                plugins: 'forecolor code paste table image mathType', // 启用 forecolor 和 code 插件
+                plugins: 'forecolor code paste table image mathType searchreplace', // 启用 forecolor 和 code 插件
                 end_container_on_empty_block: true,
                 content_css: 'default', // 加载 TinyMCE 默认样式表
                 mathjax: {
diff --git a/src/components/page/components/table/content.vue b/src/components/page/components/table/content.vue
index 6d620dc..d76efa1 100644
--- a/src/components/page/components/table/content.vue
+++ b/src/components/page/components/table/content.vue
@@ -15,7 +15,7 @@
                 :value="value"
                 :typesettingType="typesettingType"
                 class="paste-area text-container"
-                :toolbar="['bold italic|customBlue removeBlue|subscript superscript|clearButton']"
+                :toolbar="['bold italic|customBlue removeBlue|subscript superscript|searchreplace|clearButton']"
                 style="
                     /* white-space: pre-line; */
                     line-height: 12px;
diff --git a/src/components/page/components/table/table.vue b/src/components/page/components/table/table.vue
index a72148e..131e492 100644
--- a/src/components/page/components/table/table.vue
+++ b/src/components/page/components/table/table.vue
@@ -11,7 +11,7 @@
                 :value="updatedHtml"
                 :typesettingType="typesettingType"
                 class="paste-area text-container"
-                :toolbar="['bold italic|customBlue removeBlue|subscript superscript|table tabledelete| mathType |clearButton']"
+                :toolbar="['bold italic|customBlue removeBlue|subscript superscript|table tabledelete| searchreplace |clearButton']"
                 style="
                     /* white-space: pre-line; */
                     line-height: 12px;
diff --git a/src/components/page/components/table/word.vue b/src/components/page/components/table/word.vue
index 448150c..d223a40 100644
--- a/src/components/page/components/table/word.vue
+++ b/src/components/page/components/table/word.vue
@@ -60,38 +60,46 @@
                         </font>
                     </div>
                     <div
-                        id="drop-target"
-                        @dragover="handleDragOver"
-                        @dragenter="handleDragEnter"
-                        @dragleave="handleDragLeave"
-                        @drop="handleDrop"
-                        @click="initializeEditor(item.am_id, 'table', item)"
-                        class="thumbnailTableBox wordTableHtml table_Box pMain myeditabledivTable drop-target"
-                        v-else-if="item.type == 2"
-                        :main-state="item.state"
-                        :remark="item.checks.length > 0 ? 1 : 0"
-                        :contenteditable="!readonly && !isPreview"
-                        :data-id="item.amt_id"
-                        :type="item.type"
-                        :id="'editor' + item.am_id"
-                        :main-id="item.am_id"
-                    >
-                        <font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
-                            <span v-html="item.table.title ? item.table.title : ''"></span>
-                        </font>
+    id="drop-target"
+    @dragover="handleDragOver"
+    @dragenter="handleDragEnter"
+    @dragleave="handleDragLeave"
+    @drop="handleDrop"
+    @click="initializeEditor(item.am_id, 'table', item)"
+    class="thumbnailTableBox wordTableHtml table_Box pMain myeditabledivTable drop-target"
+    v-else-if="item.type == 2"
+    :main-state="item.state"
+    :remark="item.checks.length > 0 ? 1 : 0"
+    :contenteditable="!readonly && !isPreview"
+    :data-id="item.amt_id"
+    :type="item.type"
+    :id="'editor' + item.am_id"
+    :main-id="item.am_id"
+>
+    <!-- 标题部分 -->
+    <font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
+        <span v-html="highlightText(item.table.title || '', item.checks)"></span>
+    </font>
 
-                        <table border="1" style="width: auto; border-collapse: collapse; text-align: center">
-                            <tr v-for="(row, i) in JSON.parse(item.table.table_data)">
-                                <td :colspan="`${cell.colspan || 1}`" :rowspan="`${cell.rowspan || 1}`" v-for="(cell, i1) in row">
-                                    <span v-html="cell.text"></span>
-                                </td>
-                            </tr>
-                        </table>
+    <!-- 表格部分 -->
+    <table border="1" style="width: auto; border-collapse: collapse; text-align: center">
+        <tr v-for="(row, i) in JSON.parse(item.table.table_data)" :key="i">
+            <td 
+                v-for="(cell, i1) in row" 
+                :key="i1" 
+                :colspan="`${cell.colspan || 1}`" 
+                :rowspan="`${cell.rowspan || 1}`">
+                <span v-html="highlightText(cell.text || '', item.checks)"></span>
+            </td>
+        </tr>
+    </table>
+
+    <!-- 备注部分 -->
+    <font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
+        <span v-html="highlightText(item.table.note || '', item.checks)"></span>
+    </font>
+</div>
 
-                        <font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
-                            <span v-html="item.table.note ? item.table.note : ''"></span
-                        ></font>
-                    </div>
 
                     <div
                         id="drop-target"
@@ -716,7 +724,7 @@ export default {
                 image_advtab: false, // 禁用图片高级选项卡（防止自动调整大小）
                 valid_elements: '*[*]',
 
-                plugins: 'forecolor code paste table image resize searchreplace dragdrop',
+                plugins: 'forecolor code paste table image resize  dragdrop',
 
                 menubar: false,
                 toolbar: _this.isEditComment ? ['commentAdd |delete|  level1 level2 level3|addRow|Edit'] : ['delete|addRow| Edit'],
@@ -775,7 +783,7 @@ export default {
                 image_advtab: false, // 禁用图片高级选项卡（防止自动调整大小）
                 valid_elements: '*[*]',
 
-                plugins: 'forecolor code paste table image resize searchreplace',
+                plugins: 'forecolor code paste table image resize ',
                 content_style: `${tableStyle + this.wordStyle}
 
 
@@ -860,7 +868,7 @@ export default {
                 table_resize_bars: true,
                 valid_elements: '*[*]',
                 image_advtab: false, // 禁用图片高级选项卡（防止自动调整大小）
-                plugins: 'forecolor code paste table image resize searchreplace',
+                plugins: 'forecolor code paste table image resize ',
                 content_style: `${tableStyle + this.wordStyle}
 
                                 `,
@@ -1076,29 +1084,28 @@ export default {
                     const regExp = new RegExp(placeholder, 'gi');
 
                     tempText = tempText.replace(regExp, (match) => {
-                        // 随机生成浅色透明背景颜色
-                        const randomColor = this.getRandomLightColor();
+    const randomColor = this.getRandomLightColor();
+    return `
+        <span 
+            class="remarkbg"
+            style="background-color: ${randomColor}; 
+                   position: relative; 
+                   display: inline-block; 
+                   white-space: nowrap; 
+                   overflow-wrap: anywhere; 
+                   border-left: 2px solid #cd5454; 
+                   border-right: 2px solid #cd5454;"
+            comment-Id="${annotation.amc_id}"
+        >
+            ${annotation.content}
+            <span class="positionRemarkIndex"
+                style="position: absolute; top: -14px; right: -10px; font-size: 0.8em; color: red;">
+                ${index + 1}
+            </span>
+        </span>
+    `;
+});
 
-                        let highlightedText = `
-                <span class="remarkbg"
-                ref="remark_${annotation.amc_id}"
-                    style="background-color: ${randomColor} !important;
-                        position: relative !important;
-                        border-left: 2px solid #cd5454 !important;
-                        border-right: 2px solid #cd5454 !important;"
-                    comment-Id="${annotation.amc_id}"
-                    
-                    >
-                    ${annotation.content}
-                    <span class="positionRemarkIndex"
-                        style="position: absolute; top: -14px; right: -10px; font-size: 0.8em; color: red;">
-                        ${index + 1}
-                    </span>
-                </span>
-            `;
-
-                        return highlightedText;
-                    });
                 });
 
                 // 3. 返回处理后的文本