提交

src/common/js/commonJS.js

@@ -1152,7 +1152,51 @@ export default {
 
 
     initEditorButton(vueInstance, ed) {
-
+        ed.ui.registry.addButton('copyButton', {
+            text: 'Copy',
+            onAction: function () {
+                var edSelection = ed.selection;
+                const selectedNode = edSelection.getNode(); // 获取选中的节点
+                let outerDiv = selectedNode;
+                while (outerDiv && outerDiv.tagName !== 'DIV') {
+                    outerDiv = outerDiv.parentNode;
+                }
+                // 如果找到的 div 节点存在
+                if (outerDiv) {
+                    const dataId = outerDiv.getAttribute('main-id');
+                    console.log('dataId at line 1258:', dataId)
+                    window.copiedContent=dataId
+                    // alert('内容已复制',dataId);
+                    // vueInstance.$emit('onAddRow', dataId);
+                }
+            //   alert('内容已复制');
+            }
+          });
+      
+          // 自定义粘贴按钮
+          ed.ui.registry.addButton('pasteButton', {
+            text: 'Paste',
+            onAction: function () { var edSelection = ed.selection;
+                const selectedNode = edSelection.getNode(); // 获取选中的节点
+                let outerDiv = selectedNode;
+                while (outerDiv && outerDiv.tagName !== 'DIV') {
+                    outerDiv = outerDiv.parentNode;
+                }
+                // 如果找到的 div 节点存在
+                if (outerDiv) {
+                    const dataId = outerDiv.getAttribute('main-id');
+                   if(window.copiedContent&&window.copiedContent!='dataId'){
+                    vueInstance.$emit('onSort', dataId,window.copiedContent);
+                   }else{
+                    alert('没有复制的内容');
+                   }
+                    // alert('内容已复制',dataId);
+                    // vueInstance.$emit('onAddRow', dataId);
+                }
+              // 将存储的复制内容插入到当前光标位置
+             
+            }
+          });
         ed.ui.registry.addMenuButton('customDropdown', {
             text: 'Set Title', // 下拉框标题
             fetch: function (callback) {
@@ -1531,37 +1575,29 @@ export default {
     },
     inTinymceButtonClass() {
         setTimeout(function () {
-            // 查找该按钮并添加 className
+            // 使用 querySelectorAll 获取所有符合条件的按钮
-            const commentaddbutton = document.querySelector('.tox-toolbar .tox-toolbar__group .tox-tbtn[data-mce-name="commentadd"]');
+            const buttons = [
-            if (commentaddbutton) {
+                { selector: '.tox-tbtn[data-mce-name="commentadd"]', className: 'tinymce-custom-button-commentadd' },
-                commentaddbutton.classList.add('tinymce-custom-button-commentadd');
+                { selector: '.tox-tbtn[data-mce-name="addrow"]', className: 'tinymce-custom-button-addrow' },
-            }
+                { selector: '.tox-tbtn[data-mce-name="delete"]', className: 'tinymce-custom-button-delete' },
-            const addrowbutton = document.querySelector('.tox-toolbar .tox-toolbar__group .tox-tbtn[data-mce-name="addrow"]');
+                { selector: '.tox-tbtn[data-mce-name="edit"]', className: 'tinymce-custom-button-edit' },
-            if (addrowbutton) {
+                { selector: '.tox-tbtn[data-mce-name="save"]', className: 'tinymce-custom-button-save' },
-                addrowbutton.classList.add('tinymce-custom-button-addrow');
+                { selector: '.tox-tbtn[data-mce-name="customblue"]', className: 'tinymce-custom-button-blue' },
-            }
+                { selector: '.tox-tbtn[data-mce-name="removeblue"]', className: 'tinymce-custom-button-removeblue' }
-            const deletebutton = document.querySelector('.tox-toolbar .tox-toolbar__group .tox-tbtn[data-mce-name="delete"]');
+            ];
-            if (deletebutton) {
+    
-                deletebutton.classList.add('tinymce-custom-button-delete');
+            // 遍历每个按钮并为每个按钮添加类
-            }
+            buttons.forEach(item => {
-            const editbutton = document.querySelector('.tox-toolbar .tox-toolbar__group .tox-tbtn[data-mce-name="edit"]');
+                const buttonElements = document.querySelectorAll(item.selector);
-            if (editbutton) {
+                buttonElements.forEach(button => {
-                editbutton.classList.add('tinymce-custom-button-edit');
+                    if (!button.classList.contains(item.className)) {  // 防止重复添加
-            }
+                        button.classList.add(item.className);
-            const savebutton = document.querySelector('.tox-toolbar .tox-toolbar__group .tox-tbtn[data-mce-name="save"]');
+                    }
-            if (savebutton) {
+                });
-                savebutton.classList.add('tinymce-custom-button-save');
+            });
-            }
-            const button = document.querySelector('.tox-toolbar .tox-toolbar__group .tox-tbtn[data-mce-name="customblue"]');
-            if (button) {
-                button.classList.add('tinymce-custom-button-blue');
-            }
-            const removebutton = document.querySelector('.tox-toolbar .tox-toolbar__group .tox-tbtn[data-mce-name="removeblue"]');
-            if (removebutton) {
-                removebutton.classList.add('tinymce-custom-button-removeblue');
-            }
         }, 100); // 延迟执行，确保按钮渲染完成
     }
+    
 
     // 通用递归方法
 

src/components/page/GenerateCharts.vue

@@ -86,7 +86,7 @@
                 </div> -->
 
                 <common-word
-                    :key="Main_List"
+                    :key="new Date().getTime()"
                     v-if="htmlContent"
                     ref="commonWord"
                     :value="htmlContent"
@@ -94,6 +94,7 @@
                     :comments="comments"
                     :wordStyle="wordStyle"
                     @onDrop="onDrop"
+                    @onSort="onSort"
                     @saveContent="saveContent"
                     @editComment="editComment"
                     @loaded="loadedWord"
@@ -179,6 +180,7 @@
             <el-form ref="editMes" :model="lineStyle" label-width="115px">
                 <el-form-item label="Table Title :">
                     <common-content
+                        :id="`editor-${new Date().getTime()}-${lineStyle.am_id}-${lineStyle.amt_id}-title`"
                         :isAutomaticUpdate="true"
                         :value="lineStyle.title"
                         @getContent="getContent"
@@ -194,7 +196,6 @@
                         <font style="color: #f56c6c; margin-right: 5px">*</font>
                         Table :
                     </span>
-
                     <common-table
                         @getContent="getContent"
                         v-if="threeVisible"
@@ -205,6 +206,7 @@
                 </el-form-item>
                 <el-form-item label="Bottom Title :">
                     <common-content
+                        :id="`editor-${new Date().getTime()}-${lineStyle.am_id}-${lineStyle.amt_id}-note`"
                         :isAutomaticUpdate="true"
                         :value="lineStyle.note"
                         @getContent="getContent"
@@ -231,8 +233,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">
+                    <p style="background: #eef0f4; line-height: 20px; padding: 10px; box-sizing: border-box" v-html="commentForm.content">
-                        {{ commentForm.content }}
+                       
                     </p>
                 </el-form-item>
                 <el-form-item label="Word">
@@ -628,6 +630,21 @@ export default {
                     }
                 });
         },
+        async onSort(mainId,sortId) {
+        console.log('mainId at line 633:', mainId)
+        console.log('sortId at line 633:', sortId)
+            var that = this;
+            // await that.$api
+            //     .post(that.urlList.sort, {
+            //         article_id: this.articleId
+            //     })
+            //     .then(async (res) => {
+            //         if (res.code == 0) {
+            //             this.ManuscirptContent = res.data.list;
+            //             // this.$refs.commonWordHtmlTypeSetting.getCommentList();
+            //         }
+            //     });
+        },
         changeComment() {
             this.isShowComment = !this.isShowComment;
         },
@@ -884,8 +901,8 @@ export default {
                 });
         },
         async onAddRow(mainId) {
-        console.log('data at line 886:', mainId)
+            console.log('data at line 886:', mainId);
-           
+
             await this.$api
                 .post(this.urlList.addRow, {
                     am_id: mainId,

src/components/page/components/table/word.vue

@@ -60,38 +60,46 @@
                         </font>
                     </div>
                     <div
-                        id="drop-target"
+    id="drop-target"
-                        @dragover="handleDragOver"
+    @dragover="handleDragOver"
-                        @dragenter="handleDragEnter"
+    @dragenter="handleDragEnter"
-                        @dragleave="handleDragLeave"
+    @dragleave="handleDragLeave"
-                        @drop="handleDrop"
+    @drop="handleDrop"
-                        @click="initializeEditor(item.am_id, 'table', item)"
+    @click="initializeEditor(item.am_id, 'table', item)"
-                        class="thumbnailTableBox wordTableHtml table_Box pMain myeditabledivTable drop-target"
+    class="thumbnailTableBox wordTableHtml table_Box pMain myeditabledivTable drop-target"
-                        v-else-if="item.type == 2"
+    v-else-if="item.type == 2"
-                        :main-state="item.state"
+    :main-state="item.state"
-                        :remark="item.checks.length > 0 ? 1 : 0"
+    :remark="item.checks.length > 0 ? 1 : 0"
-                        :contenteditable="!readonly && !isPreview"
+    :contenteditable="!readonly && !isPreview"
-                        :data-id="item.amt_id"
+    :data-id="item.amt_id"
-                        :type="item.type"
+    :type="item.type"
-                        :id="'editor' + item.am_id"
+    :id="'editor' + item.am_id"
-                        :main-id="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 class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
-                        </font>
+        <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)">
+    <table border="1" style="width: auto; border-collapse: collapse; text-align: center">
-                                <td :colspan="`${cell.colspan || 1}`" :rowspan="`${cell.rowspan || 1}`" v-for="(cell, i1) in row">
+        <tr v-for="(row, i) in JSON.parse(item.table.table_data)" :key="i">
-                                    <span v-html="cell.text"></span>
+            <td 
-                                </td>
+                v-for="(cell, i1) in row" 
-                            </tr>
+                :key="i1" 
-                        </table>
+                :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"
@@ -130,6 +138,7 @@
                 class="commentList"
             >
                 <li
+                
                     v-for="(item, index) in commentList"
                     class="comment-item annotation"
                     :data-target="`main-${item.am_id}`"
@@ -155,6 +164,7 @@
                                 box-sizing: border-box;
                                 border-bottom: 1px solid rgba(243, 213, 213);
                             "
+                            :style="commont.estate == 1? 'background:#13bc200f;' : ''"
                             v-for="(commont, commentIndex) in item.comment"
                             @click="highlightLeftComment(commont.amc_id, item.am_id)"
                         >
@@ -714,10 +724,10 @@ 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'],
+                toolbar: _this.isEditComment ? ['commentAdd |delete|  level1 level2 level3|addRow|copyButton pasteButton|Edit'] : ['delete|addRow|copyButton pasteButton| Edit'],
                 end_container_on_empty_block: true,
                 content_css: 'default ',
                 content_style: `${tableStyle + this.wordStyle}
@@ -773,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}
 
 
@@ -858,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}
 
                                 `,
@@ -988,13 +998,18 @@ export default {
             const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}`;
 
             return formattedDate;
+        },
+        goToListComment(data) {
+        console.log('data at line 993:', data)
+        this.goToComment(data.am_id)
+           
         },
         divOnScroll() {
             if (!this.isPreview) {
                 // const scrollTop = scrollDiv.scrollTop; // 获取垂直滚动距离
                 this.scrollPosition = this.$refs.scrollDiv.scrollTop;
                 localStorage.setItem('scrollPosition', this.scrollPosition);
-                console.log('this.scrollPosition at line 980:', this.scrollPosition);
+                // console.log('this.scrollPosition at line 980:', this.scrollPosition);
                 // 检查每个编辑器是否在可视区域内
                 for (const key in this.editors) {
                     const editorElement = document.getElementById(key);
@@ -1044,62 +1059,65 @@ export default {
 
             return emptyContentIndexes;
         },
+         escapeRegExp(string) {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+},
         highlightText(text, annotations) {
-            if (!this.isPreview) {
+    if (!this.isPreview) {
-                let tempText = text;
+        let tempText = text;
 
-                // 1. 使用占位符替代批注内容
+        // 1. 使用占位符替代批注内容
-                const placeholders = [];
+        const placeholders = [];
-                annotations.forEach((annotation, index) => {
+        annotations.forEach((annotation, index) => {
-                    if (annotation.content == '') {
+            if (annotation.content == '') {
-                        return tempText;
-                    }
-                    const placeholder = `{{remark_placeholder_${index}}}`; // 占位符
-                    const regExp = new RegExp(`(${annotation.content})`, 'gi'); // 全局匹配批注内容
-
-                    // 如果批注内容存在，替换成占位符
-                    if (tempText.includes(annotation.content)) {
-                        tempText = tempText.replace(regExp, placeholder);
-                        placeholders.push({ placeholder, annotation, index });
-                    }
-                });
-
-                // 2. 为占位符添加高亮
-                placeholders.forEach(({ placeholder, annotation, index }) => {
-                    const regExp = new RegExp(placeholder, 'gi');
-
-                    tempText = tempText.replace(regExp, (match) => {
-                        // 随机生成浅色透明背景颜色
-                        const randomColor = this.getRandomLightColor();
-
-                        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. 返回处理后的文本
                 return tempText;
-            } else {
-                return text;
             }
-        },
+            const escapedContent = this.escapeRegExp(annotation.content); // 转义正则表达式中的特殊字符
+            const placeholder = `{{remark_placeholder_${index}}}`; // 占位符
+            const regExp = new RegExp(`(${escapedContent})`, 'gi'); // 全局匹配批注内容
+
+            // 如果批注内容存在，替换成占位符
+            if (tempText.includes(annotation.content)) {
+                tempText = tempText.replace(regExp, placeholder);
+                placeholders.push({ placeholder, annotation, index });
+            }
+        });
+
+        // 2. 为占位符添加高亮
+        placeholders.forEach(({ placeholder, annotation, index }) => {
+            const regExp = new RegExp(placeholder, 'gi');
+
+            tempText = tempText.replace(regExp, (match) => {
+                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>
+                `;
+            });
+        });
+
+        // 3. 返回处理后的文本
+        return tempText;
+    } else {
+        return text;
+    }
+},
+
 
         getCommentsData() {
             if (!this.isPreview) {