zm/tougao_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
始于初见
2025-01-21 09:14:35 +08:00
parent 49feb0777d
commit 1f169dc517
12 changed files with 4057 additions and 792 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
src/assets/css/main.css
View File

@@ -512,7 +512,7 @@ a {
}
.kuang_communtion .kuang_communtion_conmt {
/* max-height: 350px;
/* max-height: 350px;
overflow-y: auto; */
word-break: normal;
}
@@ -1072,36 +1072,46 @@ a {
line-height: 24px;
} */
.wordTableHtml b span {
.wordTableHtml b span {
font-weight: bold !important;
}
.wordTableHtml i span {
.wordTableHtml i span {
font-style: italic !important;
}
.wordTableHtml sub span {
.wordTableHtml sub span {
vertical-align: sub;
}
.wordTableHtml sup span {
vertical-align: super;
}
.wordTableHtml sub {
.wordTableHtml sub {
vertical-align: sub !important;
}
.wordTableHtml sup {
.wordTableHtml sup {
vertical-align: super !important;
}
.wordTableHtml span[style*='vertical-align: super'] {
.wordTableHtml span[style*='vertical-align: super'] {
vertical-align: super !important;
}
.wordTableHtml span[style*='vertical-align: sub'] {
.wordTableHtml span[style*='vertical-align: sub'] {
vertical-align: sub !important;
}
.wordTableHtml table {
border: 0px !important;
border-collapse: collapse; /* 去除单元格间隙 */
border-collapse: collapse;
/* 去除单元格间隙 */
width: auto;
margin: 0 auto !important;
table-layout: auto; /* 自动调整列宽 */
table-layout: auto;
/* 自动调整列宽 */
text-align: left;
font-family: 'Charis SIL' !important;
font-size: 7.5pt !important;
@@ -1109,12 +1119,14 @@ a {
line-height: 10pt !important;
mos-line-height: 10pt !important;
}
.wordTableHtml table td,
.wordTableHtml table th{
.wordTableHtml table th {
padding: 5px;
text-align: left !important;
word-wrap: break-word; /* 长单词自动换行 */
word-wrap: break-word;
/* 长单词自动换行 */
word-break: break-word;
font-family: 'Charis SIL' !important;
font-size: 7.5pt !important;
@@ -1122,6 +1134,7 @@ a {
line-height: 10pt !important;
mos-line-height: 10pt !important;
}
.wordTableHtml table tbody tr td {
text-align: left !important;
border-left: none !important;
@@ -1138,6 +1151,7 @@ a {
word-break: keep-all !important;
/* text-align: justify !important; */
}
.wordTableHtml table tr td p {
display: flex;
text-align: left !important;
@@ -1149,6 +1163,7 @@ a {
line-height: 10pt !important;
mos-line-height: 10pt !important;
}
.wordTableHtml table span {
color: #000000;
text-align: left !important;
@@ -1158,6 +1173,7 @@ a {
line-height: 10pt !important;
mos-line-height: 10pt !important;
}
.wordTableHtml table .color-highlight {
color: rgb(0, 130, 170) !important;
font-family: 'Charis SIL' !important;
@@ -1166,6 +1182,7 @@ a {
line-height: 10pt !important;
mos-line-height: 10pt !important;
}
.wordTableHtml table blue {
color: rgb(0, 130, 170) !important;
font-family: 'Charis SIL' !important;
@@ -1174,13 +1191,143 @@ a {
line-height: 10pt !important;
mos-line-height: 10pt !important;
}
.wordTableHtml table tr:first-child td {
.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 {
.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;
}

BIN
src/assets/img/uploadTable.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

221
src/common/js/commonJS.js
View File

@@ -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(/&nbsp;/g, ' ');
content = content.replace(/\s*style="[^"]*"/g, '');
var div = document.createElement('div');
div.innerHTML = content; // 将 HTML 字符串加载到 div 中
// 替换所有 <strong> 为 <b>
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]);
}
// 替换所有 <em> 为 <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 () {
// 在选中的文本周围包裹 <blue> 标签
var selectedText = ed.selection.getContent();
console.log('selectedText at line 529:', selectedText);
if (selectedText) {
var wrappedText = `<blue>${selectedText}</blue>`;
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;
// 向上查找最近的 <blue> 标签
while (startNode) {
if (startNode.nodeName && startNode.nodeName.toLowerCase() === 'blue') {
closestBlue = startNode;
break;
}
startNode = startNode.parentNode;
}
if (closestBlue) {
// 如果找到最近的 <blue> 标签，移除它的外层标签，但保留内容
const parent = closestBlue.parentNode;
while (closestBlue.firstChild) {
parent.insertBefore(closestBlue.firstChild, closestBlue);
}
parent.removeChild(closestBlue);
} else {
// 未找到 <blue> 标签，仅移除选中的 <blue> 标签内容
const selectedContent = ed.selection.getContent({ format: 'html' });
// 使用正则表达式移除选区中的 <blue> 标签
const cleanedContent = selectedContent
.replace(/<blue[^>]*>/g, '') // 删除起始标签 <blue>
.replace(/<\/blue>/g, ''); // 删除结束标签 </blue>
// 更新选中的内容
ed.selection.setContent(cleanedContent);
}
}
});
},
// 通用递归方法
};

8
src/components/common/common.vue
View File

@@ -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';

256
src/components/page/GenerateCharts.vue
View File

@@ -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%`"
>
<template slot="comment">
<div style="" class="commentList annotations">
</div>
<div style="" class="commentList annotations"></div>
</template>
</common-word>
</div>
<!-- <div style="height: 20px" v-if="Art_Doi == undefined"></div> -->
<!-- <div style="margin: 20px 0 0 0; text-align: center; padding-bottom: 30px" v-if="Art_Doi != undefined">
<el-button icon="el-icon-finished" type="primary" style="width: 350px" @click="pushOnline()"> Push Online </el-button>
</div> -->
</div>
<!--添加/修改图片 -->
@@ -144,8 +139,16 @@
</el-form-item>
<el-form-item label="Figure Describe :">
<el-input placeholder="Please enter the table describe..." v-model="picStyle.note" type="textarea" :rows="3">
</el-input>
<tinymce
:isAutomaticUpdate="true"
ref="tinymceChildImgNote"
@getContent="getContent"
@updateChange="(res) => updateChange(res, 'imgNote')"
:value="picStyle.note"
class="paste-area text-container"
toolbar="bold italic subscript superscript clearButton"
height="120"
></tinymce>
</el-form-item>
</el-form>
@@ -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>(.*?)<\/p>$/, '$1') ? content.replace(/^<p>(.*?)<\/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);
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 = `<h3 class="man_Title" contenteditable="false">${this.detailTitle} </h3>`;
// htmlContent += this.Main_List.map((item) => {
// //批注
// let contentHtml = '';
// var isRemark = ``;
// if (item.remark && item.remark != '') {
// // isRemark = `<img class="isRemark" main-id="${item.am_id}" src="${this.remarkImageUrl}" alt="" style="width:20px;height:20px;"/>`;
// isRemark = `<span class="isRemark" main-id="${item.am_id}"><img class="isRemarkIcon" main-id="${item.am_id}" src="${
// this.remarkImageUrl
// }" alt="" style="width: 20px; height: 20px" />
// var htmlContent = `<h3 class="man_Title" contenteditable="false">${this.detailTitle} </h3>`;
// htmlContent += this.Main_List.map((item) => {
// //批注
// let contentHtml = '';
// var isRemark = ``;
// if (item.remark && item.remark != '') {
// // isRemark = `<img class="isRemark" main-id="${item.am_id}" src="${this.remarkImageUrl}" alt="" style="width:20px;height:20px;"/>`;
// isRemark = `<span class="isRemark" main-id="${item.am_id}"><img class="isRemarkIcon" main-id="${item.am_id}" src="${
// this.remarkImageUrl
// }" alt="" style="width: 20px; height: 20px" />
// <span class="isRemarkIcon" main-id="${item.am_id}" > (${item.am_id})</span>
// ${item.state == 0 ? `<span class="Resolved" main-id="${item.am_id}">Resolved</span>` : ''}
// </span>
// <span class="isRemarkIcon" main-id="${item.am_id}" > (${item.am_id})</span>
// ${item.state == 0 ? `<span class="Resolved" main-id="${item.am_id}">Resolved</span>` : ''}
// </span>
// `;
// }
// // 判断是否是图片
// if (item.type == 1) {
// var extension = item.image.url.split('.').pop().toLowerCase();
// if (extension == 'tif') {
// contentHtml = `
// <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${item.ami_id}" main-id="${
// item.am_id
// }">
// <img src="" data-img-id="${item.ami_id}" style="width: ${item.width ? `${item.width}px` : '100%'}" />
// <font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}">${item.image.note ? item.image.note : ''}</font>
// </p>
// `;
// } else if (['jpg', 'jpeg', 'png'].includes(extension)) {
// contentHtml = `
// <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
// item.ami_id
// }" main-id="${item.am_id}">
// ${isRemark}
// <img src="${this.mediaUrl + item.image.url}" style="width: ${
// item.width ? `${item.width}px` : '100%'
// }" />
// <font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
// item.image.note ? item.image.note : ''
// }</font>
// </p>
// `;
// } else {
// contentHtml = `
// <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
// item.ami_id
// }" main-id="${item.am_id}">
// ${isRemark}
// <span
// style="
// text-align: center;
// font-size: 30px;
// display: flex;
// align-items: center;
// justify-content: center;
// "
// >
// Figures ( .${item.image.url.split('.').pop().toUpperCase()})
// </span>
// `;
// }
// // 判断是否是图片
// if (item.type == 1) {
// var extension = item.image.url.split('.').pop().toLowerCase();
// if (extension == 'tif') {
// contentHtml = `
// <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${item.ami_id}" main-id="${
// item.am_id
// }">
// <img src="" data-img-id="${item.ami_id}" style="width: ${item.width ? `${item.width}px` : '100%'}" />
// <font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}">${item.image.note ? item.image.note : ''}</font>
// </p>
// `;
// } else if (['jpg', 'jpeg', 'png'].includes(extension)) {
// contentHtml = `
// <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
// item.ami_id
// }" main-id="${item.am_id}">
// ${isRemark}
// <img src="${this.mediaUrl + item.image.url}" style="width: ${
// item.width ? `${item.width}px` : '100%'
// }" />
// <font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
// item.image.note ? item.image.note : ''
// }</font>
// </p>
// `;
// } else {
// contentHtml = `
// <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
// item.ami_id
// }" main-id="${item.am_id}">
// ${isRemark}
// <span
// style="
// text-align: center;
// font-size: 30px;
// display: flex;
// align-items: center;
// justify-content: center;
// "
// >
// Figures ( .${item.image.url.split('.').pop().toUpperCase()})
// </span>
// <font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
// item.image.note ? item.image.note : ''
// }</font>
// </p>
// `;
// }
// } else if (item.type == 2) {
// var tableList = JSON.parse(item.table.table_data);
// <font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
// item.image.note ? item.image.note : ''
// }</font>
// </p>
// `;
// }
// } else if (item.type == 2) {
// var tableList = JSON.parse(item.table.table_data);
// contentHtml = `
// <div contenteditable="false" data-id="${item.amt_id}" main-state="${item.state}" main-id="${
// item.am_id
// }" class="thumbnailTableBox wordTableHtml table_Box pMain" style="width: 100%; padding: 8px 15px; box-sizing: border-box; border-radius: 4px; position: relative;">
// ${isRemark}
// <font class="font tableTitle" style="width:100%" >${item.table.title ? item.table.title : ''}</font>
// <table border="1" style="width: auto; border-collapse: collapse; text-align: center; ">
// ${tableList
// .map((row) => {
// return `
// <tr>
// ${row
// .map((cell) => {
// return `
// <td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}">
// <span>${cell.text || ''}</span>
// </td>
// `;
// })
// .join('')} <!-- join the cells in the row -->
// </tr>
// `;
// })
// .join('')} <!-- join the rows -->
// </table>
// <font class="font" style="width:100%" >${item.table.note ? item.table.note : ''}</font>
// </div>
// `;
// } else {
// contentHtml = `<p class="pMain" main-state="${item.state}" contenteditable="false" data-id="${item.am_id}" main-id="${item.am_id}">${isRemark}${item.content}</p>`;
// }
// contentHtml = `
// <div contenteditable="false" data-id="${item.amt_id}" main-state="${item.state}" main-id="${
// item.am_id
// }" class="thumbnailTableBox wordTableHtml table_Box pMain" style="width: 100%; padding: 8px 15px; box-sizing: border-box; border-radius: 4px; position: relative;">
// ${isRemark}
// <font class="font tableTitle" style="width:100%" >${item.table.title ? item.table.title : ''}</font>
// <table border="1" style="width: auto; border-collapse: collapse; text-align: center; ">
// ${tableList
// .map((row) => {
// return `
// <tr>
// ${row
// .map((cell) => {
// return `
// <td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}">
// <span>${cell.text || ''}</span>
// </td>
// `;
// })
// .join('')} <!-- join the cells in the row -->
// </tr>
// `;
// })
// .join('')} <!-- join the rows -->
// </table>
// <font class="font" style="width:100%" >${item.table.note ? item.table.note : ''}</font>
// </div>
// `;
// } else {
// contentHtml = `<p class="pMain" main-state="${item.state}" contenteditable="false" data-id="${item.am_id}" main-id="${item.am_id}">${isRemark}${item.content}</p>`;
// }
// // 判断是否是表格类型
// // 判断是否是表格类型
// return contentHtml;
// }).join('');
// 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) {
@@ -1770,6 +1782,4 @@ export default {
::-webkit-scrollbar-thumb:hover {
background: #555; /* 滑块悬停时的颜色 */
}
</style>

151
src/components/page/components/Tinymce/index.vue
View File

@@ -329,7 +329,20 @@ export default {
}
},
content_style: `${tableStyle} table span blue {
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;
@@ -339,7 +352,6 @@ export default {
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 = `<blue>${selectedText}</blue>`; // 包裹 <blue> 标签
// ed.selection.setContent(wrappedText); // 更新内容
// }
// }
// });
ed.ui.registry.addButton('customBlue', {
text: 'Blue', // 按钮文本
onAction: function () {
// 在选中的文本周围包裹 <blue> 标签
var selectedText = ed.selection.getContent();
var wrappedText = `<blue>${selectedText}</blue>`;
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;
// 向上查找最近的 <blue> 标签
while (startNode) {
if (startNode.nodeName && startNode.nodeName.toLowerCase() === 'blue') {
closestBlue = startNode;
break;
}
startNode = startNode.parentNode;
}
if (closestBlue) {
// 如果找到最近的 <blue> 标签，移除它的外层标签，但保留内容
const parent = closestBlue.parentNode;
while (closestBlue.firstChild) {
parent.insertBefore(closestBlue.firstChild, closestBlue);
}
parent.removeChild(closestBlue);
} else {
// 未找到 <blue> 标签，仅移除选中的 <blue> 标签内容
const selectedContent = ed.selection.getContent({ format: 'html' });
// 使用正则表达式移除选区中的 <blue> 标签
const cleanedContent = selectedContent
.replace(/<blue[^>]*>/g, '') // 删除起始标签 <blue>
.replace(/<\/blue>/g, ''); // 删除结束标签 </blue>
// 更新选中的内容
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;
// 检查是否完全被 <blue> 包裹
if (tempDiv.childNodes.length === 1 && tempDiv.firstChild.nodeName.toLowerCase() === 'blue') {
// 移除 <blue> 标签
var unwrappedContent = tempDiv.firstChild.innerHTML;
ed.selection.setContent(unwrappedContent); // 更新内容
} else {
// 添加 <blue> 标签
var wrappedContent = `<blue>${selectedContent}</blue>`;
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();

1320
src/components/page/components/table/editTable.vue Normal file
View File

File diff suppressed because it is too large Load Diff

7
src/components/page/components/table/table.vue
View File

@@ -10,9 +10,7 @@
:value="updatedHtml"
:typesettingType="typesettingType"
class="paste-area text-container"
:toolbar="`undo redo | formatselect | bold italic ${
identity ? '| customBlue removeBlue' : ''
} |subscript superscript|table tabledelete ${identity ? '| customDropdown' : ''} | clearButton`"
:toolbar="['bold italic|customBlue removeBlue|subscript superscript|table tabledelete|clearButton']"
style="
/* white-space: pre-line; */
line-height: 12px;
@@ -25,7 +23,6 @@
margin-bottom: 0pt; /* 段后间距 */
"
></tinymce>
</div>
</div>
</template>
@@ -105,7 +102,7 @@ export default {
},
getContent(type, content) {
if (content) {
const container = document.createElement("div");
const container = document.createElement('div');
container.innerHTML = content;
this.$commonJS.parseTableToArray(content, (table) => {
console.log('res at line 104:', table);

1621
src/components/page/components/table/word copy 2.vue Normal file
View File

File diff suppressed because it is too large Load Diff

741
src/components/page/components/table/word.vue
View File

@@ -22,17 +22,17 @@
flex: 1;
"
>
<template v-for="(item, index) in contentList">
<template v-for="(item, index) in wordList">
<li
v-if="item.remark && item.remark != ''"
class="comment-item annotation"
:data-target="`main-${item.am_id}`"
style="width: calc(350px - 20px); padding: 6px 0;margin-top: 10px;"
style="width: calc(350px - 20px); padding: 6px 0; margin-top: 10px"
>
<div>
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px">
<div class="pizhu" style="display: flex; align-items: center">
<span style="color: #fc625d; display: flex; align-items: center; font-weight: bold;">
<span style="color: #fc625d; display: flex; align-items: center; font-weight: bold">
<img
class="isRemark"
src="@/assets/img/isRemark.png"
@@ -47,9 +47,12 @@
<span style="color: #b8b7b7; font-size: 14px">{{ getTime(item.ctime) }}</span
><span style="color: #aaa; font-size: 14px; margin: 0 4px">|</span>
<el-dropdown class="commentOperate">
<span class="el-dropdown-link" style="display: flex;align-items: center;justify-content: center;">
<img src="@/assets/img/selectComment.png" alt="" style="width: 18px; height: 18px;margin-top: 2px;" />
<span class="el-dropdown-link" style="display: flex; align-items: center; justify-content: center">
<img
src="@/assets/img/selectComment.png"
alt=""
style="width: 18px; height: 18px; margin-top: 2px"
/>
</span>
<el-dropdown-menu slot="dropdown">
<!-- <el-dropdown-item>答复</el-dropdown-item> -->
@@ -72,15 +75,17 @@
<div style="display: flex; align-items: center; justify-content: space-between">
<p
:style="isEditComment ? 'width: calc(100% - 40px)' : 'width: calc(100%)'"
style="line-height: 18px; min-height: 20px; width: calc(100%); white-space: normal;padding-top: 10px;padding-left:20px ;"
style="
line-height: 18px;
min-height: 20px;
width: calc(100%);
white-space: normal;
padding-top: 10px;
padding-left: 20px;
"
v-html="getCommentRemark(item)"
></p>
<i
class="el-icon-edit"
v-if="isEditComment"
@click="editComment(item, index)"
style="color: #006699;"
></i>
<i class="el-icon-edit" v-if="isEditComment" @click="editComment(item, index)" style="color: #006699"></i>
</div>
</div>
</li>
@@ -89,15 +94,13 @@
class="isRemark"
src="@/assets/img/isRemark.png"
alt=""
style="width: 15px; height: 15px; margin-right: 6px;margin-left: -14px;"
style="width: 15px; height: 15px; margin-right: 6px; margin-left: -14px"
/>
</span>
<div
class="MaxPicture pMain myeditabledivImage"
@click="initializeEditor(item.am_id)"
@click="initializeEditor(item.am_id, 'img', item)"
:class="item.remark && item.remark != '' ? 'remarkbg' : ''"
v-if="item.type == 1"
:main-state="item.state"
@@ -106,14 +109,17 @@
:main-id="item.am_id"
:id="'editor' + item.am_id"
>
<img :src="`${mediaUrl + item.image.url}`" :style="`width: ${item.width ? `${item.width}px` : '500px'}`" />
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">{{
item.image.note ? item.image.note : ''
}}</font>
<img :src="`${mediaUrl + item.image.url}`" />
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
<span v-html="item.image.note ? item.image.note : ''"></span>
</font>
</div>
<div
:class="item.remark && item.remark != '' ? 'remarkbg' : ''"
@click="initializeEditor(item.am_id)"
@click="initializeEditor(item.am_id, 'table', item)"
class="thumbnailTableBox wordTableHtml table_Box pMain myeditabledivTable"
v-else-if="item.type == 2"
:main-state="item.state"
@@ -122,21 +128,21 @@
:id="'editor' + item.am_id"
:main-id="item.am_id"
>
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">{{
item.table.title ? item.table.title : ''
}}</font>
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
<span v-html="item.table.title ? item.table.title : ''"></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">
<td :colspan="`${cell.colspan || 1}`" :rowspan="`${cell.rowspan || 1}`" v-for="(cell, i1) in row">
<span v-html="cell.text"></span>
</td>
</tr>
</table>
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">{{
item.table.note ? item.table.note : ''
}}</font>
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
<span v-html="item.table.note ? item.table.note : ''"></span
></font>
</div>
<div
@@ -144,6 +150,7 @@
class="pMain myeditablediv"
:class="item.remark && item.remark != '' ? 'remarkbg' : ''"
v-else
@blur="clearEditor(item.am_id)"
:main-state="item.state"
:contenteditable="!readonly"
:data-id="item.am_id"
@@ -348,6 +355,7 @@ export default {
},
data() {
return {
wordList: [],
editors: {}, // 用于存储每个编辑器的实例
editorsInitialized: {}, // 用于存储每个编辑器实例
mediaUrl: mediaUrl, //
@@ -408,36 +416,14 @@ export default {
},
// this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(newVal));
watch: {
value(newVal) {
this.$nextTick(() => {
window.tinymce.get(this.tinymceId).setContent(newVal);
this.$emit('loaded');
});
contentList(val) {
if (val) {
this.wordList = [...this.contentList];
}
}
},
mounted() {
this.$refs.scrollDiv.addEventListener('scroll', this.divOnScroll, { passive: true });
this.isShowEditComment();
this.typesettingType = 1;
// this.initTinymce();
},
activated() {
this.isShowEditComment();
this.typesettingType = 1;
this.initTinymce();
},
deactivated() {
this.destroyTinymce();
},
methods: {
initializeEditor(index) {
const editorId = `editor${index}`;
// 检查当前编辑器是否已经初始化
if (this.editors[editorId]) return;
// 销毁所有已初始化的编辑器实例
this.wordList = [...this.contentList];
for (const key in this.editors) {
if (this.editors[key]) {
// 确保销毁所有编辑器实例
@@ -445,16 +431,55 @@ export default {
this.editors[key] = null; // 清除引用
}
}
this.$refs.scrollDiv.addEventListener('scroll', this.divOnScroll, { passive: true });
this.isShowEditComment();
this.typesettingType = 1;
},
activated() {
this.wordList = [...this.contentList];
for (const key in this.editors) {
if (this.editors[key]) {
// 确保销毁所有编辑器实例
tinymce.remove(this.editors[key]);
this.editors[key] = null; // 清除引用
}
}
this.isShowEditComment();
this.typesettingType = 1;
},
deactivated() {
this.destroyTinymce();
for (const key in this.editors) {
if (this.editors[key]) {
// 确保销毁所有编辑器实例
tinymce.remove(this.editors[key]);
this.editors[key] = null; // 清除引用
}
}
},
methods: {
clearEditor(editorId){
console.log('editorId at line 462:', editorId)
for (const key in this.editors) {
if (this.editors[key]) {
// 确保销毁所有编辑器实例
tinymce.remove(this.editors[key]);
this.editors[key] = null; // 清除引用
}
}
},
initTinymceContent(editorId) {
var _this = this;
// _this.$emit('positionAnnotations');
// non-breaking
tinymce.init({
selector: `#${editorId}`,
inline: true,
license_key: 'gpl', // 使用开源 GPL 许可证
content_css: false,
table_resize_bars: true,
valid_elements: '*[*]',
image_advtab: false, // 禁用图片高级选项卡（防止自动调整大小）
valid_elements: 'img[src|alt|width|height],strong,em,sub,sup,blue,table,b,i', // 允许的标签和属性
plugins: 'forecolor code paste table image resize searchreplace',
content_style: `${tableStyle + this.wordStyle}
/* 添加批注 */
@@ -520,232 +545,122 @@ export default {
end_container_on_empty_block: true,
content_css: 'default ',
setup(ed) {
ed.on('keydown', function (e) {
// 检查是否按下回车键
if (e.keyCode === 13) {
// 13 是回车键的 keyCode
e.preventDefault(); // 阻止默认行为（换行）
}
});
var previousContent = ed.getContent();
ed.on('blur', function () {
var edSelection = ed.selection;
const selectedNode = edSelection.getNode(); // 获取选中的节点
if (selectedNode) {
// 向上查找最外层的 div
let outerDiv = selectedNode;
while (outerDiv && outerDiv.tagName !== 'DIV') {
outerDiv = outerDiv.parentNode;
// 失去焦点时不执行保存操作，什么都不做
console.log('编辑器失去焦点，但不保存内容');
});
_this.$commonJS.initEditorButton(_this, ed);
},
init_instance_callback: (editor) => {}
});
},
initTinymceImg(editorId) {
var _this = this;
tinymce.init({
readonly: true,
selector: `#${editorId}`,
inline: true,
license_key: 'gpl', // 使用开源 GPL 许可证
content_css: false,
table_resize_bars: true,
image_advtab: false, // 禁用图片高级选项卡（防止自动调整大小）
valid_elements: '*[*]',
plugins: 'forecolor code paste table image resize searchreplace',
content_style: `${tableStyle + this.wordStyle}
.tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(1) button.tox-tbtn:nth-child(1){
font-weight:bold !important;
background-color:#fef0f0;
color: #f56c6c;
fill:rgb(19, 188, 32);
}
/* 成功 */
.tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(3) button.tox-tbtn:nth-child(1){
font-weight:bold !important;
background-color: rgb(43, 129, 239) !important;
color: #fff;
fill:rgb(19, 188, 32);
}
/* 删除 */
.tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(2) button.tox-tbtn:nth-child(1){
font-weight:bold !important;
background-color: red;
color: #fff;
}
.tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(1) button.tox-tbtn:nth-child(1) svg{
font-weight:bold !important;
background-color:#fef0f0;
color: #f56c6c; /* 设置字体颜色 */
fill:#f56c6c !important;
font-size:16px!important;
}
.tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(3) button.tox-tbtn:nth-child(1) svg{
font-weight:bold !important;
background-color: rgb(43, 129, 239) !important;
color: #fff; /* 设置字体颜色 */
fill:#fff !important;
font-size:16px!important;
}
.tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(2) button.tox-tbtn:nth-child(1) svg{
font-weight:bold !important;
background-color: red;
color: #fff; /* 设置字体颜色 */
fill:#fff !important;
font-size:16px!important;
}
// 如果找到的 div 节点存在
if (outerDiv) {
const dataId = outerDiv.getAttribute('main-id');
// console.log('previousContent at line 617:', outerDiv.innerHTML.replace(/^<p>/, '').replace(/<\/p>$/, ''))
if (previousContent == _this.contentList.find((e) => e.am_id == dataId).content) {
console.log('at line 618:', '内容没有发生变化');
} else {
console.log('at line 618:', '内容发生变化');
}
}
`,
menubar: false,
toolbar: ['commentAdd |delete| Edit'],
end_container_on_empty_block: true,
content_css: 'default ',
setup(ed) {
// 禁止输入内容，但工具栏按钮仍然有效
ed.on('keydown', function (e) {
if (ed.mode.get() === 'readonly') {
e.preventDefault(); // 阻止任何输入
}
});
ed.ui.registry.addMenuButton('customDropdown', {
text: 'Set Title', // 下拉框标题
fetch: function (callback) {
// 定义下拉框的内容
const items = [
{
label: 'First level title',
value: 1
},
// 1 cm = 144 Twip 上边距（2.54 cm） = 2.54 × 144 = 365.76 Twip
{
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');
_this.$emit('onEditTitle', {
mainId: dataId,
value: item.value
});
}
}
}
}));
callback(menuItems);
ed.on('keydown', function (e) {
// 检查是否按下回车键
if (e.keyCode === 13) {
// 13 是回车键的 keyCode
e.preventDefault(); // 阻止默认行为（换行）
}
});
// 添加自定义菜单项
ed.ui.registry.addButton('Save', {
icon: 'checkmark',
text: 'Save',
onAction: function () {
var deleteButtons = document.querySelectorAll('.tox-tinymce-inline');
// if (deleteButtons) {
// deleteButtons.forEach(function (button) {
// button.remove(); // 移除每个 wordButtonContainer 按钮
// });
// ed.on('NodeChange', function (e) {
// if (e.element.nodeName === 'IMG') {
// // 禁止对图片进行编辑
// e.element.setAttribute('contenteditable', 'false'); // 禁用图片编辑
// e.element.style.pointerEvents = 'none'; // 禁用点击事件
// }
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, '');
// 2. 移除所有 style 属性
content = content.replace(/\s*style="[^"]*"/g, '');
// 3. 将 <strong> 转换为 <b>，<em> 转换为 <i>
var div = document.createElement('div');
div.innerHTML = content; // 将 HTML 字符串加载到 div 中
// 替换所有 <strong> 为 <b>
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]);
}
// 替换所有 <em> 为 <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]);
}
// 获取最终修改后的 HTML
content = div.innerHTML;
console.log('content at line 486:', content);
_this.$emit('saveContent', content, dataId);
// const dataId = outerDiv.getAttribute('main-id');
// let selectedText = edSelection.getContent({ format: 'text' });
// _this.$emit('onAddComment', {
// mainId: dataId,
// label: selectedText ? selectedText : ''
// });
}
}
});
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' });
_this.$emit('onAddComment', {
mainId: dataId,
label: selectedText ? selectedText : ''
});
}
}
}
});
ed.ui.registry.addButton('delete', {
icon: 'remove',
text: 'Delete',
onAction: function () {
_this.$emit('delete');
}
});
// 定义自定义按钮
ed.ui.registry.addButton('clearButton', {
text: 'Empty',
onAction: () => {
// 插入自定义表格到编辑器中
ed.setContent('');
}
});
ed.ui.registry.addButton('customBlue', {
text: 'Blue', // 按钮文本
onAction: function () {
// 在选中的文本周围包裹 <blue> 标签
var selectedText = ed.selection.getContent();
console.log('selectedText at line 529:', selectedText);
if (selectedText) {
var wrappedText = `<blue>${selectedText}</blue>`;
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;
// 向上查找最近的 <blue> 标签
while (startNode) {
if (startNode.nodeName && startNode.nodeName.toLowerCase() === 'blue') {
closestBlue = startNode;
break;
}
startNode = startNode.parentNode;
}
if (closestBlue) {
// 如果找到最近的 <blue> 标签，移除它的外层标签，但保留内容
const parent = closestBlue.parentNode;
while (closestBlue.firstChild) {
parent.insertBefore(closestBlue.firstChild, closestBlue);
}
parent.removeChild(closestBlue);
} else {
// 未找到 <blue> 标签，仅移除选中的 <blue> 标签内容
const selectedContent = ed.selection.getContent({ format: 'html' });
// 使用正则表达式移除选区中的 <blue> 标签
const cleanedContent = selectedContent
.replace(/<blue[^>]*>/g, '') // 删除起始标签 <blue>
.replace(/<\/blue>/g, ''); // 删除结束标签 </blue>
// 更新选中的内容
ed.selection.setContent(cleanedContent);
}
}
var previousContent = ed.getContent();
ed.on('blur', function () {
// 失去焦点时不执行保存操作，什么都不做
console.log('编辑器失去焦点，但不保存内容');
});
_this.$commonJS.initEditorButton(_this, ed);
},
init_instance_callback: (editor) => {
const disabledButtons = document.querySelectorAll('.tox-tbtn--disabled');
disabledButtons.forEach((button) => {
button.classList.remove('tox-tbtn--disabled');
button.removeAttribute('aria-disabled');
});
// if (_this.value) {
// editor.setContent(_this.value);
// _this.$emit('loaded');
@@ -770,21 +685,150 @@ export default {
// }
}
});
},
initTinymceTable(editorId) {
var _this = this;
tinymce.init({
readonly: true,
selector: `#${editorId}`,
inline: true,
license_key: 'gpl', // 使用开源 GPL 许可证
content_css: false,
table_resize_bars: true,
valid_elements: '*[*]',
image_advtab: false, // 禁用图片高级选项卡（防止自动调整大小）
plugins: 'forecolor code paste table image resize searchreplace',
content_style: `${tableStyle + this.wordStyle}
// 初始化当前编辑器
// tinymce.init({
// selector: `#${editorId}`,
// inline: true, // 使用内联模式
// menubar: false, // 禁用菜单栏
// toolbar: 'undo redo | bold italic | alignleft aligncenter alignright', // 工具栏
// setup: (editor) => {
// editor.on('blur', () => {
// console.log('内容更新:', editor.getContent());
// });
.tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(1) button.tox-tbtn:nth-child(1){
font-weight:bold !important;
background-color:#fef0f0;
color: #f56c6c;
fill:rgb(19, 188, 32);
}
/* 成功 */
.tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(3) button.tox-tbtn:nth-child(1){
font-weight:bold !important;
background-color: rgb(43, 129, 239) !important;
color: #fff;
fill:rgb(19, 188, 32);
}
/* 删除 */
.tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(2) button.tox-tbtn:nth-child(1){
font-weight:bold !important;
background-color: red;
color: #fff;
}
.tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(1) button.tox-tbtn:nth-child(1) svg{
font-weight:bold !important;
background-color:#fef0f0;
color: #f56c6c; /* 设置字体颜色 */
fill:#f56c6c !important;
font-size:16px!important;
}
.tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(3) button.tox-tbtn:nth-child(1) svg{
font-weight:bold !important;
background-color: rgb(43, 129, 239) !important;
color: #fff; /* 设置字体颜色 */
fill:#fff !important;
font-size:16px!important;
}
.tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(2) button.tox-tbtn:nth-child(1) svg{
font-weight:bold !important;
background-color: red;
color: #fff; /* 设置字体颜色 */
fill:#fff !important;
font-size:16px!important;
}
`,
menubar: false,
toolbar: ['commentAdd |delete| Edit'],
end_container_on_empty_block: true,
content_css: 'default ',
setup(ed) {
// 禁止输入内容，但工具栏按钮仍然有效
ed.on('keydown', function (e) {
if (ed.mode.get() === 'readonly') {
e.preventDefault(); // 阻止任何输入
}
});
ed.on('keydown', function (e) {
// 检查是否按下回车键
if (e.keyCode === 13) {
// 13 是回车键的 keyCode
e.preventDefault(); // 阻止默认行为（换行）
}
});
// ed.on('NodeChange', function (e) {
// if (e.element.nodeName === 'IMG') {
// // 禁止对图片进行编辑
// e.element.setAttribute('contenteditable', 'false'); // 禁用图片编辑
// e.element.style.pointerEvents = 'none'; // 禁用点击事件
// }
// });
var previousContent = ed.getContent();
ed.on('blur', function () {
// 失去焦点时不执行保存操作，什么都不做
console.log('编辑器失去焦点，但不保存内容');
});
_this.$commonJS.initEditorButton(_this, ed);
},
init_instance_callback: (editor) => {
const disabledButtons = document.querySelectorAll('.tox-tbtn--disabled');
disabledButtons.forEach((button) => {
button.classList.remove('tox-tbtn--disabled');
button.removeAttribute('aria-disabled');
});
// 保存当前编辑器实例
// if (_this.value) {
// editor.setContent(_this.value);
// _this.$emit('loaded');
// }
// _this.hasInit = true;
// editor.on('NodeChange Change KeyUp SetContent', () => {
// this.hasChange = true;
// this.$emit('input', editor.getContent());
// });
// const iframeDocument = editor.getDoc(); // 使用 ed.getDoc() 获取编辑器的 document
// if (iframeDocument) {
// iframeDocument.addEventListener('scroll', function () {
// if (wordButtonContainer) {
// wordButtonContainer.remove();
// wordButtonContainer = null;
// }
// if (_this.lastTag) {
// _this.lastTag.style.backgroundColor = ''; // 清除上一个高亮的标签样式
// _this.lastTag.style.border = '';
// }
// });
// }
}
});
},
initializeEditor(index, type, data) {
const editorId = `editor${index}`;
// 检查当前编辑器是否已经初始化
if (this.editors[editorId]) return;
// 销毁所有已初始化的编辑器实例
for (const key in this.editors) {
if (this.editors[key]) {
// 确保销毁所有编辑器实例
tinymce.remove(this.editors[key]);
this.editors[key] = null; // 清除引用
}
}
if (type == 'img') {
this.initTinymceImg(editorId);
} else if (type == 'table') {
this.initTinymceTable(editorId);
} else {
this.initTinymceContent(editorId);
}
this.$set(this.editors, editorId, tinymce.get(`editor${index}`));
},
deleteComment(data) {
@@ -888,17 +932,9 @@ export default {
this.$forceUpdate();
},
goToComment(mainId) {
var ed = window.tinymce.get(this.tinymceId);
const editorDoc = ed.getDoc(); // 获取 TinyMCE 内部的 document
console.log('Looking for element with main-id:', mainId); // 调试输出
// 在 iframe 内部的 document 中查找带有 main-id 的元素
const commentElement = editorDoc.querySelector(`[main-id="${mainId}"]`);
if (commentElement) {
commentElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
} else {
console.log('没有找到对应的批注元素', mainId); // 调试输出
const section = document.querySelector(`[main-id="${mainId}"]`);
if (section) {
section.scrollIntoView({ top: 100, behavior: 'smooth' });
}
},
initTinymce() {},
@@ -1506,112 +1542,7 @@ export default {
text-align: center !important;
font-weight: bold;
}
.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 table span blue {
color: rgb(0, 130, 170) !important;
}
.word-container {
width: 100%;
height: 100%;
@@ -1700,13 +1631,9 @@ export default {
padding: 2px 4px;
border-radius: 2px;
font-size: 14px;
font-weight: 500;
}
.MaxPicture img {
width: 580px !important;
}
/* .Resolved {
background-color: #f0f9eb;
margin-left: 10px;
border-color: #67c23a;
color: #67c23a;
font-weight: bold;
border-radius: 2px;
} */
</style>

153
src/components/page/components/table/wordHtmlTypesetting.vue
View File

@@ -3,7 +3,6 @@
<div
style="background-color: transparent !important; margin-top: 0px !important; height: 100%; padding: 0 !important; overflow: hidden"
class="ManuscirptList"
>
<!-- 图片缩略图区域 -->
@@ -16,20 +15,20 @@
class="el-menu-vertical-demo"
@select="handleSelectMenu"
>
<el-menu-item index="1">
<!-- <el-menu-item index="1">
<i class="el-icon-message-solid" style="margin: 0 auto; color: #fc625d"></i>
<span slot="title" style="line-height: 30px">Annotations</span>
</el-menu-item>
<el-menu-item index="2">
</el-menu-item> -->
<el-menu-item index="1">
<i class="el-icon-picture" color="#333639" style="margin: 0 auto"></i>
<span slot="title" style="line-height: 20px">Figures</span>
</el-menu-item>
<el-menu-item index="3">
<el-menu-item index="2">
<i class="el-icon-s-grid" color="#333639" style="margin: 0 auto"></i>
<span slot="title" style="line-height: 30px">Tables</span>
</el-menu-item>
<el-menu-item index="4">
<el-menu-item index="3">
<i class="el-icon-delete-solid" color="#333639" style="margin: 0 auto"></i>
<span slot="title" style="line-height: 30px">Recycle Bin</span>
</el-menu-item>
@@ -102,7 +101,7 @@
</li>
</div>
</li> -->
<li v-show="currentMenu == 2">
<li v-show="currentMenu == 1">
<div style="" class="go-content-charts-item-box">
<div class="item_box" style="width: 100%; height: auto; position: relative">
<el-collapse v-if="isShowEdit">
@@ -130,6 +129,56 @@
<el-link> Figures {{ index + 1 }} </el-link>
</p> -->
</div>
<div class="item_box" style="width: 100%; height: auto; position: relative">
<div class="list-center go-flex-center go-transition" style="width: 100%" @click="addImage">
<div class="title">
<span>Add Figure </span>
</div>
<div
class="thumbnailBox image list-img"
:style="`
border: 1px solid #ccccccb5;
width: 100%;
height: auto;
border-radius: 4px;
overflow: hidden;
position: relative;`"
>
<div style="width: 100%; height: 80px; display: flex; justify-content: center; align-items: center">
<!-- 图片内容 -->
<img src="@/assets/img/upload.png" style="width: 100px; height: 100%; object-fit: cover" />
</div>
<!-- 输入框 -->
</div>
</div>
<el-collapse v-if="isShowEdit">
<el-collapse-item name="1" style="margin-top: 4px">
<template slot="title">
<div style="width: 100%; display: flex; align-items: center; justify-content: space-between">
<span style="color: #777">Tables {{ index + 1 }}</span>
<span v-if="isShowEdit"><i class="el-icon-edit" v-if="isEdit"></i>Comments/ Suggestions</span>
</div>
</template>
<el-input
v-if="isShowEdit"
type="textarea"
placeholder="please input content"
:readonly="!isEdit"
:rows="4"
></el-input>
</el-collapse-item>
</el-collapse>
<!-- <p
style="color: #777; margin-top: 6px"
v-else
@click="img.has_selected == 1 ? goToListComment(img.article_image_id, 'img') : ''"
>
<el-link> Figures {{ index + 1 }} </el-link>
</p> -->
</div>
<div
class="item_box"
v-for="(img, index) in imagesList"
@@ -211,7 +260,6 @@
/>
</template>
<template v-else>
<div
style="
width: 140px;
@@ -260,8 +308,66 @@
</div>
</div>
</li>
<li v-show="currentMenu == 3">
<li v-show="currentMenu == 2">
<div style="" class="go-content-charts-item-box">
<div
class="item_box"
@click="addTable"
style="width: 100%; height: auto; position: relative"
>
<div class="list-center go-flex-center go-transition" style="width: 100%">
<div class="title">
<span
>Add Table </span>
</div>
<div
class="thumbnailBox image list-img"
:style="`
border: 1px solid #ccccccb5;
width: 100%;
height: auto;
border-radius: 4px;
overflow: hidden;
position: relative;`"
>
<div style="width: 100%; height: 80px; display: flex; justify-content: center; align-items: center">
<!-- 图片内容 -->
<img src="@/assets/img/uploadTable.png" style="width: 100px; height: 100%; object-fit: cover" />
</div>
</div>
</div>
<el-collapse v-if="isShowEdit">
<el-collapse-item name="1" style="margin-top: 4px">
<template slot="title">
<div style="width: 100%; display: flex; align-items: center; justify-content: space-between">
<span style="color: #777">Tables {{ index + 1 }}</span>
<span v-if="isShowEdit"><i class="el-icon-edit" v-if="isEdit"></i>Comments/ Suggestions</span>
</div>
</template>
<el-input
v-if="isShowEdit"
type="textarea"
placeholder="please input content"
:readonly="!isEdit"
:rows="4"
></el-input>
</el-collapse-item>
</el-collapse>
<!-- <p
style="color: #777; margin-top: 6px"
v-else
@click="img.has_selected == 1 ? goToListComment(img.article_image_id, 'img') : ''"
>
<el-link> Figures {{ index + 1 }} </el-link>
</p> -->
</div>
<div
class="item_box"
v-for="(table, index) in tablesList"
@@ -374,7 +480,7 @@
</div>
</div>
</li>
<li v-show="currentMenu == 4">
<li v-show="currentMenu == 3">
<div style="display: flex; flex-wrap: wrap; gap: 10px; justify-content: start">
<div
v-for="(item, index) in content"
@@ -419,7 +525,6 @@ export default {
mediaUrl,
statusList: [
{ title: 'ALL', type: '0' },
{ title: 'Typed', type: '1' },
@@ -467,22 +572,22 @@ export default {
},
// 保存评论修改
saveComment(index,comment) {
saveComment(index, comment) {
if (this.isEditComment) {
this.$emit('addComment',comment)
this.$emit('addComment', comment);
this.isEditing = null; // 退出编辑模式
}
},
onAddComment(comment) {
if (this.isEditComment) {
this.$emit('onAddComment',comment.am_id)
this.$emit('onAddComment', comment.am_id);
// this.isEditing = null; // 退出编辑模式
}
},
// 删除评论
deleteComment(comment, index) {
console.log('comment at line 480:', comment)
console.log('comment at line 480:', comment);
if (this.isEditComment) {
this.$confirm(this.$t('commonTable.removeAnnotations'), 'Prompt', {
confirmButtonText: 'Submit',
@@ -490,13 +595,12 @@ export default {
type: 'warning'
})
.then(() => {
this.$api
.post('api/Preaccept/clearMainsRemark', {
am_id: comment.am_id
})
.then((res) => {
this.getCommentList()
this.getCommentList();
});
// this.comments.splice(index, 1); // 删除评论
})
@@ -538,7 +642,12 @@ export default {
this.comments = res.data.list;
console.log('this.comments at line 537:', this.comments);
});
},
addImage() {
this.$emit('addImage');
},
addTable() {
this.$emit('addTable');
},
add(type) {
this.$emit('add', type);
@@ -571,7 +680,7 @@ export default {
this.tablesList = [...this.tables];
}
} else {
if (this.currentMenu == 2) {
if (this.currentMenu == 1) {
switch (this.currentSelectType) {
case '0':
this.imagesList = [...this.images];
@@ -583,7 +692,7 @@ export default {
this.imagesList = [...this.images].filter((e) => e.has_selected == 0);
break;
}
} else if (this.currentMenu == 3) {
} else if (this.currentMenu == 2) {
switch (this.currentSelectType) {
case '0':
this.tablesList = [...this.tables];
@@ -647,7 +756,7 @@ export default {
});
},
onDragStart($event, item, index, type) {
console.log('type at line 192:', index);
this.$emit('onDragStart', $event, item, index, type);
},
changeActiveNames(e) {
@@ -697,8 +806,6 @@ export default {
this.$commonJS.createImageModal(index, modalContent, 'img');
// }
});
}
this.images = list;

2
src/main.js
View File

@@ -81,6 +81,8 @@ import commonContent from '@/components/page/components/table/content.vue'
Vue.component('common-content', commonContent);
import commonWord from '@/components/page/components/table/word.vue'
Vue.component('common-comment', commonComment);
import commonEditTable from '@/components/page/components/table/editTable.vue'
Vue.component('common-edit-table', commonEditTable);
import commonComment from '@/components/page/components/table/comment.vue'
Vue.component('common-word', commonWord);
import commonAnnotations from '@/components/page/components/table/annotations.vue'