diff --git a/src/assets/css/main.css b/src/assets/css/main.css index f0f56e2..1aa41b3 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -512,7 +512,7 @@ a { } .kuang_communtion .kuang_communtion_conmt { -/* max-height: 350px; + /* max-height: 350px; overflow-y: auto; */ word-break: normal; } @@ -1072,115 +1072,262 @@ a { line-height: 24px; } */ - .wordTableHtml b span { - font-weight: bold !important; +.wordTableHtml b span { + font-weight: bold !important; } - .wordTableHtml i span { - font-style: italic !important; + +.wordTableHtml i span { + font-style: italic !important; } - .wordTableHtml sub span { - vertical-align: sub; + +.wordTableHtml sub span { + vertical-align: sub; } + .wordTableHtml sup span { - vertical-align: super; + vertical-align: super; } - .wordTableHtml sub { - vertical-align: sub !important; + +.wordTableHtml sub { + vertical-align: sub !important; } - .wordTableHtml sup { - vertical-align: super !important; + +.wordTableHtml sup { + vertical-align: super !important; } - .wordTableHtml span[style*='vertical-align: super'] { - vertical-align: super !important; + +.wordTableHtml span[style*='vertical-align: super'] { + vertical-align: super !important; } - .wordTableHtml span[style*='vertical-align: sub'] { - vertical-align: sub !important; + +.wordTableHtml span[style*='vertical-align: sub'] { + vertical-align: sub !important; } + .wordTableHtml 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: 7.5pt !important; - mso-font-kerning: 1pt !important; - line-height: 10pt !important; - mos-line-height: 10pt !important; + 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: 7.5pt !important; + mso-font-kerning: 1pt !important; + line-height: 10pt !important; + mos-line-height: 10pt !important; } + .wordTableHtml table td, -.wordTableHtml table th{ - padding: 5px; - text-align: left !important; - - word-wrap: break-word; /* 长单词自动换行 */ - word-break: break-word; - font-family: 'Charis SIL' !important; - font-size: 7.5pt !important; - mso-font-kerning: 1pt !important; - line-height: 10pt !important; - mos-line-height: 10pt !important; +.wordTableHtml table th { + padding: 5px; + text-align: left !important; + + word-wrap: break-word; + /* 长单词自动换行 */ + word-break: break-word; + font-family: 'Charis SIL' !important; + font-size: 7.5pt !important; + mso-font-kerning: 1pt !important; + line-height: 10pt !important; + mos-line-height: 10pt !important; } + .wordTableHtml 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; */ + 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; */ } + .wordTableHtml table tr td p { - display: flex; - text-align: left !important; - align-items: center; - margin: 0; - font-family: 'Charis SIL' !important; - font-size: 7.5pt !important; - mso-font-kerning: 1pt !important; - line-height: 10pt !important; - mos-line-height: 10pt !important; + display: flex; + text-align: left !important; + align-items: center; + margin: 0; + font-family: 'Charis SIL' !important; + font-size: 7.5pt !important; + mso-font-kerning: 1pt !important; + line-height: 10pt !important; + mos-line-height: 10pt !important; } + .wordTableHtml table span { - color: #000000; - text-align: left !important; - font-family: 'Charis SIL' !important; - font-size: 7.5pt !important; - mso-font-kerning: 1pt !important; - line-height: 10pt !important; - mos-line-height: 10pt !important; + color: #000000; + text-align: left !important; + font-family: 'Charis SIL' !important; + font-size: 7.5pt !important; + mso-font-kerning: 1pt !important; + line-height: 10pt !important; + mos-line-height: 10pt !important; } + .wordTableHtml table .color-highlight { - color: rgb(0, 130, 170) !important; - font-family: 'Charis SIL' !important; - font-size: 7.5pt !important; - mso-font-kerning: 1pt !important; - line-height: 10pt !important; - mos-line-height: 10pt !important; + color: rgb(0, 130, 170) !important; + font-family: 'Charis SIL' !important; + font-size: 7.5pt !important; + mso-font-kerning: 1pt !important; + line-height: 10pt !important; + mos-line-height: 10pt !important; } + .wordTableHtml table blue { - color: rgb(0, 130, 170) !important; - font-family: 'Charis SIL' !important; - font-size: 7.5pt !important; - mso-font-kerning: 1pt !important; - line-height: 10pt !important; - mos-line-height: 10pt !important; + color: rgb(0, 130, 170) !important; + font-family: 'Charis SIL' !important; + font-size: 7.5pt !important; + mso-font-kerning: 1pt !important; + line-height: 10pt !important; + mos-line-height: 10pt !important; } - .wordTableHtml table tr:first-child td { - border-top: 1px solid #000 !important; - - border-bottom: 1px solid #000 !important; - + +.wordTableHtml table tr:first-child td { + border-top: 1px solid #000 !important; + + border-bottom: 1px solid #000 !important; + } - .wordTableHtml table tr:last-of-type td { - border-bottom: 1px solid #000 !important; - + +.wordTableHtml table tr:last-of-type td { + border-bottom: 1px solid #000 !important; + +} + + +.word-container b span { + font-weight: bold !important; +} + +.word-container i span { + font-style: italic !important; +} + +.word-container sub span { + vertical-align: sub; +} + +.word-container sup span { + vertical-align: sup; +} + +.word-container sub { + vertical-align: sub !important; +} + +.word-container sup { + vertical-align: sup !important; +} + +.word-container span[style*='vertical-align: super'] { + vertical-align: super !important; +} + +.word-container span[style*='vertical-align: sub'] { + vertical-align: sub !important; +} + +.word-container 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: 7.5pt !important; + mso-font-kerning: 1pt !important; + line-height: 10pt !important; + mos-line-height: 10pt !important; +} + +.word-container table td, +.word-container 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: 7.5pt !important; + mso-font-kerning: 1pt !important; + line-height: 10pt !important; + mos-line-height: 10pt !important; +} + +.word-container 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; +} + +.word-container table tr td p { + text-align: left !important; + + margin: 0; + font-family: 'Charis SIL' !important; + font-size: 7.5pt !important; + mso-font-kerning: 1pt !important; + line-height: 10pt !important; + mos-line-height: 10pt !important; +} + +.word-container table span { + color: #000000; + text-align: left !important; + font-family: 'Charis SIL' !important; + font-size: 7.5pt !important; + mso-font-kerning: 1pt !important; + line-height: 10pt !important; + mos-line-height: 10pt !important; +} + +.word-container table .color-highlight { + color: rgb(0, 130, 170) !important; + font-family: 'Charis SIL' !important; + font-size: 7.5pt !important; + mso-font-kerning: 1pt !important; + line-height: 10pt !important; + mos-line-height: 10pt !important; +} + +.word-container table tr:first-child td { + border-top: 1pt solid #000 !important; + mso-border-top-alt: 0.5pt solid #000 !important; + border-bottom: 1pt solid #000 !important; + mso-border-bottom-alt: 0.5pt solid #000 !important; +} + +.word-container table tr:last-of-type { + border-bottom: 1pt solid #000 !important; + mso-border-bottom-alt: 0.5pt solid #000 !important; +} + +.word-container blue { + color: rgb(0, 130, 170) !important; } \ No newline at end of file diff --git a/src/assets/img/uploadTable.png b/src/assets/img/uploadTable.png index 73bffa7..efadfe3 100644 Binary files a/src/assets/img/uploadTable.png and b/src/assets/img/uploadTable.png differ diff --git a/src/common/js/commonJS.js b/src/common/js/commonJS.js index 727b027..c3ab84a 100644 --- a/src/common/js/commonJS.js +++ b/src/common/js/commonJS.js @@ -1,3 +1,4 @@ +import Vue from 'vue'; import JSZip from 'jszip'; import Common from '@/components/common/common' import Tiff from 'tiff.js'; @@ -1150,6 +1151,226 @@ convertParagraphsToHtml(paragraphs) { }, + initEditorButton(vueInstance,ed) { + + ed.ui.registry.addMenuButton('customDropdown', { + text: 'Set Title', // 下拉框标题 + fetch: function (callback) { + // 定义下拉框的内容 + const items = [ + { + label: 'First level title', + value: 1 + }, + { + label: 'Secondary Title', + value: 2 + }, + { + label: 'Third level title', + value: 3 + } + ]; + const menuItems = items.map((item) => ({ + type: 'menuitem', + text: item.label, + onAction: function () { + var edSelection = ed.selection; + const selectedNode = edSelection.getNode(); // 获取选中的节点 + if (selectedNode) { + // 向上查找最外层的 div + let outerDiv = selectedNode; + while (outerDiv && outerDiv.tagName !== 'DIV') { + outerDiv = outerDiv.parentNode; + } + // 如果找到的 div 节点存在 + if (outerDiv) { + const dataId = outerDiv.getAttribute('main-id'); + vueInstance.$emit('onEditTitle', { + mainId: dataId, + value: item.value + }); + } + } + } + })); + callback(menuItems); + } + }); + // 添加自定义菜单项 + ed.ui.registry.addButton('Save', { + icon: 'checkmark', + text: 'Save', + onAction: function () { + var deleteButtons = document.querySelectorAll('.tox-tinymce-inline'); + 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'); + var content; + console.log('outerDiv at line 663:', outerDiv.innerHTML); + content = outerDiv.innerHTML.replace(/<(?!\/?(img|b|i|sub|sup|span|strong|em |blue)\b)[^>]+>/g, ''); + content =content.replace(/<([a-zA-Z]+)>\s*<\/\1>/g, ''); + content = content.replace(/ /g, ' '); + + content = content.replace(/\s*style="[^"]*"/g, ''); + + var div = document.createElement('div'); + div.innerHTML = content; // 将 HTML 字符串加载到 div 中 + // 替换所有 为 + var strongTags = div.getElementsByTagName('strong'); + for (var i = 0; i < strongTags.length; i++) { + var bTag = document.createElement('b'); + bTag.innerHTML = strongTags[i].innerHTML; // 保留内容 + strongTags[i].parentNode.replaceChild(bTag, strongTags[i]); + } + + // 替换所有 为 + var emTags = div.getElementsByTagName('em'); + for (var i = 0; i < emTags.length; i++) { + var iTag = document.createElement('i'); + iTag.innerHTML = emTags[i].innerHTML; // 保留内容 + emTags[i].parentNode.replaceChild(iTag, emTags[i]); + } + content = div.innerHTML; + console.log('content at line 486:', content); + vueInstance.$emit('saveContent', content, dataId); + } + } + }); + ed.ui.registry.addButton('Edit', { + icon: 'highlight-bg-color', + text: 'Edit', + 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) + + vueInstance.$emit('onEdit', dataId); + } + } + }); + ed.ui.registry.addButton('commentAdd', { + icon: 'comment-add', + text: 'Comment Add', + onAction: function () { + var edSelection = ed.selection; + const selectedNode = edSelection.getNode(); // 获取选中的节点 + if (selectedNode) { + // 向上查找最外层的 div + let outerDiv = selectedNode; + while (outerDiv && outerDiv.tagName !== 'DIV') { + outerDiv = outerDiv.parentNode; + } + // 如果找到的 div 节点存在 + if (outerDiv) { + const dataId = outerDiv.getAttribute('main-id'); + let selectedText = edSelection.getContent({ format: 'text' }); + vueInstance.$emit('onAddComment', { + mainId: dataId, + label: selectedText ? selectedText : '' + }); + } + } + } + }); + ed.ui.registry.addButton('delete', { + icon: 'remove', + text: 'Delete', + onAction: function () { + var edSelection = ed.selection; + const selectedNode = edSelection.getNode(); // 获取选中的节点 + if (selectedNode) { + // 向上查找最外层的 div + let outerDiv = selectedNode; + while (outerDiv && outerDiv.tagName !== 'DIV') { + outerDiv = outerDiv.parentNode; + } + // 如果找到的 div 节点存在 + if (outerDiv) { + const dataId = outerDiv.getAttribute('main-id'); + vueInstance.$emit('onDelete',dataId); + } + } + + } + }); + + // 定义自定义按钮 + ed.ui.registry.addButton('clearButton', { + text: 'Empty', + + onAction: () => { + // 插入自定义表格到编辑器中 + ed.setContent(''); + } + }); + + ed.ui.registry.addButton('customBlue', { + text: 'Blue', // 按钮文本 + onAction: function () { + // 在选中的文本周围包裹 标签 + var selectedText = ed.selection.getContent(); + console.log('selectedText at line 529:', selectedText); + if (selectedText) { + var wrappedText = `${selectedText}`; + ed.selection.setContent(wrappedText); + } else { + this.$message.error('请选择要添加蓝色的文本'); + } + } + }); + ed.ui.registry.addButton('removeBlue', { + text: 'Blue', // 按钮文本 + onAction: function () { + const range = ed.selection.getRng(); // 获取选区范围 + let startNode = range.startContainer; // 获取选区起始节点 + let closestBlue = null; + + // 向上查找最近的 标签 + while (startNode) { + if (startNode.nodeName && startNode.nodeName.toLowerCase() === 'blue') { + closestBlue = startNode; + break; + } + startNode = startNode.parentNode; + } + if (closestBlue) { + // 如果找到最近的 标签，移除它的外层标签，但保留内容 + const parent = closestBlue.parentNode; + while (closestBlue.firstChild) { + parent.insertBefore(closestBlue.firstChild, closestBlue); + } + parent.removeChild(closestBlue); + } else { + // 未找到 标签，仅移除选中的 标签内容 + const selectedContent = ed.selection.getContent({ format: 'html' }); + + // 使用正则表达式移除选区中的 标签 + const cleanedContent = selectedContent + .replace(/]*>/g, '') // 删除起始标签 + .replace(/<\/blue>/g, ''); // 删除结束标签 + + // 更新选中的内容 + ed.selection.setContent(cleanedContent); + } + } + }); + }, + + // 通用递归方法 }; diff --git a/src/components/common/common.vue b/src/components/common/common.vue index e985d78..78346a5 100644 --- a/src/components/common/common.vue +++ b/src/components/common/common.vue @@ -2,12 +2,12 @@ //记得切换 //正式 -const mediaUrl = '/public/'; -const baseUrl = '/'; +// const mediaUrl = '/public/'; +// const baseUrl = '/'; -// const mediaUrl = 'https://submission.tmrjournals.com/public/'; -// const baseUrl = '/api'; +const mediaUrl = 'https://submission.tmrjournals.com/public/'; +const baseUrl = '/api'; diff --git a/src/components/page/GenerateCharts.vue b/src/components/page/GenerateCharts.vue index c687420..4a475b9 100644 --- a/src/components/page/GenerateCharts.vue +++ b/src/components/page/GenerateCharts.vue @@ -62,7 +62,8 @@ @onDragStart="onDragStart" @huifu="huifu" @onAddComment="onAddComment" - @add="handleImageAdd" + @addImage="handleImageAdd" + @addTable="handleTableAdd" @addComment="addCommentSetting" @goToComment="goToComment" @edit="handleImageEdit" @@ -98,6 +99,7 @@ @loaded="loadedWord" @onEdit="onEdit" @onDelete="onDelete" + @refresh="onRefresh" @onComment="onComment" @onAddComment="onAddComment" @onEditTitle="onEditTitle" @@ -106,17 +108,10 @@ :style="`100%`" > - - - @@ -144,8 +139,16 @@ - - + @@ -452,7 +455,7 @@ export default { } } }, - + loadedWord() { this.isWordComponentLoaded = true; }, @@ -541,7 +544,7 @@ export default { am_id: comment.am_id }) .then((res) => { - this.getDate() + this.getDate(); this.getCommentList(); }); // this.comments.splice(index, 1); // 删除评论 @@ -549,7 +552,7 @@ export default { .catch(() => {}); } }, - async saveContent(content,am_id) { + async saveContent(content, am_id) { var that = this; var str = content.replace(/^

(.*?)<\/p>$/, '$1') ? content.replace(/^

(.*?)<\/p>$/, '$1') : ''; if (str == '') { @@ -643,7 +646,14 @@ export default { async onDelete(dataId) { var dataInfo = this.Main_List.find((item) => item.am_id == dataId); - var type = dataInfo.amt_id ? 'table' : dataInfo.ami_id ? 'img' : 'content'; + var type = ''; + if (dataInfo.type == 1) { + type = 'img'; + } else if (dataInfo.type == 2) { + type = 'table'; + } else if (dataInfo.type == 0) { + type = 'content'; + } await this.$confirm(this.$t('commonTable.removeContent'), 'Prompt', { confirmButtonText: 'Submit', @@ -672,6 +682,7 @@ export default { if (res.code == 0) { setTimeout(() => { that.getDate(); + that.getCommentList(); if (type == 'img') { that.$refs.commonWordHtmlTypeSetting.refresh('img'); } else { @@ -757,6 +768,10 @@ export default { ); } }, + onRefresh() { + this.getDate(); + this.getCommentList(); + }, editComment(comment) { this.commentForm = { ...comment @@ -836,7 +851,11 @@ export default { }, updateChange(content, type) { var str = this.$commonJS.transformHtmlString(content); - this.lineStyle[type] = str; + if (type == 'imgNote') { + this.picStyle.note = str; + } else { + this.lineStyle[type] = str; + } }, onEdit(dataId) { this.currentId = null; @@ -948,121 +967,117 @@ export default { }); }, getWord() { -// var htmlContent = `

${this.detailTitle}

`; -// htmlContent += this.Main_List.map((item) => { -// //批注 -// let contentHtml = ''; -// var isRemark = ``; -// if (item.remark && item.remark != '') { -// // isRemark = ``; -// isRemark = ` - -// (${item.am_id}) -// ${item.state == 0 ? `Resolved` : ''} -// - -// `; -// } -// // 判断是否是图片 -// if (item.type == 1) { -// var extension = item.image.url.split('.').pop().toLowerCase(); -// if (extension == 'tif') { -// contentHtml = ` -//

-// -// ${item.image.note ? item.image.note : ''} -//

-// `; -// } else if (['jpg', 'jpeg', 'png'].includes(extension)) { -// contentHtml = ` -//

-// ${isRemark} -// -// ${ -// item.image.note ? item.image.note : '' -// } -//

-// `; -// } else { -// contentHtml = ` -//

-// ${isRemark} -// -// Figures ( .${item.image.url.split('.').pop().toUpperCase()}) -// + // var htmlContent = `

${this.detailTitle}

`; + // htmlContent += this.Main_List.map((item) => { + // //批注 + // let contentHtml = ''; + // var isRemark = ``; + // if (item.remark && item.remark != '') { + // // isRemark = ``; + // isRemark = ` -// ${ -// item.image.note ? item.image.note : '' -// } -//

-// `; -// } -// } else if (item.type == 2) { -// var tableList = JSON.parse(item.table.table_data); + // (${item.am_id}) + // ${item.state == 0 ? `Resolved` : ''} + // -// contentHtml = ` -//
-// ${isRemark} -// ${item.table.title ? item.table.title : ''} -// -// ${tableList -// .map((row) => { -// return ` -// -// ${row -// .map((cell) => { -// return ` -// -// `; -// }) -// .join('')} -// -// `; -// }) -// .join('')} -//
-// ${cell.text || ''} -//
-// ${item.table.note ? item.table.note : ''} -//
-// `; -// } else { -// contentHtml = `

${isRemark}${item.content}

`; -// } + // `; + // } + // // 判断是否是图片 + // if (item.type == 1) { + // var extension = item.image.url.split('.').pop().toLowerCase(); + // if (extension == 'tif') { + // contentHtml = ` + //

+ // + // ${item.image.note ? item.image.note : ''} + //

+ // `; + // } else if (['jpg', 'jpeg', 'png'].includes(extension)) { + // contentHtml = ` + //

+ // ${isRemark} + // + // ${ + // item.image.note ? item.image.note : '' + // } + //

+ // `; + // } else { + // contentHtml = ` + //

+ // ${isRemark} + // + // Figures ( .${item.image.url.split('.').pop().toUpperCase()}) + // -// // 判断是否是表格类型 + // ${ + // item.image.note ? item.image.note : '' + // } + //

+ // `; + // } + // } else if (item.type == 2) { + // var tableList = JSON.parse(item.table.table_data); -// return contentHtml; -// }).join(''); + // contentHtml = ` + //
+ // ${isRemark} + // ${item.table.title ? item.table.title : ''} + // + // ${tableList + // .map((row) => { + // return ` + // + // ${row + // .map((cell) => { + // return ` + // + // `; + // }) + // .join('')} + // + // `; + // }) + // .join('')} + //
+ // ${cell.text || ''} + //
+ // ${item.table.note ? item.table.note : ''} + //
+ // `; + // } else { + // contentHtml = `

${isRemark}${item.content}

`; + // } + + // // 判断是否是表格类型 + + // return contentHtml; + // }).join(''); // this.htmlContent = htmlContent; this.htmlContent = 'true'; - }, // 获取数据 async getDate() { - - // this.isFirstComponentLoaded = false; - // this.isWordComponentLoaded = false; this.imagesList = []; let urlLInk = ''; let urlTask = {}; @@ -1083,8 +1098,6 @@ export default { .post(urlLInk, urlTask) .then(async (res) => { if (res.code == 0) { - // this.detailTitle = res.data.production.title; - // this.Art_P_Id = res.data.production.p_article_id; this.Main_List = res.data.list; this.getManuscirptContent(); for (let i = 0; i < this.Main_List.length; i++) { @@ -1410,7 +1423,6 @@ export default { positionAnnotations() { this.$nextTick(() => { this.comments.forEach((item) => { - const contentElement = document.querySelector('[remark-main-id="' + item.am_id + '"]'); const annotationElement = document.querySelector('[data-target="main-' + item.am_id + '"]'); if (contentElement && annotationElement) { @@ -1739,7 +1751,7 @@ export default { } .commentList { width: 350px !important; - + padding: 15px; position: relative; box-sizing: border-box; @@ -1770,6 +1782,4 @@ export default { ::-webkit-scrollbar-thumb:hover { background: #555; /* 滑块悬停时的颜色 */ } - - diff --git a/src/components/page/components/Tinymce/index.vue b/src/components/page/components/Tinymce/index.vue index e6f3056..91df3ee 100644 --- a/src/components/page/components/Tinymce/index.vue +++ b/src/components/page/components/Tinymce/index.vue @@ -329,17 +329,29 @@ export default { } }, - content_style: `${tableStyle} table span blue { - color: rgb(0, 130, 170) !important; - }blue { - color: rgb(0, 130, 170) !important; - }`, + content_style: `${tableStyle} + .tox-editor-header{ + background-color: #f8f9fa!important; + } + .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(2) button.tox-tbtn:nth-child(1){ + font-weight:bold !important; + color: #007bff; /* 设置字体颜色 */ + } + .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(2) button.tox-tbtn:nth-child(2){ + font-weight:bold !important; + color: #007bff; /* 设置字体颜色 */ + text-decoration: line-through; + } + table span blue { + color: rgb(0, 130, 170) !important; + }blue { + color: rgb(0, 130, 170) !important; + }`, formats: { bold: { inline: 'b' }, italic: { inline: 'i' } }, - body_class: 'panel-body ', object_resizing: false, toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar, @@ -352,107 +364,8 @@ export default { content_css: 'default', // 加载 TinyMCE 默认样式表 //设置自定义按钮 myCustomToolbarButton setup(ed) { - // ed.on('change', function () { + _this.$commonJS.initEditorButton(_this, ed); - // var selectedColor = ed.formatter.get('forecolor'); - // console.log('ed.formatter.get at line 355:', ed.formatter) - // console.log('ed.formatter.get at line 355:', selectedColor) - - // // 检查是否选择了蓝色 - // if (selectedColor === '#0082AA') { - // // 蓝色的 hex 值 - // var selectedText = ed.selection.getContent(); // 获取选中的文本 - // if (selectedText) { - // var wrappedText = `${selectedText}`; // 包裹 标签 - // ed.selection.setContent(wrappedText); // 更新内容 - // } - // } - // }); - - ed.ui.registry.addButton('customBlue', { - text: 'Blue', // 按钮文本 - onAction: function () { - // 在选中的文本周围包裹 标签 - var selectedText = ed.selection.getContent(); - var wrappedText = `${selectedText}`; - ed.selection.setContent(wrappedText); - }, - classes: 'custom-colored-tinymce-button' - }); - ed.ui.registry.addButton('removeBlue', { - text: 'Remove Blue', // 按钮文本 - onAction: function () { - const range = ed.selection.getRng(); // 获取选区范围 - let startNode = range.startContainer; // 获取选区起始节点 - let closestBlue = null; - - // 向上查找最近的 标签 - while (startNode) { - if (startNode.nodeName && startNode.nodeName.toLowerCase() === 'blue') { - closestBlue = startNode; - break; - } - startNode = startNode.parentNode; - } - - if (closestBlue) { - // 如果找到最近的 标签，移除它的外层标签，但保留内容 - const parent = closestBlue.parentNode; - while (closestBlue.firstChild) { - parent.insertBefore(closestBlue.firstChild, closestBlue); - } - parent.removeChild(closestBlue); - } else { - // 未找到 标签，仅移除选中的 标签内容 - const selectedContent = ed.selection.getContent({ format: 'html' }); - - // 使用正则表达式移除选区中的 标签 - const cleanedContent = selectedContent - .replace(/]*>/g, '') // 删除起始标签 - .replace(/<\/blue>/g, ''); // 删除结束标签 - - // 更新选中的内容 - ed.selection.setContent(cleanedContent); - } - } - }); - ed.ui.registry.addToggleButton('toggleBlue', { - text: 'Toggle Blue', // 按钮文本 - onAction: function () { - var selectedContent = ed.selection.getContent({ format: 'html' }); // 获取选中内容（HTML 格式） - - // 创建临时 DOM 容器 - var tempDiv = document.createElement('div'); - tempDiv.innerHTML = selectedContent; - - // 检查是否完全被 包裹 - if (tempDiv.childNodes.length === 1 && tempDiv.firstChild.nodeName.toLowerCase() === 'blue') { - // 移除 标签 - var unwrappedContent = tempDiv.firstChild.innerHTML; - ed.selection.setContent(unwrappedContent); // 更新内容 - } else { - // 添加 标签 - var wrappedContent = `${selectedContent}`; - ed.selection.setContent(wrappedContent); // 更新内容 - } - }, - onSetup: function (buttonApi) { - // 更新按钮状态（激活或非激活） - function updateButtonState() { - var selectedContent = ed.selection.getContent({ format: 'html' }); - var tempDiv = document.createElement('div'); - tempDiv.innerHTML = selectedContent; - - buttonApi.setActive( - tempDiv.childNodes.length === 1 && tempDiv.firstChild.nodeName.toLowerCase() === 'blue' - ); - } - - // 监听编辑器中的选区变化 - ed.on('NodeChange', updateButtonState); - ed.on('KeyUp', updateButtonState); // 处理键盘操作导致的内容变化 - } - }); ed.ui.registry.addButton('uploadWord', { text: 'Word', icon: 'import-word', // 使用自定义图标 @@ -478,23 +391,23 @@ export default { } }); - ed.ui.registry.addMenuButton('customDropdown', { - text: _this.$t('commonTable.PaperRotation'), // 下拉框标题 - fetch: function (callback) { - // 定义下拉框的内容 - const items = [..._this.typesettingTypeOptions]; - const menuItems = items.map((item) => ({ - type: 'menuitem', - text: item.label, - onAction: function () { - _this.typesettingType = item.value; - _this.changeTable(); - // ed.execCommand(item.value); // 执行命令 - } - })); - callback(menuItems); - } - }); + // ed.ui.registry.addMenuButton('customDropdown', { + // text: _this.$t('commonTable.PaperRotation'), // 下拉框标题 + // fetch: function (callback) { + // // 定义下拉框的内容 + // const items = [..._this.typesettingTypeOptions]; + // const menuItems = items.map((item) => ({ + // type: 'menuitem', + // text: item.label, + // onAction: function () { + // _this.typesettingType = item.value; + // _this.changeTable(); + // // ed.execCommand(item.value); // 执行命令 + // } + // })); + // callback(menuItems); + // } + // }); ed.on('init', function () { const editorBody = ed.getBody(); diff --git a/src/components/page/components/table/editTable.vue b/src/components/page/components/table/editTable.vue new file mode 100644 index 0000000..d1169b3 --- /dev/null +++ b/src/components/page/components/table/editTable.vue @@ -0,0 +1,1320 @@ + + + diff --git a/src/components/page/components/table/table.vue b/src/components/page/components/table/table.vue index eef8d28..f195d67 100644 --- a/src/components/page/components/table/table.vue +++ b/src/components/page/components/table/table.vue @@ -2,17 +2,15 @@
- + -
@@ -105,11 +102,11 @@ export default { }, getContent(type, content) { if (content) { - const container = document.createElement("div"); - container.innerHTML = content; + const container = document.createElement('div'); + container.innerHTML = content; this.$commonJS.parseTableToArray(content, (table) => { console.log('res at line 104:', table); - + this.$emit('getContent', type, { html_data: content, table: table }); }); } else { diff --git a/src/components/page/components/table/word copy 2.vue b/src/components/page/components/table/word copy 2.vue new file mode 100644 index 0000000..d79ff73 --- /dev/null +++ b/src/components/page/components/table/word copy 2.vue @@ -0,0 +1,1621 @@ + + + diff --git a/src/components/page/components/table/word.vue b/src/components/page/components/table/word.vue index cfa4a17..2bf4ad7 100644 --- a/src/components/page/components/table/word.vue +++ b/src/components/page/components/table/word.vue @@ -22,17 +22,17 @@ flex: 1; " > -