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-02-11 09:11:04 +08:00
parent b2d7c542e8
commit b7d72640b6
4 changed files with 321 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/carriageReturn.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

125
src/components/page/articleListEditor_E.vue
View File

@@ -390,10 +390,12 @@
</div> </div>
<div class="titHtml titHtml1" v-if="htmlContent && html_type == 2"> <div class="titHtml titHtml1" v-if="htmlContent && html_type == 2">
<common-word <common-word
:readonly="true" :isPreview="true"
v-if="htmlContent" v-if="htmlContent"
ref="commonWord" ref="commonWord"
:value="htmlContent" :value="htmlContent"
:contentList="mains"
:wordStyle="wordStyle" :wordStyle="wordStyle"
style="width: calc(100%); height: 50vh" style="width: calc(100%); height: 50vh"
:style="`100%`" :style="`100%`"
@@ -1024,70 +1026,70 @@ export default {
}); });
}, },
getWord() { getWord() {
var htmlContent = ``; // var htmlContent = ``;
htmlContent += this.mains // htmlContent += this.mains
.map((item) => { // .map((item) => {
//批注 // //批注
let contentHtml = ''; // let contentHtml = '';
var isRemark = ``; // var isRemark = ``;
// 判断是否是图片 // // 判断是否是图片
if (item.type == 1) { // if (item.type == 1) {
contentHtml = ` // contentHtml = `
<p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${ // <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
item.ami_id // item.ami_id
}" main-id="${item.am_id}"> // }" main-id="${item.am_id}">
${isRemark} // ${isRemark}
<img src="${this.mediaUrl +'articleImage/'+ item.image.url}" style="width: ${ // <img src="${this.mediaUrl +'articleImage/'+ item.image.url}" style="width: ${
item.width ? `${item.width}px` : '100%' // item.width ? `${item.width}px` : '100%'
}" /> // }" />
<font class="font" 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 : '' // item.image.note ? item.image.note : ''
}</font> // }</font>
</p> // </p>
`; // `;
} else if (item.type == 2) { // } else if (item.type == 2) {
var tableList = JSON.parse(item.table.table_data); // var tableList = JSON.parse(item.table.table_data);
contentHtml = ` // contentHtml = `
<div contenteditable="false" data-id="${item.amt_id}" main-state="${item.state}" main-id="${ // <div contenteditable="false" data-id="${item.amt_id}" main-state="${item.state}" main-id="${
item.am_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;"> // }" class="thumbnailTableBox wordTableHtml table_Box pMain" style="width: 100%; padding: 8px 15px; box-sizing: border-box; border-radius: 4px; position: relative;">
${isRemark} // ${isRemark}
<font class="font tableTitle" style="width:100%" >${item.table.title ? item.table.title : ''}</font> // <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; "> // <table border="1" style="width: auto; border-collapse: collapse; text-align: center; ">
${tableList // ${tableList
.map((row) => { // .map((row) => {
return ` // return `
<tr> // <tr>
${row // ${row
.map((cell) => { // .map((cell) => {
return ` // return `
<td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}"> // <td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}">
<span>${cell.text || ''}</span> // <span>${cell.text || ''}</span>
</td> // </td>
`; // `;
}) // })
.join('')} <!-- join the cells in the row --> // .join('')} <!-- join the cells in the row -->
</tr> // </tr>
`; // `;
}) // })
.join('')} <!-- join the rows --> // .join('')} <!-- join the rows -->
</table> // </table>
<font class="font" style="width:100%" >${item.table.note ? item.table.note : ''}</font> // <font class="font" style="width:100%" >${item.table.note ? item.table.note : ''}</font>
</div> // </div>
`; // `;
} else { // } 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; // return contentHtml;
}) // })
.join(''); // .join('');
this.htmlContent = htmlContent; this.htmlContent = 'true';
}, },
getMainsInfo2(e) { getMainsInfo2(e) {
@@ -1099,11 +1101,12 @@ export default {
.then((res) => { .then((res) => {
this.loadHtml = false; this.loadHtml = false;
if (res.code == 0) { if (res.code == 0) {
// console.log(res,'res') console.log(res,'res')
this.mains = ''; this.mains = '';
if (res.data.list.length > 0) { if (res.data.list.length > 0) {
this.mains = res.data.list; this.mains = res.data.list;
console.log('this.mains at line 1108:', this.mains)
this.getWord(); this.getWord();
} else { } else {
this.mains = ''; this.mains = '';

128
src/components/page/components/html/index.vue
View File

@@ -131,10 +131,12 @@
</div> </div>
<div class="titHtml titHtml1" v-if="htmlContent && html_type == 2"> <div class="titHtml titHtml1" v-if="htmlContent && html_type == 2">
<common-word <common-word
:readonly="true" :isPreview="true"
v-if="htmlContent" v-if="htmlContent"
ref="commonWord" ref="commonWord"
:value="htmlContent" :value="htmlContent"
:contentList="mains"
:wordStyle="wordStyle" :wordStyle="wordStyle"
style="width: calc(100%); height: 50vh" style="width: calc(100%); height: 50vh"
:style="`100%`" :style="`100%`"
@@ -755,69 +757,69 @@ export default {
}); });
}, },
getWord() { getWord() {
var htmlContent = ``; // var htmlContent = ``;
htmlContent += this.mains // htmlContent += this.mains
.map((item) => { // .map((item) => {
//批注 // //批注
let contentHtml = ''; // let contentHtml = '';
var isRemark = ``; // var isRemark = ``;
// 判断是否是图片 // // 判断是否是图片
if (item.type == 1) { // if (item.type == 1) {
contentHtml = ` // contentHtml = `
<p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${ // <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
item.ami_id // item.ami_id
}" main-id="${item.am_id}"> // }" main-id="${item.am_id}">
${isRemark} // ${isRemark}
<img src="${this.mediaUrl +'articleImage/'+ item.image.url}" style="width: ${ // <img src="${this.mediaUrl +'articleImage/'+ item.image.url}" style="width: ${
item.width ? `${item.width}px` : '100%' // item.width ? `${item.width}px` : '100%'
}" /> // }" />
<font class="font" 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 : '' // item.image.note ? item.image.note : ''
}</font> // }</font>
</p> // </p>
`; // `;
} else if (item.type == 2) { // } else if (item.type == 2) {
var tableList = JSON.parse(item.table.table_data); // var tableList = JSON.parse(item.table.table_data);
contentHtml = ` // contentHtml = `
<div contenteditable="false" data-id="${item.amt_id}" main-state="${item.state}" main-id="${ // <div contenteditable="false" data-id="${item.amt_id}" main-state="${item.state}" main-id="${
item.am_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;"> // }" class="thumbnailTableBox wordTableHtml table_Box pMain" style="width: 100%; padding: 8px 15px; box-sizing: border-box; border-radius: 4px; position: relative;">
${isRemark} // ${isRemark}
<font class="font tableTitle" style="width:100%" >${item.table.title ? item.table.title : ''}</font> // <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; "> // <table border="1" style="width: auto; border-collapse: collapse; text-align: center; ">
${tableList // ${tableList
.map((row) => { // .map((row) => {
return ` // return `
<tr> // <tr>
${row // ${row
.map((cell) => { // .map((cell) => {
return ` // return `
<td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}"> // <td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}">
<span>${cell.text || ''}</span> // <span>${cell.text || ''}</span>
</td> // </td>
`; // `;
}) // })
.join('')} <!-- join the cells in the row --> // .join('')} <!-- join the cells in the row -->
</tr> // </tr>
`; // `;
}) // })
.join('')} <!-- join the rows --> // .join('')} <!-- join the rows -->
</table> // </table>
<font class="font" style="width:100%" >${item.table.note ? item.table.note : ''}</font> // <font class="font" style="width:100%" >${item.table.note ? item.table.note : ''}</font>
</div> // </div>
`; // `;
} else { // } 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; // return contentHtml;
}) // })
.join(''); // .join('');
this.htmlContent = htmlContent; this.htmlContent = 'true';
console.log('this.htmlContent at line 820:', this.htmlContent) console.log('this.htmlContent at line 820:', this.htmlContent)
}, },
getMainsInfo2(e) { getMainsInfo2(e) {

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

@@ -10,9 +10,9 @@
> >
<div <div
class="" 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=" style="
padding: 20px;
box-sizing: border-box; box-sizing: border-box;
width: calc(100% - 300px); width: calc(100% - 300px);
float: left; float: left;
@@ -22,7 +22,7 @@
" "
> >
<template v-for="(item, index) in wordList"> <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 ><img
class="isRemark" class="isRemark"
src="@/assets/img/isRemark.png" src="@/assets/img/isRemark.png"
@@ -32,94 +32,99 @@
<span>{{ item.am_id }}</span> <span>{{ item.am_id }}</span>
</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 ? 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}`" />
<div <font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
:key="item.am_id" <span v-html="item.image.note ? highlightText(item.image.note, item.checks ? item.checks : []) : ''"></span>
id="drop-target" </font>
:class="highlightImg(item.ami_id, item.checks)" </div>
:comment-Id="highlightImgCommentId(item.ami_id, item.checks)" <div
@dragover="handleDragOver" id="drop-target"
@dragenter="handleDragEnter" @dragover="handleDragOver"
@dragleave="handleDragLeave" @dragenter="handleDragEnter"
@drop="handleDrop" @dragleave="handleDragLeave"
class="MaxPicture pMain myeditabledivImage drop-target" @drop="handleDrop"
@click="initializeEditor(item.am_id, 'img', item)" @click="initializeEditor(item.am_id, 'table', item)"
v-if="item.type == 1" class="thumbnailTableBox wordTableHtml table_Box pMain myeditabledivTable drop-target"
:main-state="item.state" v-else-if="item.type == 2"
:remark="item.checks.length > 0 ? 1 : 0" :main-state="item.state"
:contenteditable="!readonly && !isPreview" :remark="item.checks && item.checks.length > 0 ? 1 : 0"
:data-id="item.ami_id" :contenteditable="!readonly && !isPreview"
:type="item.type" :data-id="item.amt_id"
:main-id="item.am_id" :type="item.type"
:id="'editor' + item.am_id" :id="'editor' + item.am_id"
> :main-id="item.am_id"
<img :src="`${mediaUrl + item.image.url}`" /> >
<!-- 标题部分 -->
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
<span v-html="highlightText(item.table.title || '', item.checks ? 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) : ''"></span> <table border="1" style="width: auto; border-collapse: collapse; text-align: center">
</font> <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>
<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> </template>
</div> </div>
@@ -138,7 +143,6 @@
class="commentList" class="commentList"
> >
<li <li
v-for="(item, index) in commentList" v-for="(item, index) in commentList"
class="comment-item annotation" class="comment-item annotation"
:data-target="`main-${item.am_id}`" :data-target="`main-${item.am_id}`"
@@ -164,16 +168,20 @@
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid rgba(243, 213, 213); 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" v-for="(commont, commentIndex) in item.comment"
@click="highlightLeftComment(commont.amc_id, item.am_id)" @click="highlightLeftComment(commont.amc_id, item.am_id)"
> >
<div style="width: 100%; display: flex; align-items: center; justify-content: space-between"> <div style="width: 100%; display: flex; align-items: center; justify-content: space-between">
<div style="display: flex; align-items: center"> <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 >{{ 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 >Comment</span
> >
<!-- <img <!-- <img
@@ -183,7 +191,9 @@
style="width: 30px; height: 14px" 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>
<div style="display: flex; align-items: center; justify-content: center"> <div style="display: flex; align-items: center; justify-content: center">
<span style="color: #b8b7b7; font-size: 12px">{{ getTime(commont.ctime) }}</span <span style="color: #b8b7b7; font-size: 12px">{{ getTime(commont.ctime) }}</span
@@ -502,6 +512,7 @@ export default {
}, },
data() { data() {
return { return {
imagePath: require('@/assets/img/carriageReturn.png'), // 或者你可以设置其他路径
scrollPosition: 0, scrollPosition: 0,
wordList: [], wordList: [],
commentList: [], commentList: [],
@@ -782,7 +793,7 @@ export default {
table_resize_bars: true, table_resize_bars: true,
image_advtab: false, // 禁用图片高级选项卡（防止自动调整大小） image_advtab: false, // 禁用图片高级选项卡（防止自动调整大小）
valid_elements: '*[*]', valid_elements: '*[*]',
plugins: 'forecolor code paste table image resize ', plugins: 'forecolor code paste table image resize ',
content_style: `${tableStyle + this.wordStyle} content_style: `${tableStyle + this.wordStyle}
@@ -871,7 +882,8 @@ export default {
plugins: 'forecolor code paste table image resize ', plugins: 'forecolor code paste table image resize ',
content_style: `${tableStyle + this.wordStyle} content_style: `${tableStyle + this.wordStyle}
`,entity_encoding: 'raw', // 不编码 > 等字符 `,
entity_encoding: 'raw', // 不编码 > 等字符
menubar: false, menubar: false,
toolbar: _this.isEditComment ? ['commentAdd |delete| addRow|Edit'] : ['delete| addRow|Edit'], toolbar: _this.isEditComment ? ['commentAdd |delete| addRow|Edit'] : ['delete| addRow|Edit'],
end_container_on_empty_block: true, end_container_on_empty_block: true,
@@ -1000,9 +1012,8 @@ export default {
return formattedDate; return formattedDate;
}, },
goToListComment(data) { goToListComment(data) {
console.log('data at line 993:', data) console.log('data at line 993:', data);
this.goToComment(data.am_id) this.goToComment(data.am_id);
}, },
divOnScroll() { divOnScroll() {
if (!this.isPreview) { if (!this.isPreview) {
@@ -1059,37 +1070,37 @@ export default {
return emptyContentIndexes; return emptyContentIndexes;
}, },
escapeRegExp(string) { escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}, },
highlightText(text, annotations) { highlightText(text, annotations, type) {
if (!this.isPreview) { if (!this.isPreview) {
let tempText = text; let tempText = text;
// 1. 使用占位符替代批注内容 // 1. 使用占位符替代批注内容
const placeholders = []; const placeholders = [];
annotations.forEach((annotation, index) => { annotations.forEach((annotation, index) => {
if (annotation.content == '') { if (annotation.content == '') {
return tempText; return tempText;
} }
const escapedContent = this.escapeRegExp(annotation.content); // 转义正则表达式中的特殊字符 const escapedContent = this.escapeRegExp(annotation.content); // 转义正则表达式中的特殊字符
const placeholder = `{{remark_placeholder_${index}}}`; // 占位符 const placeholder = `{{remark_placeholder_${index}}}`; // 占位符
const regExp = new RegExp(`(${escapedContent})`, 'gi'); // 全局匹配批注内容 const regExp = new RegExp(`(${escapedContent})`, 'gi'); // 全局匹配批注内容
// 如果批注内容存在，替换成占位符 // 如果批注内容存在，替换成占位符
if (tempText.includes(annotation.content)) { if (tempText.includes(annotation.content)) {
tempText = tempText.replace(regExp, placeholder); tempText = tempText.replace(regExp, placeholder);
placeholders.push({ placeholder, annotation, index }); placeholders.push({ placeholder, annotation, index });
} }
}); });
// 2. 为占位符添加高亮 // 2. 为占位符添加高亮
placeholders.forEach(({ placeholder, annotation, index }) => { placeholders.forEach(({ placeholder, annotation, index }) => {
const regExp = new RegExp(placeholder, 'gi'); const regExp = new RegExp(placeholder, 'gi');
tempText = tempText.replace(regExp, (match) => { tempText = tempText.replace(regExp, (match) => {
const randomColor = this.getRandomLightColor(); const randomColor = this.getRandomLightColor();
return ` return `
<span <span
class="remarkbg" class="remarkbg"
style="background-color: ${randomColor}; style="background-color: ${randomColor};
@@ -1108,16 +1119,20 @@ export default {
</span> </span>
</span> </span>
`; `;
}); });
}); });
if (type == 0 && tempText == '') {
// 3. 返回处理后的文本 console.log('tempText at line 1122:', tempText);
return tempText; tempText =
} else { tempText +
return text; `<img contenteditable="${false}" src="${this.imagePath}" alt="" style="width: 20px;height: 20px;opacity:0.6;">`;
} }
}, // 3. 返回处理后的文本
return tempText;
} else {
return text;
}
},
getCommentsData() { getCommentsData() {
if (!this.isPreview) { if (!this.isPreview) {
@@ -1927,4 +1942,46 @@ export default {
border: 2px solid #cd5454; /* 高亮边框 */ border: 2px solid #cd5454; /* 高亮边框 */
box-shadow: 0 0 10px #f77b7b; /* 高亮阴影 */ 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> </style>