提交

src/assets/css/main.css

@@ -1,8 +1,9 @@
 :root {
-	--primary-comment-deep: #00BFFF;    /* 深天蓝：用于边框、标题、重要按钮 */
+	--primary-comment-deep: #ffcf30;   
-	--primary-comment-main: #87CEEB;    /* 天蓝色：主色调，用于普通高亮 */
+	--primary-comment-main: #87CEEB;    
-	--primary-comment-light: #B0E2FF;   /* 浅天蓝：用于鼠标悬停 (hover) 效果 */
+	--primary-comment-light: #ffcf30;  
-	--primary-comment-bg: #F0F8FF;      /* 爱丽丝蓝：最浅底色，用于批注框背景 */
+	--primary-comment-bg: #ffe796;     
+	--primary-comment-font-deep: #ff9814;
   }
 * {
 	margin: 0;

src/common/js/commonJS.js

@@ -843,7 +843,7 @@ export default {
             // 使用正则表达式删除属性（保留 data-latex）
             let updatedAttributes = attributes.replace(/\s([a-zA-Z0-9-]+)(="[^"]*")?/g, function (attrMatch, attrName) {
 
-                if (attrName === "data-latex") {
+                if (attrName === "data-latex" || attrName === "data-id") {
                     return attrMatch;
                 }
                 if (type == 'table' && tag == 'img' && (attrName === "src" || attrName === "width" || attrName === "height")) {
@@ -856,9 +856,9 @@ export default {
         });
         // 2. 删除所有不需要的标签 (除 `strong`, `em`, `sub`, `sup`, `b`, `i` 外的所有标签)
         if (type == 'table') {
-            inputHtml = inputHtml.replace(/<(?!\/?(strong|em|sub|sup|b|i|blue|wmath|img))[^>]+>/g, ''); // 删除不需要的标签
+            inputHtml = inputHtml.replace(/<(?!\/?(strong|em|sub|sup|b|i|blue|wmath|img|myfigure|mytable))[^>]+>/g, ''); // 删除不需要的标签
         } else {
-            inputHtml = inputHtml.replace(/<(?!\/?(strong|em|sub|sup|b|i|blue|wmath))[^>]+>/g, ''); // 删除不需要的标签
+            inputHtml = inputHtml.replace(/<(?!\/?(strong|em|sub|sup|b|i|blue|wmath|myfigure|mytable))[^>]+>/g, ''); // 删除不需要的标签
         }
 
 

src/common/js/debounce.js

@@ -34,20 +34,20 @@ function throttle(fn, delay = 1000, immediate = false) {
     let args = arguments
 
     if (immediate) {
-      console.log("立即执行参数 执行一次方法")
+     
       fn.apply(_this, args)
       immediate = false
       return
     }
     if (status) {
-      console.log("当前点击状态为正在重复点击，请稍等片刻后在点击执行")
+     
       return
     }
-    console.log("执行节流：当前执行了一次点击方法")
+  
     fn.apply(_this, args)
     status = true // 修改状态
     timer = setTimeout(() => {
-      console.log("规定时间到,重置状态，可以重新调用")
+     
       status = false
     }, delay)
   }

src/components/common/langs/en.js

@@ -381,7 +381,6 @@ const en = {
 		reply: 'Reply',
 		execute: 'Execute',
 		revoke: 'Revoke',
-
 		solve: 'Solve',
 		cancelsolve: 'Cancel resolved',
 		Resolved: 'Resolved',
@@ -412,9 +411,17 @@ const en = {
 		Multicolumn: 'Multicolumn',
 		singleRow: "single-row",
 		Row: "Row",
+		addRow: "Add Row",
 		Uncheck: 'Uncheck the paragraph',
 		ManuscirptAIProofreading: 'Manuscript AI Proofreading',
+		AIProofreading: 'AI Proofreading',
+		Association: 'Association',
 		BatchAddcontent: 'Batch Add content',
+		MoveUp: 'Move Up',
+		
+		MoveDown: 'Move Down',
+		jump: 'Locate',
+		editAssociation: 'Edit Association',
 	},
 	pendingPayment: {
 		title: 'Title',

src/components/common/langs/zh.js

@@ -398,9 +398,16 @@ const zh = {
 		Multicolumn:'多列',
 		singleRow:"单列",
 		Row:"空行",
+		addRow:"新增空行",
 		Uncheck:'取消勾选段落',
 		ManuscirptAIProofreading:'稿件AI校对',
+		AIProofreading:'AI校对',
+		Association:'关联',
 		BatchAddcontent: '批量添加内容',
+		MoveUp: '上移',
+		MoveDown: '下移',
+		jump: 'Locate',
+		editAssociation: 'Edit Association',
 	},
 	pendingPayment: {
 		title: 'Title',

src/components/page/GenerateCharts.vue

@@ -88,7 +88,7 @@
               </div> -->
 
                 <common-word
-                  
+                :articleId="articleId"
                     v-if="htmlContent"
                     ref="commonWord"
                     :value="htmlContent"
@@ -96,6 +96,7 @@
                     :comments="comments"
                     :wordStyle="wordStyle"
                     @onDrop="onDrop"
+                    @onLinkConfirm="handleConfirmLink"
                     @saveContent="saveContent"
                     @editComment="editComment"
                     @loaded="loadedWord"
@@ -154,6 +155,10 @@
                 </el-form-item>
 
                 <el-form-item label="Figure Title :">
+                    <span slot="label">
+                        <font style="color: #f56c6c; margin-right: 5px">*</font>
+                        Figure Title :
+                    </span>
                     <common-content
                         :isAutomaticUpdate="true"
                         :value="picStyle.title"
@@ -207,6 +212,10 @@
                 <!-- <common-late-x></common-late-x> -->
                 <!-- :id="`editor-${new Date().getTime()}-${lineStyle.am_id}-${lineStyle.amt_id}-title`" -->
                 <el-form-item label="Title:">
+                    <span slot="label">
+                        <font style="color: #f56c6c; margin-right: 5px">*</font>
+                        Title:
+                    </span>
                     <common-content
                         :id="`editor-${new Date().getTime()}-${lineStyle.am_id}-${lineStyle.amt_id}-title`"
                         :isAutomaticUpdate="true"
@@ -696,6 +705,34 @@ export default {
                 this.addComment(content);
             }
         },
+       
+handleConfirmLink(selectedMedia) {
+    // selectedMedia 是你从 el-radio 列表中选中的那一项（包含 ami_id 或 amt_id）
+    const targetId = selectedMedia.select.amt_id || selectedMedia.select.ami_id;
+  
+    const type = selectedMedia.type; // 'table' 或 'figure'
+    const tagName = `my${type}`; // 生成 mytable 或 myfigure
+    
+    // 获取当前段落原本的完整 HTML 内容
+    let originalContent = selectedMedia.linkData.content;
+    // 获取用户选中的纯文本片段
+    const label = selectedMedia.linkData.label;
+
+    if (!label || !originalContent) return;
+
+    // --- 核心替换逻辑 ---
+    // 使用正则匹配选中的文字，并用自定义标签包裹它
+    // 注意：这里需要考虑 label 在 HTML 中可能被拆分的情况，简单处理可直接 replace
+    const replacement = `<${tagName} data-id="${targetId}">${label}</${tagName}>`;
+    
+    // 执行替换（仅替换第一次匹配到的，防止全篇误伤）
+    const newContent = originalContent.replace(label, replacement);
+
+   
+console.log('newContent at line 592:', newContent);
+this.saveContent(newContent, selectedMedia.linkData.mainId);
+        },
+
         async saveContent(content, am_id) {
             var that = this;
             var str = content.replace(/^<p>\s*(.*?)\s*<\/p>$/, '$1').trim();
@@ -1622,10 +1659,19 @@ this.lineStyle1 = { ...formattedData }; // 使用浅拷贝确保两个变量指
 
         // 确定保存图片
         async savePic() {
-            this.picStyle.picUrl;
+          
 
             var str = this.picStyle1.note ? await this.$commonJS.decodeHtml(this.picStyle1.note) : '';
             var titleStr = this.picStyle1.title ? await this.$commonJS.decodeHtml(this.picStyle1.title) : '';
+
+            if (!this.picStyle.picUrl) {
+                this.$message.error('Please upload a picture');
+                return;
+            }
+            if (!titleStr) {
+                this.$message.error('Please enter a title');
+                return;
+            }
             if (this.picStyle.visiTitle == 'Edit Figure') {
                 this.$api
                     .post(this.urlList.editImage, {
@@ -1720,14 +1766,18 @@ this.lineStyle1 = { ...formattedData }; // 使用浅拷贝确保两个变量指
             }
             if (strTitle != '') {
                 strTitle = await this.$commonJS.decodeHtml(strTitle);
+            }else{
+                this.$message.error('Please enter a title');
+                return;
             }
-            const loading = this.$loading({
+           
+            if (content && cleanedTableList && cleanedTableList.length > 0) {
+                const loading = this.$loading({
                 lock: true,
                 text: 'Loading...',
                 spinner: 'el-icon-loading',
                 background: 'rgba(0, 0, 0, 0.7)'
             });
-            if (content && cleanedTableList && cleanedTableList.length > 0) {
                 if (this.lineStyle.visiTitle == 'Edit Table') {
                     this.$api
                         .post(this.urlList.editTable, {
@@ -2287,4 +2337,5 @@ this.lineStyle1 = { ...formattedData }; // 使用浅拷贝确保两个变量指
     background-color: #0066990d;
     /* display: block !important; */
 }
+
 </style>

src/components/page/OnlineProofreading.vue

@@ -136,7 +136,7 @@
                         <div style="" class="commentList annotations"></div>
                     </template>
                     <template slot="refrences">
-                        <reference ref="commonRef"  :articleId="articleId" :p_article_id="p_article_id"></reference>
+                        <!-- <reference ref="commonRef"  :articleId="articleId" :p_article_id="p_article_id"></reference> -->
                     </template>
                 </common-word>
             </div>

src/components/page/components/OnlineProofreading/catalogue.vue

@@ -1,12 +1,10 @@
 <template>
     <div class="ManuscirptList">
-       
-        
         <div class="arrlist">
             <ul class="catalogue-ul">
                 <li class="catalogue-li">
-                    <div 
+                    <div
-                        @click="goToListComment(item.am_id,'content')"
+                        @click="goToListComment(item.am_id, 'content')"
                         v-for="(item, index) in catalogueList"
                         :key="index"
                         :class="['catalogue-item', 'level-' + item.level]"
@@ -14,7 +12,6 @@
                         <div class="title-content-wrapper">
                             <div class="title-content" v-html="item.content"></div>
                         </div>
-                     
                     </div>
                 </li>
             </ul>
@@ -29,7 +26,7 @@ export default {
     watch: {
         content: {
             handler(newVal, oldVal) {
-                if(this.content.length > 0)this.getCatalogueList();
+                if (this.content.length > 0) this.getCatalogueList();
             },
             deep: true
         }
@@ -54,7 +51,7 @@ export default {
                 { title: 'Typed', type: '1' },
                 { title: 'Unfettered', type: '2' }
             ],
-          
+
             images: [],
             tables: [],
             imagesList: [],
@@ -77,31 +74,31 @@ export default {
     },
     methods: {
         getCatalogueList() {
-           
+            this.catalogueList = this.content
-          
+                .filter((item) => {
-this.catalogueList = this.content.filter(item => {
+                    return item.is_h1 == 1 || item.is_h2 == 1;
-    return item.is_h1 == 1 || item.is_h2 == 1 ;
+                })
-}).map(item => {
+                .map((item) => {
-    // 增加一个 level 字段进行标记
+                    // 增加一个 level 字段进行标记
-    let level = 1;
+                    let level = 1;
-    if (item.is_h2 == 1) level = 2;
+                    if (item.is_h2 == 1) level = 2;
-  
-    return {
-        ...item,
-        level: level // 1, 2, 或 3
-    };
-})
-this.catalogueList=[...this.catalogueList,{
-        am_id:'References',
-        content:'References',
-       
-        level:1,
-}]
 
+                    return {
+                        ...item,
+                        level: level // 1, 2, 或 3
+                    };
+                });
+            this.catalogueList = [
+                ...this.catalogueList
+                // ,{
+                //         am_id:'References',
+                //         content:'References',
 
+                //         level:1,
+                // }
+            ];
 
-                        // this.catalogueList = res.data;
+            // this.catalogueList = res.data;
-                 
         },
         changeIsCollapse(e) {
             localStorage.setItem('isCollapse', e);
@@ -369,7 +366,7 @@ this.catalogueList=[...this.catalogueList,{
                 });
         },
         isHeaderRow(rowIndex, table) {
-            var table =table;
+            var table = table;
 
             var head = table[0];
 
@@ -419,8 +416,8 @@ this.catalogueList=[...this.catalogueList,{
                                 >`;
 
                             if (table.table && table.table.length > 0) {
-                                table.table.forEach((row,i) => {
+                                table.table.forEach((row, i) => {
-                                    modalContent += `<tr   class="${this.isHeaderRow(i, table.table)? 'table-header-row':''  }">`;
+                                    modalContent += `<tr   class="${this.isHeaderRow(i, table.table) ? 'table-header-row' : ''}">`;
                                     row.forEach((cell) => {
                                         modalContent += `
                                         <td
@@ -486,7 +483,7 @@ this.catalogueList=[...this.catalogueList,{
     padding: 12px 16px 0 16px;
     font-size: 14px;
     color: #333;
-    font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
+    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
 }
 
 .word-tabs {
@@ -509,7 +506,7 @@ this.catalogueList=[...this.catalogueList,{
 }
 
 .word-tabs span.active::after {
-    content: "";
+    content: '';
     position: absolute;
     bottom: -1px;
     left: 0;
@@ -575,23 +572,25 @@ this.catalogueList=[...this.catalogueList,{
     overflow: hidden;
     text-overflow: ellipsis;
     /* Times New Roman 增加学术感 */
-    font-family: "Charis SIL" !important; 
+    font-family: 'Charis SIL' !important;
     color: #333;
 }
 
 /* 保持 v-html 内部样式 */
-::v-deep .title-content b { font-weight: bold; }
+::v-deep .title-content b {
-::v-deep .title-content i { font-style: italic; }
+    font-weight: bold;
+}
+::v-deep .title-content i {
+    font-style: italic;
+}
 
 /* --- Word 风格的层级缩进 --- */
 
 /* 1级标题 */
 .level-1 {
     padding-left: 16px;
-  
 }
-.level-1 .title-content{
+.level-1 .title-content {
-   
     font-style: italic !important;
 }
 

src/components/page/components/OnlineProofreading/reference.vue

@@ -418,7 +418,7 @@ export default {
         },
         referenceList: {
             type: Array,
-            required: true
+            default: () => []
         },
         gridData: {
             type: String,

src/components/page/components/Tinymce/index.vue

@@ -10,140 +10,7 @@ import htmlDocx from 'html-docx-js/dist/html-docx.js';
 import { Document, Packer, PageOrientation, Paragraph, TextRun } from 'docx'; // 引入 docx.js
 import html2canvas from 'html2canvas';
 import { extractHexImagesFromRTF, hexToBlob } from '@/utils/rtfParser';
-const tableStyle = `
+import { tableStyle } from '@/utils/tinymceStyles';
-                        .word-img-placeholder {
-                            background: #f0f0f0 ;
-                        }
-                        *{
-                            font-family: 'Charis SIL';
-                        }
-                        b span{
-                            font-weight: bold !important;
-                        }
-                        i span{
-                            font-style: italic !important; ;
-                        }
-                        sub span{
-                            vertical-align: sub;
-                        }
-                        sup span{
-                            vertical-align: sup;
-                        }
-                        sub {
-                            vertical-align: sub!important;
-                        }
-                        sup {
-                            vertical-align: sup !important;
-                        }
-                        span[style*="vertical-align: super"] {
-                            vertical-align: super !important;
-                        }
-                        span[style*="vertical-align: sub"] {
-                            vertical-align: sub !important;
-                        }
-                        table {
-                            border:0px !important;
-                            border-collapse: collapse; /* 去除单元格间隙 */
-                            width: auto;
-                            margin : 0 auto !important;
-                            table-layout: auto; /* 自动调整列宽 */
-                            text-align:left;
-                            font-family:'Charis SIL' !important;
-                            font-size: 14px !important;
-                            mso-font-kerning: 1.0000pt !important;
-                            line-height: 20px !important;
-                            mos-line-height: 20px !important;
-                        }
-                        table td, table th {
-                            padding: 5px;
-                            text-align:left !important;
-                            white-space: pre-wrap; /* 保留换行符并换行 */
-                            word-wrap: break-word; /* 长单词自动换行 */
-                            word-break: break-word;
-                            font-family:'Charis SIL' !important;
-                            font-size: 14px !important;
-                            mso-font-kerning: 1.0000pt !important;
-                            line-height: 20px !important;
-                            mos-line-height: 20px !important;
-                        }
-                        table tbody tr td{
-                            text-align:left !important;
-                            border-left:none !important;
-                            mso-border-left-alt:none !important;
-                            border-right:none !important;
-                            mso-border-right-alt:none !important;
-                            border-top:none;mso-border-top-alt:none !important;
-                            border-bottom:none !important;
-                            mso-border-bottom-alt:none !important;
-                            border:1px dashed #dcdfe6 !important;
-                            border-left:1px dashed #dcdfe6 !important;
-                            border-right:1px dashed #dcdfe6 !important;
-                            word-break: keep-all !important;
-                            // text-align: justify !important; // 设置两端对齐
-
-
-                        }
-                        table tr td p{
-
-                           text-align:left !important;
-
-                            margin:0;
-                            font-family:'Charis SIL' !important;
-                            font-size: 14px !important;
-                            mso-font-kerning: 1.0000pt !important;
-                            line-height: 20px !important;
-                            mos-line-height: 20px !important;
-                        }
-                        table span{
-
-                         color:#000000;text-align:left !important;
-                            font-family:'Charis SIL' !important;
-                            font-size: 14px !important;
-                            mso-font-kerning: 1.0000pt !important;
-                            line-height: 20px !important;
-                            mos-line-height: 20px !important;
-                        }
-                        table .color-highlight{
-                            color:rgb(0,130,170) !important;
-                            font-family:'Charis SIL' !important;
-                            font-size: 14px !important;
-                            mso-font-kerning: 1.0000pt !important;
-                            line-height: 20px !important;
-                            mos-line-height: 20px !important;
-                        }
-                        table tr:first-child td {
-                            border-top:1.0000pt solid #000 !important;mso-border-top-alt:0.5000pt solid #000 !important;border-bottom:1.0000pt solid #000 !important;mso-border-bottom-alt:0.5000pt solid #000 !important;
-                         }
-                        table tr:last-of-type {
-                            border-bottom:1.0000pt solid #000 !important;mso-border-bottom-alt:0.5000pt solid #000 !important;;
-                        }
-                        table span blue {
-                    color: rgb(0, 130, 170) !important;
-                }blue {
-                    color: rgb(0, 130, 170) !important;
-                }
-                blue sup {
-                    color: rgb(0, 130, 170) !important;
-                }
-                blue sub {
-                    color: rgb(0, 130, 170) !important;
-                }
-                .wordTableHtml table tr.table-header-row:nth-of-type(2) td {
-    border-bottom: 1px solid #000 !important;
-}
-                mjx-container {
-	font-size: 14px !important;
-  ;
-}
-wmath{
-	width: 100%;
-	display: block;
-    display: flex;
-  }
-  Info{
-    color:#ff8f25;
-  }
-                        `;
 export default {
     name: 'tinymce',
     components: {},
@@ -399,7 +266,7 @@ export default {
                 valid_elements:
                     this.type == 'table'
                         ? '*[*]'
-                        : `img[src|alt|width|height],strong,em,sub,sup,blue,table,b,i,wmath${this.valid_elements}`, // 允许的标签和属性
+                        : `img[src|alt|width|height],strong,em,sub,sup,blue,table,b,i,myfigure,mytable,wmath${this.valid_elements}`, // 允许的标签和属性
                 // valid_elements: '*[*]', // 允许所有 HTML 标签
                 noneditable_editable_class: 'MathJax',
                 height: this.height,

src/components/page/components/table/MediaLinkDialog.vue

@@ -0,0 +1,162 @@
+<template>
+    <el-dialog
+        :close-on-click-modal="false"
+        :title="`Link ${currentTypeText}`"
+        :visible.sync="visible"
+        width="1000px"
+        custom-class="academic-link-dialog"
+        append-to-body
+    >
+        <p v-if="errorMessage" class="error-message"><i class="el-icon-warning"></i> &nbsp;{{ errorMessage }}</p>
+        <div class="list-container">
+            <el-radio-group v-model="selectedId" class="full-width-radio">
+                <div
+                    v-for="item in displayList"
+                    :key="item.amt_id || item.ami_id"
+                    :class="['item-card', { active: selectedId === item.amt_id || selectedId === item.ami_id }]"
+                >
+                    <el-radio :label="item.amt_id || item.ami_id"
+                        ><div
+                            v-html="item.title"
+                            class="custom-radio-title"
+                            @click.stop="handleClick(item)"
+                            :title="stripHtml(item.title)"
+                        ></div
+                    ></el-radio>
+                </div>
+
+                <el-empty
+                    v-if="displayList.length === 0"
+                    :description="`No ${currentTypeText.toLowerCase()}s found in document`"
+                    :image-size="60"
+                ></el-empty>
+            </el-radio-group>
+        </div>
+
+        <div slot="footer" class="dialog-footer">
+            
+            <el-button size="small" @click="visible = false">Cancel</el-button>
+            <el-button size="small" type="primary" @click="confirm" :disabled="!selectedId">Confirm</el-button>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+export default {
+    props: ['content', 'urlList', 'articleId', 'displayList', 'currentTypeText'], // 全文内容
+    data() {
+        return {
+            errorMessage: '',
+            visible: false,
+            selectedId: null,
+            initialSelectedId: null,
+            selectLinkData: {}
+        };
+    },
+    methods: {
+        stripHtml(html) {
+            return html ? html.replace(/<[^>]+>/g, '') : '';
+        },
+        handleClick(item) {
+            this.selectedId = item.amt_id || item.ami_id;
+            this.$forceUpdate();
+        },
+        show(data) {
+            this.selectLinkData = data;
+            // 1. 获取传入的 ID
+            const inputId = data.selectedId ? Number(data.selectedId) : null;
+            const exists = this.displayList.some((item) => item.ami_id === inputId || item.amt_id === inputId);
+
+            // 3. 存在则赋值，不存在（或原本就是 null）则设为 null
+            this.selectedId = exists ? inputId : null;
+
+            // 调试日志，方便排查回显失败的原因
+            if (inputId && !exists) {
+                this.errorMessage = `The associated resource no longer exists. Please re-select and bind.`;
+            }
+
+            this.visible = true;
+        },
+
+        confirm() {
+            const item = this.displayList.find((i) => i.amt_id === this.selectedId || i.ami_id === this.selectedId);
+            this.$emit('confirm', { select: item, linkData: this.selectLinkData, type: this.currentTypeText.toLowerCase() });
+            this.visible = false;
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+::v-deep .el-dialog__body {
+    padding: 10px 20px 20px !important;
+}
+::v-deep .el-radio {
+    width: 100% !important;
+    display: flex;
+    align-items: flex-start;
+}
+/* 保持原有好看的样式 */
+.academic-link-dialog {
+    .dialog-header-tip {
+        background: #f0f7ff;
+        padding: 12px;
+        border-radius: 4px;
+        margin-bottom: 15px;
+        font-size: 13px;
+        color: #409eff;
+        i {
+            margin-right: 8px;
+        }
+    }
+    .list-container {
+        max-height: 400px;
+        overflow-y: auto;
+        border: 1px solid #f0f0f0;
+        border-radius: 4px;
+        padding: 10px;
+    }
+    .item-card {
+        padding: 10px;
+        margin-bottom: 6px;
+        border: 1px solid transparent;
+        border-radius: 4px;
+        &:hover {
+            background: #f5f7fa;
+        }
+        &.active {
+            border-color: #409eff;
+            background: #f0f7ff;
+        }
+    }
+    .full-width-radio {
+        width: 100%;
+    }
+}
+/* 核心：限制宽度并触发省略号 */
+.custom-radio-title {
+    display: inline-block;
+    vertical-align: middle;
+    max-width: 100%; /* 必须设置一个宽度，或者 100% */
+    overflow: hidden;
+    text-overflow: ellipsis; /* 超出显示点点点 */
+    white-space: nowrap; /* 强制不换行 */
+}
+
+/* 兼容 Element UI：让 radio 的 label 容器能够自适应宽度 */
+::v-deep .el-radio__label {
+    display: inline-flex;
+    align-items: center;
+    width: calc(100% - 25px); /* 减去左侧 radio 圆圈的宽度 */
+}
+.error-message {
+    background-color: #fdf6ec;
+    border-color: #faecd8;
+    color: #e6a23c;
+    padding: 0 10px;
+    line-height: 30px;
+    font-size: 14px;
+    border-radius: 4px;
+    margin-bottom: 20px;
+}
+</style>

src/main.js

@@ -195,6 +195,7 @@ const components = {
   'common-word-html': () => import('@/components/page/components/table/wordHtml.vue'),
   'common-word-html-type-setting': () => import('@/components/page/components/table/wordHtmlTypesetting.vue'),
   'common-drag-word': () => import('@/components/page/components/table/dragWord.vue'),
+  'common-media-link-dialog': () => import('@/components/page/components/table/MediaLinkDialog.vue'),
 };
 
 Object.keys(components).forEach(key => {

src/utils/tinymceStyles.js

@@ -0,0 +1,269 @@
+export const tableStyle = `
+.word-img-placeholder {
+    background: #f0f0f0 ;
+}
+*{
+    font-family: 'Charis SIL';
+}
+b span{
+    font-weight: bold !important;
+}
+i span{
+    font-style: italic !important; ;
+}
+sub span{
+    vertical-align: sub;
+}
+sup span{
+    vertical-align: sup;
+}
+sub {
+    vertical-align: sub!important;
+}
+sup {
+    vertical-align: sup !important;
+}
+span[style*="vertical-align: super"] {
+    vertical-align: super !important;
+}
+span[style*="vertical-align: sub"] {
+    vertical-align: sub !important;
+}
+table {
+    border:0px !important;
+    border-collapse: collapse; /* 去除单元格间隙 */
+    width: auto;
+    margin : 0 auto !important;
+    table-layout: auto; /* 自动调整列宽 */
+    text-align:left;
+    font-family:'Charis SIL' !important;
+    font-size: 14px !important;
+    mso-font-kerning: 1.0000pt !important;
+    line-height: 20px !important;
+    mos-line-height: 20px !important;
+}
+table td, table th {
+    padding: 5px;
+    text-align:left !important;
+    white-space: pre-wrap; /* 保留换行符并换行 */
+    word-wrap: break-word; /* 长单词自动换行 */
+    word-break: break-word;
+    font-family:'Charis SIL' !important;
+    font-size: 14px !important;
+    mso-font-kerning: 1.0000pt !important;
+    line-height: 20px !important;
+    mos-line-height: 20px !important;
+}
+table tbody tr td{
+    text-align:left !important;
+    border-left:none !important;
+    mso-border-left-alt:none !important;
+    border-right:none !important;
+    mso-border-right-alt:none !important;
+    border-top:none;mso-border-top-alt:none !important;
+    border-bottom:none !important;
+    mso-border-bottom-alt:none !important;
+    border:1px dashed #dcdfe6 !important;
+    border-left:1px dashed #dcdfe6 !important;
+    border-right:1px dashed #dcdfe6 !important;
+    word-break: keep-all !important;
+    // text-align: justify !important; // 设置两端对齐
+
+
+}
+table tr td p{
+
+   text-align:left !important;
+
+    margin:0;
+    font-family:'Charis SIL' !important;
+    font-size: 14px !important;
+    mso-font-kerning: 1.0000pt !important;
+    line-height: 20px !important;
+    mos-line-height: 20px !important;
+}
+table span{
+
+ color:#000000;text-align:left !important;
+    font-family:'Charis SIL' !important;
+    font-size: 14px !important;
+    mso-font-kerning: 1.0000pt !important;
+    line-height: 20px !important;
+    mos-line-height: 20px !important;
+}
+table .color-highlight{
+    color:rgb(0,130,170) !important;
+    font-family:'Charis SIL' !important;
+    font-size: 14px !important;
+    mso-font-kerning: 1.0000pt !important;
+    line-height: 20px !important;
+    mos-line-height: 20px !important;
+}
+table tr:first-child td {
+    border-top:1.0000pt solid #000 !important;mso-border-top-alt:0.5000pt solid #000 !important;border-bottom:1.0000pt solid #000 !important;mso-border-bottom-alt:0.5000pt solid #000 !important;
+ }
+table tr:last-of-type {
+    border-bottom:1.0000pt solid #000 !important;mso-border-bottom-alt:0.5000pt solid #000 !important;;
+}
+table span blue {
+color: rgb(0, 130, 170) !important;
+}blue {
+color: rgb(0, 130, 170) !important;
+}
+blue sup {
+color: rgb(0, 130, 170) !important;
+}
+blue sub {
+color: rgb(0, 130, 170) !important;
+}
+.wordTableHtml table tr.table-header-row:nth-of-type(2) td {
+border-bottom: 1px solid #000 !important;
+}
+mjx-container {
+font-size: 14px !important;
+;
+}
+wmath{
+width: 100%;
+display: block;
+display: flex;
+}
+Info{
+color:#ff8f25;
+}
+`;
+
+/**
+ * 提取自编辑器 template 节点的公共样式
+ * 包含：基础布局、H1-H3 标识、校对状态、图片/表格特定样式
+ */
+export const commonWordStyle  = `
+    /* 1. 基础段落与容器 */
+    .pMain {
+        margin-top: 5px;
+        margin-bottom: 5px;
+        min-height: 22px;
+        font-size: 14px;
+        line-height: 22px;
+        font-family: 'Charis SIL', serif;
+        text-align: justify;
+        color: #606266;
+        position: relative;
+    }
+
+    /* H1 标题容器块 */
+    .pMainH1 {
+        background: rgb(222, 235, 247);
+        color: rgb(210, 90, 90) !important;
+        text-align: center !important;
+        border-radius: 10px;
+        font-size: 16px;
+        font-weight: bold;
+        margin-top: 15px !important;
+        margin-bottom: 10px !important;
+        box-shadow: rgba(222, 234, 247, 0.6) 0px 4px 4px;
+    }
+.pMainH1 *{
+    color: rgb(210, 90, 90) !important;
+    font-weight: bold;
+}
+.pMainH1 *.pMain  {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    line-height: 30px !important;
+    text-align: center;
+    font-size: 16px;
+    font-weight: bold !important;
+}
+.pMainH1 * .pMain i {
+    font-style: normal !important;
+}
+    /* 选中/激活时的发光边框 */
+    .glowing-border {
+        border: 3px solid #006699d1;
+        border-radius: 5px;
+        padding: 4px;
+        animation: glow-flash 1.5s infinite alternate;
+    }
+
+    @keyframes glow-flash {
+        0% { box-shadow: 0 0 5px #006699d1; }
+        100% { box-shadow: 0 0 20px #006699d1; }
+    }
+
+    /* 2. 状态标识样式 */
+    .proofreading-num, .Proofreadingstatus {
+        position: absolute;
+        right: 6px;
+        z-index: 10;
+        cursor: pointer;
+    }
+
+    .proofreading-num {
+        background: #e61a12;
+        color: #fff;
+        border-radius: 20px;
+        padding: 0px 6px;
+        font-size: 12px;
+    }
+
+    .Proofreadingstatus {
+        background-color: #fff;
+        border-radius: 16px;
+        font-size: 16px;
+        right: 2px;
+    }
+
+    .isRemark {
+        display: flex;
+        align-items: center;
+        z-index: 2;
+        cursor: pointer;
+    }
+
+    .isRemark span {
+        font-weight: bold;
+        background-color: #fef0f0;
+        color: #f56c6c;
+        padding: 0 5px;
+        font-size: 12px;
+    }
+
+    /* 3. 内容类型样式 (图片/表格) */
+    .MaxPicture { text-align: center !important; }
+    .myeditablediv img { width: 80% !important; max-width: 580px; margin-bottom: 10px; }
+    
+    .imageTitle, .tableTitle { 
+        color: rgb(210, 90, 90) !important; 
+        font-weight: bold; 
+        text-align: center; 
+        margin-bottom: 10px; 
+        display: block;
+    }
+
+    .table_Box { padding: 8px 15px; }
+    .table-box { width: 100%; border-collapse: collapse; text-align: center; }
+    .table-box td { border: 1px solid #000; }
+    .oddColor td { background: rgb(250, 231, 232); }
+
+    /* 4. 辅助层级标识 (H1/H2/H3 侧边圆圈) */
+    .Htitle {
+        color: #4d99f1;
+        background-color: #dbebfca6;
+        border-radius: 50%;
+        font-weight: bold;
+        position: absolute;
+        line-height: 24px;
+        font-size: 16px;
+        left: -30px;
+        top: 0px;
+        text-align: center;
+        width: 24px;
+        height: 24px;
+    }
+    
+    .select-main-id { position: absolute !important; }
+`;
+
+
+