提交
This commit is contained in:
BIN
src/assets/img/carriageReturn.png
Normal file
BIN
src/assets/img/carriageReturn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
@@ -390,10 +390,12 @@
|
||||
</div>
|
||||
<div class="titHtml titHtml1" v-if="htmlContent && html_type == 2">
|
||||
<common-word
|
||||
:readonly="true"
|
||||
:isPreview="true"
|
||||
v-if="htmlContent"
|
||||
ref="commonWord"
|
||||
:value="htmlContent"
|
||||
:contentList="mains"
|
||||
|
||||
:wordStyle="wordStyle"
|
||||
style="width: calc(100%); height: 50vh"
|
||||
:style="`100%`"
|
||||
@@ -1024,70 +1026,70 @@ export default {
|
||||
});
|
||||
},
|
||||
getWord() {
|
||||
var htmlContent = ``;
|
||||
htmlContent += this.mains
|
||||
.map((item) => {
|
||||
//批注
|
||||
let contentHtml = '';
|
||||
var isRemark = ``;
|
||||
// var htmlContent = ``;
|
||||
// htmlContent += this.mains
|
||||
// .map((item) => {
|
||||
// //批注
|
||||
// let contentHtml = '';
|
||||
// var isRemark = ``;
|
||||
|
||||
// 判断是否是图片
|
||||
if (item.type == 1) {
|
||||
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 +'articleImage/'+ 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 if (item.type == 2) {
|
||||
var tableList = JSON.parse(item.table.table_data);
|
||||
// // 判断是否是图片
|
||||
// if (item.type == 1) {
|
||||
// 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 +'articleImage/'+ 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 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 = `
|
||||
// <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 = `<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('');
|
||||
this.htmlContent = htmlContent;
|
||||
// return contentHtml;
|
||||
// })
|
||||
// .join('');
|
||||
this.htmlContent = 'true';
|
||||
|
||||
},
|
||||
getMainsInfo2(e) {
|
||||
@@ -1099,11 +1101,12 @@ export default {
|
||||
.then((res) => {
|
||||
this.loadHtml = false;
|
||||
if (res.code == 0) {
|
||||
// console.log(res,'res')
|
||||
console.log(res,'res')
|
||||
|
||||
this.mains = '';
|
||||
if (res.data.list.length > 0) {
|
||||
this.mains = res.data.list;
|
||||
console.log('this.mains at line 1108:', this.mains)
|
||||
this.getWord();
|
||||
} else {
|
||||
this.mains = '';
|
||||
|
||||
@@ -131,10 +131,12 @@
|
||||
</div>
|
||||
<div class="titHtml titHtml1" v-if="htmlContent && html_type == 2">
|
||||
<common-word
|
||||
:readonly="true"
|
||||
v-if="htmlContent"
|
||||
ref="commonWord"
|
||||
:value="htmlContent"
|
||||
:isPreview="true"
|
||||
v-if="htmlContent"
|
||||
ref="commonWord"
|
||||
:value="htmlContent"
|
||||
:contentList="mains"
|
||||
|
||||
:wordStyle="wordStyle"
|
||||
style="width: calc(100%); height: 50vh"
|
||||
:style="`100%`"
|
||||
@@ -755,69 +757,69 @@ export default {
|
||||
});
|
||||
},
|
||||
getWord() {
|
||||
var htmlContent = ``;
|
||||
htmlContent += this.mains
|
||||
.map((item) => {
|
||||
//批注
|
||||
let contentHtml = '';
|
||||
var isRemark = ``;
|
||||
// var htmlContent = ``;
|
||||
// htmlContent += this.mains
|
||||
// .map((item) => {
|
||||
// //批注
|
||||
// let contentHtml = '';
|
||||
// var isRemark = ``;
|
||||
|
||||
// 判断是否是图片
|
||||
if (item.type == 1) {
|
||||
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 +'articleImage/'+ 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 if (item.type == 2) {
|
||||
var tableList = JSON.parse(item.table.table_data);
|
||||
// // 判断是否是图片
|
||||
// if (item.type == 1) {
|
||||
// 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 +'articleImage/'+ 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 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('');
|
||||
this.htmlContent = htmlContent;
|
||||
// return contentHtml;
|
||||
// })
|
||||
// .join('');
|
||||
this.htmlContent = 'true';
|
||||
console.log('this.htmlContent at line 820:', this.htmlContent)
|
||||
},
|
||||
getMainsInfo2(e) {
|
||||
|
||||
@@ -10,9 +10,9 @@
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
:style="isPreview ? 'width: 100%' : 'width: calc(100% - 300px)'"
|
||||
:style="isPreview ? 'width: 100%;padding: 20px;' : 'width: calc(100% - 300px);padding: 20px 20px 20px 34px;'"
|
||||
style="
|
||||
padding: 20px;
|
||||
|
||||
box-sizing: border-box;
|
||||
width: calc(100% - 300px);
|
||||
float: left;
|
||||
@@ -22,7 +22,7 @@
|
||||
"
|
||||
>
|
||||
<template v-for="(item, index) in wordList">
|
||||
<span class="isRemark" :remark-main-id="item.am_id" v-if="item.checks.length > 0 && !isPreview">
|
||||
<span class="isRemark" :remark-main-id="item.am_id" v-if="item.checks && item.checks.length > 0 && !isPreview">
|
||||
><img
|
||||
class="isRemark"
|
||||
src="@/assets/img/isRemark.png"
|
||||
@@ -32,94 +32,99 @@
|
||||
|
||||
<span>{{ item.am_id }}</span>
|
||||
</span>
|
||||
<div :class="!isPreview?(item.is_h1?'isTitleH1':item.is_h2?'isTitleH2':item.is_h3?'isTitleH3':''):''">
|
||||
<template v-if="!isPreview"> <span class="Htitle Htitle1" v-if="item.is_h1==1">H1</span>
|
||||
<span class="Htitle Htitle2" v-else-if="item.is_h2==1">H2</span>
|
||||
<span class="Htitle Htitle3" v-else-if="item.is_h3==1">H3</span></template>
|
||||
|
||||
<div
|
||||
:key="item.am_id"
|
||||
id="drop-target"
|
||||
:class="highlightImg(item.ami_id, item.checks)"
|
||||
:comment-Id="highlightImgCommentId(item.ami_id, item.checks)"
|
||||
@dragover="handleDragOver"
|
||||
@dragenter="handleDragEnter"
|
||||
@dragleave="handleDragLeave"
|
||||
@drop="handleDrop"
|
||||
class="MaxPicture pMain myeditabledivImage drop-target"
|
||||
@click="initializeEditor(item.am_id, 'img', item)"
|
||||
v-if="item.type == 1"
|
||||
:main-state="item.state"
|
||||
:remark="item.checks.length > 0 ? 1 : 0"
|
||||
:contenteditable="!readonly && !isPreview"
|
||||
:data-id="item.ami_id"
|
||||
:type="item.type"
|
||||
:main-id="item.am_id"
|
||||
:id="'editor' + item.am_id"
|
||||
>
|
||||
<img :src="`${mediaUrl + item.image.url}`" />
|
||||
<div
|
||||
:key="item.am_id"
|
||||
id="drop-target"
|
||||
:class="highlightImg(item.ami_id, item.checks ? item.checks : [])"
|
||||
:comment-Id="highlightImgCommentId(item.ami_id, item.checks)"
|
||||
@dragover="handleDragOver"
|
||||
@dragenter="handleDragEnter"
|
||||
@dragleave="handleDragLeave"
|
||||
@drop="handleDrop"
|
||||
class="MaxPicture pMain myeditabledivImage drop-target"
|
||||
@click="initializeEditor(item.am_id, 'img', item)"
|
||||
v-if="item.type == 1"
|
||||
:main-state="item.state"
|
||||
:remark="item.checks && item.checks.length > 0 ? 1 : 0"
|
||||
:contenteditable="!readonly && !isPreview"
|
||||
:data-id="item.ami_id"
|
||||
:type="item.type"
|
||||
:main-id="item.am_id"
|
||||
:id="'editor' + item.am_id"
|
||||
>
|
||||
<img :src="`${mediaUrl + item.image.url}`" />
|
||||
|
||||
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
|
||||
<span v-html="item.image.note ? highlightText(item.image.note, item.checks) : ''"></span>
|
||||
</font>
|
||||
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
|
||||
<span v-html="item.image.note ? highlightText(item.image.note, item.checks ? item.checks : []) : ''"></span>
|
||||
</font>
|
||||
</div>
|
||||
<div
|
||||
id="drop-target"
|
||||
@dragover="handleDragOver"
|
||||
@dragenter="handleDragEnter"
|
||||
@dragleave="handleDragLeave"
|
||||
@drop="handleDrop"
|
||||
@click="initializeEditor(item.am_id, 'table', item)"
|
||||
class="thumbnailTableBox wordTableHtml table_Box pMain myeditabledivTable drop-target"
|
||||
v-else-if="item.type == 2"
|
||||
:main-state="item.state"
|
||||
:remark="item.checks && item.checks.length > 0 ? 1 : 0"
|
||||
:contenteditable="!readonly && !isPreview"
|
||||
:data-id="item.amt_id"
|
||||
:type="item.type"
|
||||
:id="'editor' + item.am_id"
|
||||
:main-id="item.am_id"
|
||||
>
|
||||
<!-- 标题部分 -->
|
||||
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
|
||||
<span v-html="highlightText(item.table.title || '', item.checks ? item.checks : [])"></span>
|
||||
</font>
|
||||
|
||||
<!-- 表格部分 -->
|
||||
<table border="1" style="width: auto; border-collapse: collapse; text-align: center">
|
||||
<tr v-for="(row, i) in JSON.parse(item.table.table_data)" :key="i">
|
||||
<td
|
||||
v-for="(cell, i1) in row"
|
||||
:key="i1"
|
||||
:colspan="`${cell.colspan || 1}`"
|
||||
:rowspan="`${cell.rowspan || 1}`"
|
||||
>
|
||||
<span v-html="highlightText(cell.text || '', item.checks ? item.checks : [])"></span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- 备注部分 -->
|
||||
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
|
||||
<span v-html="highlightText(item.table.note || '', item.checks ? item.checks : [])"></span>
|
||||
</font>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
id="drop-target"
|
||||
@dragover="handleDragOver"
|
||||
@dragenter="handleDragEnter"
|
||||
@dragleave="handleDragLeave"
|
||||
@drop="handleDrop"
|
||||
@click="initializeEditor(item.am_id)"
|
||||
class="pMain myeditablediv drop-target"
|
||||
@blur="clearEditor(item.am_id)"
|
||||
:main-state="item.state"
|
||||
:remark="item.checks && item.checks.length > 0 ? 1 : 0"
|
||||
:contenteditable="!readonly && !isPreview"
|
||||
:data-id="item.am_id"
|
||||
:main-id="item.am_id"
|
||||
:type="item.type"
|
||||
:id="'editor' + item.am_id"
|
||||
v-html="highlightText(item.content, item.checks ? item.checks : [], item.type)"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
id="drop-target"
|
||||
@dragover="handleDragOver"
|
||||
@dragenter="handleDragEnter"
|
||||
@dragleave="handleDragLeave"
|
||||
@drop="handleDrop"
|
||||
@click="initializeEditor(item.am_id, 'table', item)"
|
||||
class="thumbnailTableBox wordTableHtml table_Box pMain myeditabledivTable drop-target"
|
||||
v-else-if="item.type == 2"
|
||||
:main-state="item.state"
|
||||
:remark="item.checks.length > 0 ? 1 : 0"
|
||||
:contenteditable="!readonly && !isPreview"
|
||||
:data-id="item.amt_id"
|
||||
:type="item.type"
|
||||
:id="'editor' + item.am_id"
|
||||
:main-id="item.am_id"
|
||||
>
|
||||
<!-- 标题部分 -->
|
||||
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
|
||||
<span v-html="highlightText(item.table.title || '', item.checks)"></span>
|
||||
</font>
|
||||
|
||||
<!-- 表格部分 -->
|
||||
<table border="1" style="width: auto; border-collapse: collapse; text-align: center">
|
||||
<tr v-for="(row, i) in JSON.parse(item.table.table_data)" :key="i">
|
||||
<td
|
||||
v-for="(cell, i1) in row"
|
||||
:key="i1"
|
||||
:colspan="`${cell.colspan || 1}`"
|
||||
:rowspan="`${cell.rowspan || 1}`">
|
||||
<span v-html="highlightText(cell.text || '', item.checks)"></span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- 备注部分 -->
|
||||
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
|
||||
<span v-html="highlightText(item.table.note || '', item.checks)"></span>
|
||||
</font>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
id="drop-target"
|
||||
@dragover="handleDragOver"
|
||||
@dragenter="handleDragEnter"
|
||||
@dragleave="handleDragLeave"
|
||||
@drop="handleDrop"
|
||||
@click="initializeEditor(item.am_id)"
|
||||
class="pMain myeditablediv drop-target"
|
||||
v-else
|
||||
@blur="clearEditor(item.am_id)"
|
||||
:main-state="item.state"
|
||||
:remark="item.checks.length > 0 ? 1 : 0"
|
||||
:contenteditable="!readonly && !isPreview"
|
||||
:data-id="item.am_id"
|
||||
:main-id="item.am_id"
|
||||
:type="item.type"
|
||||
:id="'editor' + item.am_id"
|
||||
v-html="highlightText(item.content, item.checks)"
|
||||
></div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
@@ -138,7 +143,6 @@
|
||||
class="commentList"
|
||||
>
|
||||
<li
|
||||
|
||||
v-for="(item, index) in commentList"
|
||||
class="comment-item annotation"
|
||||
:data-target="`main-${item.am_id}`"
|
||||
@@ -164,16 +168,20 @@
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid rgba(243, 213, 213);
|
||||
"
|
||||
:style="commont.estate == 1? 'background:#13bc200f;' : ''"
|
||||
:style="commont.estate == 1 ? 'background:#13bc200f;' : ''"
|
||||
v-for="(commont, commentIndex) in item.comment"
|
||||
@click="highlightLeftComment(commont.amc_id, item.am_id)"
|
||||
>
|
||||
<div style="width: 100%; display: flex; align-items: center; justify-content: space-between">
|
||||
<div style="display: flex; align-items: center">
|
||||
<span :style="commont.estate == 1 ? 'opacity:0.6;color:rgb(19, 188, 32);' : ''" style="color: #e61a12; font-weight: bold"
|
||||
<span
|
||||
:style="commont.estate == 1 ? 'opacity:0.6;color:rgb(19, 188, 32);' : ''"
|
||||
style="color: #e61a12; font-weight: bold"
|
||||
>{{ commentIndex + 1 }}、</span
|
||||
>
|
||||
<span style="color: rgb(230, 26, 18); font-size: 12px" :style="commont.estate == 1 ? 'opacity:0.6;color:rgb(19, 188, 32);' : ''"
|
||||
<span
|
||||
style="color: rgb(230, 26, 18); font-size: 12px"
|
||||
:style="commont.estate == 1 ? 'opacity:0.6;color:rgb(19, 188, 32);' : ''"
|
||||
>Comment</span
|
||||
>
|
||||
<!-- <img
|
||||
@@ -183,7 +191,9 @@
|
||||
style="width: 30px; height: 14px"
|
||||
/> -->
|
||||
|
||||
<span v-if="commont.estate == 1" class="Resolved" :style="commont.estate == 1 ? 'opacity:0.6;' : ''">{{ $t('commonTable.Resolved') }}</span>
|
||||
<span v-if="commont.estate == 1" class="Resolved" :style="commont.estate == 1 ? 'opacity:0.6;' : ''">{{
|
||||
$t('commonTable.Resolved')
|
||||
}}</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; justify-content: center">
|
||||
<span style="color: #b8b7b7; font-size: 12px">{{ getTime(commont.ctime) }}</span
|
||||
@@ -502,6 +512,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
imagePath: require('@/assets/img/carriageReturn.png'), // 或者你可以设置其他路径
|
||||
scrollPosition: 0,
|
||||
wordList: [],
|
||||
commentList: [],
|
||||
@@ -871,7 +882,8 @@ export default {
|
||||
plugins: 'forecolor code paste table image resize ',
|
||||
content_style: `${tableStyle + this.wordStyle}
|
||||
|
||||
`,entity_encoding: 'raw', // 不编码 > 等字符
|
||||
`,
|
||||
entity_encoding: 'raw', // 不编码 > 等字符
|
||||
menubar: false,
|
||||
toolbar: _this.isEditComment ? ['commentAdd |delete| addRow|Edit'] : ['delete| addRow|Edit'],
|
||||
end_container_on_empty_block: true,
|
||||
@@ -1000,9 +1012,8 @@ export default {
|
||||
return formattedDate;
|
||||
},
|
||||
goToListComment(data) {
|
||||
console.log('data at line 993:', data)
|
||||
this.goToComment(data.am_id)
|
||||
|
||||
console.log('data at line 993:', data);
|
||||
this.goToComment(data.am_id);
|
||||
},
|
||||
divOnScroll() {
|
||||
if (!this.isPreview) {
|
||||
@@ -1059,37 +1070,37 @@ export default {
|
||||
|
||||
return emptyContentIndexes;
|
||||
},
|
||||
escapeRegExp(string) {
|
||||
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
||||
},
|
||||
highlightText(text, annotations) {
|
||||
if (!this.isPreview) {
|
||||
let tempText = text;
|
||||
escapeRegExp(string) {
|
||||
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
||||
},
|
||||
highlightText(text, annotations, type) {
|
||||
if (!this.isPreview) {
|
||||
let tempText = text;
|
||||
|
||||
// 1. 使用占位符替代批注内容
|
||||
const placeholders = [];
|
||||
annotations.forEach((annotation, index) => {
|
||||
if (annotation.content == '') {
|
||||
return tempText;
|
||||
}
|
||||
const escapedContent = this.escapeRegExp(annotation.content); // 转义正则表达式中的特殊字符
|
||||
const placeholder = `{{remark_placeholder_${index}}}`; // 占位符
|
||||
const regExp = new RegExp(`(${escapedContent})`, 'gi'); // 全局匹配批注内容
|
||||
// 1. 使用占位符替代批注内容
|
||||
const placeholders = [];
|
||||
annotations.forEach((annotation, index) => {
|
||||
if (annotation.content == '') {
|
||||
return tempText;
|
||||
}
|
||||
const escapedContent = this.escapeRegExp(annotation.content); // 转义正则表达式中的特殊字符
|
||||
const placeholder = `{{remark_placeholder_${index}}}`; // 占位符
|
||||
const regExp = new RegExp(`(${escapedContent})`, 'gi'); // 全局匹配批注内容
|
||||
|
||||
// 如果批注内容存在，替换成占位符
|
||||
if (tempText.includes(annotation.content)) {
|
||||
tempText = tempText.replace(regExp, placeholder);
|
||||
placeholders.push({ placeholder, annotation, index });
|
||||
}
|
||||
});
|
||||
// 如果批注内容存在，替换成占位符
|
||||
if (tempText.includes(annotation.content)) {
|
||||
tempText = tempText.replace(regExp, placeholder);
|
||||
placeholders.push({ placeholder, annotation, index });
|
||||
}
|
||||
});
|
||||
|
||||
// 2. 为占位符添加高亮
|
||||
placeholders.forEach(({ placeholder, annotation, index }) => {
|
||||
const regExp = new RegExp(placeholder, 'gi');
|
||||
// 2. 为占位符添加高亮
|
||||
placeholders.forEach(({ placeholder, annotation, index }) => {
|
||||
const regExp = new RegExp(placeholder, 'gi');
|
||||
|
||||
tempText = tempText.replace(regExp, (match) => {
|
||||
const randomColor = this.getRandomLightColor();
|
||||
return `
|
||||
tempText = tempText.replace(regExp, (match) => {
|
||||
const randomColor = this.getRandomLightColor();
|
||||
return `
|
||||
<span
|
||||
class="remarkbg"
|
||||
style="background-color: ${randomColor};
|
||||
@@ -1108,16 +1119,20 @@ export default {
|
||||
</span>
|
||||
</span>
|
||||
`;
|
||||
});
|
||||
});
|
||||
|
||||
// 3. 返回处理后的文本
|
||||
return tempText;
|
||||
} else {
|
||||
return text;
|
||||
}
|
||||
},
|
||||
|
||||
});
|
||||
});
|
||||
if (type == 0 && tempText == '') {
|
||||
console.log('tempText at line 1122:', tempText);
|
||||
tempText =
|
||||
tempText +
|
||||
`<img contenteditable="${false}" src="${this.imagePath}" alt="" style="width: 20px;height: 20px;opacity:0.6;">`;
|
||||
}
|
||||
// 3. 返回处理后的文本
|
||||
return tempText;
|
||||
} else {
|
||||
return text;
|
||||
}
|
||||
},
|
||||
|
||||
getCommentsData() {
|
||||
if (!this.isPreview) {
|
||||
@@ -1927,4 +1942,46 @@ export default {
|
||||
border: 2px solid #cd5454; /* 高亮边框 */
|
||||
box-shadow: 0 0 10px #f77b7b; /* 高亮阴影 */
|
||||
}
|
||||
.isTitleH1{
|
||||
position: relative;
|
||||
/* border: 1px solid #94c2f7; */
|
||||
background-color: #dbebfc54;
|
||||
}
|
||||
|
||||
.Htitle{
|
||||
|
||||
color: #4d99f1;
|
||||
background-color: #dbebfca6;
|
||||
/* border: 1px solid #4d99f1; */
|
||||
border-radius: 50%;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
|
||||
line-height: 24px;
|
||||
padding: 2px;
|
||||
font-size: 16px;
|
||||
left: -30px;
|
||||
top: 0px;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.Htitle1{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
/* font-size: 14px; */
|
||||
}
|
||||
.Htitle2{ width: 24px;
|
||||
height: 24px;
|
||||
/* font-size: 16px; */
|
||||
}
|
||||
.Htitle3{ width: 24px;
|
||||
height: 24px;
|
||||
/* font-size: 12px; */
|
||||
}
|
||||
.isTitleH2{position: relative;
|
||||
background-color: #dbebfc54;
|
||||
}
|
||||
.isTitleH3{position: relative;
|
||||
background-color: #dbebfc54;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user