Compare commits
2 Commits
3f6bd8ac73
...
zy-edit
| Author | SHA1 | Date | |
|---|---|---|---|
| 5505929027 | |||
| f6622a742c |
2316
src/components/page/GenerateCharts copy.vue
Normal file
2316
src/components/page/GenerateCharts copy.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,5 +1,11 @@
|
||||
<template>
|
||||
<div style="height: 100%">
|
||||
<el-row style="margin-top: 0%; height: 100%">
|
||||
<div style="display: flex; align-items: center; height: 100%">
|
||||
<!-- 左侧 列表 -->
|
||||
|
||||
<!-- 右侧 用户列表 -->
|
||||
<div :class="[drawer ? 'right' : 'right1']" style="height: 100%">
|
||||
<div
|
||||
class="container"
|
||||
style="
|
||||
@@ -14,6 +20,7 @@
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-show="!drawer"
|
||||
class="right-side"
|
||||
style="
|
||||
width: 285px;
|
||||
@@ -75,7 +82,11 @@
|
||||
<input type="file" ref="fileInput" style="display: none" @change="handleFileChange" />
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%; width: calc(100% - 285px); float: right; height: calc(100% - 0px); background-color: #e4e9ed">
|
||||
<div
|
||||
:style="`width: ${
|
||||
drawer ? '100%' : 'calc(100% - 285px)'
|
||||
}; float: right; height: calc(100% - 0px); background-color: #e4e9ed`"
|
||||
>
|
||||
<!-- <div class="toolbar">
|
||||
<div class="toolbar_item" @click="handleImageAdd('img')">
|
||||
<img src="@/assets/img/upload.png" style="object-fit: contain" />
|
||||
@@ -94,6 +105,7 @@
|
||||
:value="htmlContent"
|
||||
:contentList="Main_List"
|
||||
:comments="comments"
|
||||
:drawer="drawer"
|
||||
:wordStyle="wordStyle"
|
||||
@onDrop="onDrop"
|
||||
@saveContent="saveContent"
|
||||
@@ -123,6 +135,72 @@
|
||||
</common-word>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="[drawer ? 'left' : 'left1']" style="height: 100%">
|
||||
<div>
|
||||
<div
|
||||
style="height: 56px; background-color: #fff; padding: 20px; box-sizing: border-box"
|
||||
v-if="currentContent && currentContent.type == 1"
|
||||
>
|
||||
Image
|
||||
</div>
|
||||
<div
|
||||
style="height: 56px; background-color: #fff; padding: 20px; box-sizing: border-box"
|
||||
v-if="currentContent && currentContent.type == 2"
|
||||
>
|
||||
Table
|
||||
</div>
|
||||
<div
|
||||
style="height: 56px; background-color: #fff; padding: 20px; box-sizing: border-box"
|
||||
v-if="currentContent && currentContent.type == 0"
|
||||
>
|
||||
Content
|
||||
</div>
|
||||
<div style="padding: 20px 10px; box-sizing: border-box">
|
||||
<common-content
|
||||
v-show="currentContent && currentContent.type == 0"
|
||||
:value="currentContent ? currentContent.content : ''"
|
||||
@getContent="getContent"
|
||||
@openLatexEditor="openLatexEditor"
|
||||
ref="commonContent1"
|
||||
height="78vh"
|
||||
></common-content>
|
||||
|
||||
<common-table
|
||||
v-show="currentContent && currentContent.type == 2"
|
||||
@getContent="getContent"
|
||||
height="78vh"
|
||||
ref="commonTable1"
|
||||
@openLatexEditor="openLatexEditor"
|
||||
:lineStyle="lineStyle"
|
||||
></common-table>
|
||||
</div>
|
||||
|
||||
<div style="float: right">
|
||||
<el-button @click="drawer = false"> Cancel </el-button>
|
||||
<el-button type="primary" @click="handleSaveContent" style="margin-right: 20px"> Save </el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 折叠展开图片-->
|
||||
<!-- <div
|
||||
style="cursor: pointer; width: 5%;z-index: 9999;"
|
||||
:class="[drawer ? 'imgright' : 'imgright1']"
|
||||
@click="clickImg"
|
||||
>
|
||||
<img
|
||||
v-show="!drawer"
|
||||
style="height: 40px; width: 25px"
|
||||
src=""
|
||||
/>
|
||||
<img
|
||||
v-show="drawer"
|
||||
style="height: 40px; width: 25px"
|
||||
src=""
|
||||
/>
|
||||
</div> -->
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<!--添加/修改图片 -->
|
||||
<el-dialog :title="picStyle.visiTitle" :visible.sync="pictVisible" width="1200px" :close-on-click-modal="false">
|
||||
@@ -271,14 +349,20 @@
|
||||
<div v-for="(item, i) in uploadWordTables" class="uploadWordTableBox">
|
||||
<el-button @click="addUploadWordTable(item)" size="mini" class="insertTable"> 插入 </el-button>
|
||||
<div class="thumbnailTableBox wordTableHtml table_Box pMain myeditabledivTable drop-target">
|
||||
<p style="font-size: 12px;padding: 10px;box-sizing: border-box;">Table {{ i + 1 }}</p>
|
||||
<p style="font-size: 12px; padding: 10px; box-sizing: border-box">Table {{ i + 1 }}</p>
|
||||
<table border="1" :style="`width: 800px;zoom:${zoomNum};border-collapse: collapse; text-align: center`">
|
||||
<tr
|
||||
v-for="(row, i) in item.table_data"
|
||||
:key="i"
|
||||
:class="{ 'table-header-row': isHeaderRow(i, item.table_data) }"
|
||||
>
|
||||
<td style="font-size: 20px;"v-for="(cell, i1) in row" :key="i1" :colspan="`${cell.colspan || 1}`" :rowspan="`${cell.rowspan || 1}`">
|
||||
<td
|
||||
style="font-size: 20px"
|
||||
v-for="(cell, i1) in row"
|
||||
:key="i1"
|
||||
:colspan="`${cell.colspan || 1}`"
|
||||
:rowspan="`${cell.rowspan || 1}`"
|
||||
>
|
||||
<span v-html="cell.text"></span>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -407,6 +491,7 @@ import bottomTinymce from '@/components/page/components/Tinymce';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
drawer: false,
|
||||
zoomNum: (window.innerWidth * 0.38) / 850,
|
||||
uploadWordTables: [],
|
||||
tablesHtmlVisible: false,
|
||||
@@ -570,7 +655,9 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
clickImg() {
|
||||
this.drawer = !this.drawer;
|
||||
},
|
||||
async copyArray(data) {
|
||||
try {
|
||||
// 将数组内容转换为字符串，使用换行符分隔
|
||||
@@ -621,7 +708,7 @@ export default {
|
||||
// }
|
||||
// },
|
||||
handleSaveContent() {
|
||||
this.$refs.commonContent.getTinymceContent('content');
|
||||
this.$refs.commonContent1.getTinymceContent('content');
|
||||
},
|
||||
handleSaveAddContent() {
|
||||
this.$refs.addContent.getTinymceContent('addcontent');
|
||||
@@ -1136,14 +1223,14 @@ export default {
|
||||
});
|
||||
// 处理文件上传并传递回调函数
|
||||
this.$commonJS.handleFileUpload(event, function (tables) {
|
||||
console.log('tables at line 1138:', tables)
|
||||
console.log('tables at line 1138:', tables);
|
||||
if (tables.length == 0) {
|
||||
loading.close()
|
||||
loading.close();
|
||||
that.$message({
|
||||
type: 'warning',
|
||||
message: 'No table found!'
|
||||
});
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
|
||||
// 使用 Promise.all 等待所有表格解析完成
|
||||
@@ -1152,8 +1239,6 @@ export default {
|
||||
return new Promise((resolve, reject) => {
|
||||
// 解析每个表格
|
||||
that.$commonJS.parseTableToArray(table, (tableList) => {
|
||||
|
||||
|
||||
resolve({ table_data: tableList, html_data: '' });
|
||||
});
|
||||
});
|
||||
@@ -1162,11 +1247,11 @@ export default {
|
||||
.then((result) => {
|
||||
// 所有表格的解析完成后，处理结果
|
||||
that.uploadWordTables = result;
|
||||
loading.close()
|
||||
loading.close();
|
||||
that.tablesHtmlVisible = true;
|
||||
})
|
||||
.catch((error) => {
|
||||
loading.close()
|
||||
loading.close();
|
||||
console.error('Error processing tables:', error);
|
||||
});
|
||||
});
|
||||
@@ -1180,7 +1265,6 @@ export default {
|
||||
},
|
||||
|
||||
async onAddRow(mainId) {
|
||||
|
||||
await this.$api
|
||||
.post(this.urlList.addRow, {
|
||||
am_id: mainId,
|
||||
@@ -1289,7 +1373,7 @@ export default {
|
||||
this.currentId = null;
|
||||
this.clearButton();
|
||||
var data = this.Main_List.find((item) => item.am_id == dataId);
|
||||
// console.log('data at line 667:', data);
|
||||
|
||||
if (data.type == 1) {
|
||||
var extension = data.image.url.split('.').pop().toLowerCase();
|
||||
if (extension == 'tif') {
|
||||
@@ -1315,14 +1399,22 @@ export default {
|
||||
title: data.table.title
|
||||
};
|
||||
this.lineStyle.visiTitle = 'Edit Table';
|
||||
this.threeVisible = true;
|
||||
// this.threeVisible = true;
|
||||
} else {
|
||||
data.content = data.content.replace(/<span[^>]*>/g, '').replace(/<\/span>/g, ''); // 去除span标签
|
||||
this.currentContent = data;
|
||||
|
||||
this.editVisible = true;
|
||||
// this.editVisible = true;
|
||||
this.currentId = dataId;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.drawer = true;
|
||||
if (this.currentContent.type == 0) {
|
||||
this.$refs.commonContent1.setValue();
|
||||
} else if (this.currentContent.type == 2) {
|
||||
this.$refs.commonTable1.setValue();
|
||||
}
|
||||
});
|
||||
},
|
||||
onAddContent(dataId) {
|
||||
this.addContentVisible = true;
|
||||
@@ -1534,6 +1626,7 @@ export default {
|
||||
.post(urlLInk, urlTask)
|
||||
.then(async (res) => {
|
||||
if (res.code == 0) {
|
||||
this.drawer = false;
|
||||
// res.data.list.forEach((data) => {
|
||||
// if (data.amt_id) {
|
||||
// try {
|
||||
@@ -2313,4 +2406,24 @@ overflow: hidden;
|
||||
background-color: #0066990d;
|
||||
/* display: block !important; */
|
||||
}
|
||||
.left {
|
||||
width: 50vw;
|
||||
background-color: #f5f5f5;
|
||||
z-index: 10;
|
||||
|
||||
box-sizing: border-box;
|
||||
/* transition: all 0.2s; */
|
||||
}
|
||||
.left1 {
|
||||
width: 0%;
|
||||
/* transition: all 0.2s; */
|
||||
}
|
||||
.right {
|
||||
width: 50vw;
|
||||
/* transition: all 0.2s; */
|
||||
}
|
||||
.right1 {
|
||||
width: 100%;
|
||||
/* transition: all 0.2s; */
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -692,6 +692,14 @@ export default {
|
||||
//设置内容
|
||||
setContent(value) {
|
||||
window.tinymce.get(this.tinymceId).setContent(value);
|
||||
|
||||
},
|
||||
setContent2(value) {
|
||||
window.tinymce.get(this.tinymceId).setContent(value);
|
||||
setTimeout(() => {
|
||||
window.renderMathJax(this.tinymceId);
|
||||
}, 10);
|
||||
|
||||
},
|
||||
//获取内容
|
||||
async getContent(type) {
|
||||
|
||||
200
src/components/page/components/table/WordListItem.vue
Normal file
200
src/components/page/components/table/WordListItem.vue
Normal file
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<div >
|
||||
<el-checkbox
|
||||
@change="updateUniqueIds"
|
||||
v-if="!isPreview"
|
||||
v-model="item.checked"
|
||||
style="position: absolute; left: -20px; width: 8px; height: 8px; margin-top: 8px"
|
||||
></el-checkbox>
|
||||
|
||||
<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"
|
||||
alt=""
|
||||
style="width: 15px; height: 15px; margin-right: 6px; margin-left: -14px"
|
||||
/>
|
||||
|
||||
<span>{{ item.am_id }}</span>
|
||||
</span>
|
||||
<div
|
||||
:class="
|
||||
!isPreview
|
||||
? item.is_h1
|
||||
? 'isTitleH1'
|
||||
: item.is_h2
|
||||
? 'isTitleH2'
|
||||
: item.is_h3
|
||||
? 'isTitleH3'
|
||||
: ''
|
||||
: item.is_h1
|
||||
? 'Ptitle'
|
||||
: ''
|
||||
"
|
||||
style="line-height: 24px"
|
||||
>
|
||||
<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 :class="currentId == item.am_id ? 'glowing-border' : ''" style="position: relative">
|
||||
<div
|
||||
v-if="currentId == item.am_id"
|
||||
style="background-color: #fff; z-index: 100; position: absolute; right: 0px; top: -40px"
|
||||
>
|
||||
<!-- <el-button
|
||||
v-if="currentId == item.am_id"
|
||||
style="background-color: #006699d1; font-weight: bold; color: #fff; font-size: 16px !important"
|
||||
:style="index == 0 ? ' opacity: 0.2;' : ' opacity: 1;'"
|
||||
size="mini"
|
||||
plain
|
||||
:disabled="index != 0 ? false : true"
|
||||
@click="changeSort('up')"
|
||||
>↑</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="currentId == item.am_id"
|
||||
style="background-color: #006699d1; font-weight: bold; color: #fff; font-size: 16px !important"
|
||||
size="mini"
|
||||
:style="index == wordList.length - 1 ? ' opacity: 0.2;' : ' opacity: 1;'"
|
||||
plain
|
||||
:disabled="index == wordList.length - 1 ? true : false"
|
||||
@click="changeSort('down')"
|
||||
>↓</el-button
|
||||
> -->
|
||||
</div>
|
||||
|
||||
<div
|
||||
@dblclick="dblclickEdit(item.am_id, 'img', item, index)"
|
||||
:key="item.am_id"
|
||||
id="drop-target"
|
||||
:class="highlightImg(item.ami_id, item.checks ? item.checks : [])"
|
||||
:comment-Id="highlightImgCommentId(item.ami_id, item.checks ? item.checks : [])"
|
||||
@dragover="handleDragOver"
|
||||
@dragenter="handleDragEnter"
|
||||
@dragleave="handleDragLeave"
|
||||
@drop="handleDrop"
|
||||
class="MaxPicture pMain myeditabledivImage drop-target"
|
||||
@click.stop="initializeEditor($event, item.am_id, 'img', item, index)"
|
||||
v-if="item.type == 1"
|
||||
:main-state="item.state"
|
||||
:remark="item.checks && item.checks.length > 0 ? 1 : 0"
|
||||
:data-id="item.ami_id"
|
||||
:type="item.type"
|
||||
:main-id="item.am_id"
|
||||
@contextmenu.prevent="openMenu($event, 'img', item.am_id, item, index)"
|
||||
:id="'editor' + item.am_id"
|
||||
>
|
||||
<img :src="`${mediaUrl + item.image.url}`" />
|
||||
|
||||
<font class="font imageTitle" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
|
||||
<span
|
||||
v-html="item.image.title ? highlightText(item.image.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 ? item.checks : []) : ''"
|
||||
></span>
|
||||
</font>
|
||||
</div>
|
||||
<div
|
||||
@dblclick="dblclickEdit(item.am_id, 'table', item, index)"
|
||||
id="drop-target"
|
||||
@dragover="handleDragOver"
|
||||
@dragenter="handleDragEnter"
|
||||
@dragleave="handleDragLeave"
|
||||
@drop="handleDrop"
|
||||
@click.stop="initializeEditor($event, item.am_id, 'table', item, index)"
|
||||
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"
|
||||
:data-id="item.amt_id"
|
||||
:type="item.type"
|
||||
:id="'editor' + item.am_id"
|
||||
:main-id="item.am_id"
|
||||
@contextmenu.prevent="openMenu($event, 'table', item.am_id, item, index)"
|
||||
>
|
||||
<!-- 标题部分 -->
|
||||
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`" style="text-align: center">
|
||||
<span v-html="highlightText(item.table.title || '', item.checks ? item.checks : [])"></span>
|
||||
</font>
|
||||
|
||||
<!-- 表格部分 -->
|
||||
<table border="1" style="width: 100%; border-collapse: collapse; text-align: center">
|
||||
<tr
|
||||
v-for="(row, i) in JSON.parse(item.table.table_data)"
|
||||
:key="i"
|
||||
:class="{ 'table-header-row': isHeaderRow(i, item.table.table_data) }"
|
||||
>
|
||||
<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
|
||||
@contextmenu.prevent="openMenu($event, 'content', item.am_id, item, index)"
|
||||
@dblclick="dblclickEdit(item.am_id, 'text', item, index)"
|
||||
v-else
|
||||
id="drop-target"
|
||||
@dragover="handleDragOver"
|
||||
@dragenter="handleDragEnter"
|
||||
@dragleave="handleDragLeave"
|
||||
@drop="handleDrop"
|
||||
@click.stop="initializeEditor($event, item.am_id, 'text', item, index)"
|
||||
class="pMain myeditablediv drop-target"
|
||||
@blur="clearEditor(item.am_id)"
|
||||
:main-state="item.state"
|
||||
:remark="item.checks && item.checks.length > 0 ? 1 : 0"
|
||||
: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>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
item: Object,
|
||||
isPreview: Boolean,
|
||||
readonly: Boolean,
|
||||
currentId: String,
|
||||
mediaUrl: String,
|
||||
|
||||
isHeaderRow: Function,
|
||||
highlightImgCommentId: Function,
|
||||
highlightImg: Function,
|
||||
highlightText: Function,
|
||||
dblclickEdit: Function,
|
||||
updateUniqueIds: Function,
|
||||
handleDragOver: Function,
|
||||
handleDragEnter: Function,
|
||||
handleDragLeave: Function,
|
||||
handleDrop: Function,
|
||||
initializeEditor: Function,
|
||||
openMenu: Function,
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -20,7 +20,7 @@
|
||||
style="
|
||||
/* white-space: pre-line; */
|
||||
line-height: 12px;
|
||||
max-height: 60vh;
|
||||
|
||||
overflow: auto;
|
||||
font-size: 12px;
|
||||
font-size: 14px; /* 字体大小 */
|
||||
@@ -74,6 +74,11 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setValue(){
|
||||
// 假设编辑器的 ID 是 'editor-id'
|
||||
this.$refs.tinymceChild1.setContent2(this.value);
|
||||
|
||||
},
|
||||
openLatexEditor(data) {
|
||||
this.$emit('openLatexEditor',data)
|
||||
console.log('at line 254:', '打开数字公式');
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
:wordStyle="wordStyle"
|
||||
@getContent="getContent"
|
||||
@openLatexEditor="openLatexEditor"
|
||||
:height="calcDynamicWidth()"
|
||||
:height="height?height:calcDynamicWidth()"
|
||||
:value="updatedHtml"
|
||||
:typesettingType="typesettingType"
|
||||
class="paste-area text-container"
|
||||
@@ -33,7 +33,7 @@
|
||||
<script>
|
||||
import Tinymce from '@/components/page/components/Tinymce';
|
||||
export default {
|
||||
props: ['lineStyle'],
|
||||
props: ['lineStyle','height'],
|
||||
components: {
|
||||
Tinymce
|
||||
},
|
||||
@@ -102,6 +102,47 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setValue(){ console.log('this.lineStyle at line 107:', this.lineStyle)
|
||||
this.typesettingType = 1;
|
||||
if (this.lineStyle) {
|
||||
|
||||
// console.log('newVal at line 37:', this.lineStyle);
|
||||
if (this.lineStyle.table) {
|
||||
this.tableData = [...this.lineStyle.table];
|
||||
var modalContent = `
|
||||
<div class="wordTableHtml" >
|
||||
<table
|
||||
border="1"
|
||||
style="
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
table-layout: auto;"
|
||||
>`;
|
||||
this.tableData.forEach((row,i) => {
|
||||
modalContent += `<tr class="${this.isHeaderRow(i,this.tableData)?'table-header-row':''}">`;
|
||||
row.forEach((cell) => {
|
||||
modalContent += `
|
||||
<td
|
||||
colspan="${cell.colspan || 1}"
|
||||
rowspan="${cell.rowspan || 1}"
|
||||
style=""
|
||||
>
|
||||
<span>${cell.text}</span>
|
||||
</td>`;
|
||||
});
|
||||
modalContent += `</tr>`;
|
||||
});
|
||||
modalContent += `</table></div>`;
|
||||
// console.log('modalContent at line 91:', modalContent);
|
||||
this.updatedHtml = modalContent;
|
||||
}
|
||||
// this.updatedHtml = newVal.html_data;
|
||||
} else {
|
||||
this.updatedHtml = '';
|
||||
}
|
||||
this.$refs.tinymceChild1.setContent2(this.updatedHtml);
|
||||
},
|
||||
openLatexEditor(data) {
|
||||
this.$emit('openLatexEditor',data)
|
||||
console.log('at line 254:', '打开数字公式');
|
||||
|
||||
@@ -1,6 +1,16 @@
|
||||
<template>
|
||||
<div class="tinymce-container editor-container word-container" :style="!isPreview ? 'padding:10px 20px 10px 10px;' : 'padding:0px;'" ref="scrollDiv">
|
||||
<div
|
||||
@click="
|
||||
isMenuVisible = false;
|
||||
currentData = {};
|
||||
currentId = '';
|
||||
"
|
||||
class="tinymce-container editor-container word-container"
|
||||
:style="!isPreview ? 'padding:10px 20px 10px 30px;' : 'padding:0px;'"
|
||||
ref="scrollDiv"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
style="
|
||||
box-shadow: 0 2px 2px -2px rgba(34, 47, 62, 0.1), 0 8px 8px -4px rgba(34, 47, 62, 0.07);
|
||||
margin: 0px 0;
|
||||
@@ -9,10 +19,106 @@
|
||||
"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
:style="isPreview ? 'width: 100%;padding: 20px;' : 'width: calc(100% - 300px);padding: 20px 20px 20px 34px;'"
|
||||
v-if="!isPreview"
|
||||
style="
|
||||
border-bottom: 2px solid #c7cdcf;
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
left: 285px;
|
||||
z-index: 10;
|
||||
right: 330px;
|
||||
height: 46px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
width: calc(100% - 285px - 330px);
|
||||
"
|
||||
>
|
||||
<div style="width: auto; display: flex; align-items: center">
|
||||
<!-- <el-checkbox v-model="checked" style="border-right: 1px solid #d8d8d8; padding: 0 20px 0 0;z-index: 10;" size="medium">Select All</el-checkbox> -->
|
||||
<!-- <div
|
||||
style="border-right: 1px solid #d8d8d8; padding: 0 20px"
|
||||
:style="currentData.type == 0 ? 'Opacity:1' : 'Opacity:0.6'"
|
||||
>
|
||||
<ul class="HTitleBox">
|
||||
<li
|
||||
:style="currentData.is_h1 == 1 ? 'color:#4d99f1' : 'color:#333'"
|
||||
@click="currentData.is_h1 == 0 ? changeTitle(1) : changeTitle(0)"
|
||||
>
|
||||
H1
|
||||
</li>
|
||||
<li
|
||||
:style="currentData.is_h2 == 1 ? 'color:#4d99f1' : 'color:#333'"
|
||||
@click="currentData.is_h2 == 0 ? changeTitle(2) : changeTitle(0)"
|
||||
>
|
||||
H2
|
||||
</li>
|
||||
<li
|
||||
:style="currentData.is_h3 == 1 ? 'color:#4d99f1' : 'color:#333'"
|
||||
@click="currentData.is_h3 == 0 ? changeTitle(3) : changeTitle(0)"
|
||||
>
|
||||
H3
|
||||
</li>
|
||||
</ul>
|
||||
</div> -->
|
||||
<!-- <div style="border-right: 1px solid #d8d8d8; padding: 0 20px">
|
||||
<ul class="HTitleBox" style="border: none">
|
||||
<li @click="addContent" style="font-size: 14px; padding: 0">
|
||||
<i class="el-icon-document"> </i>
|
||||
Batch Add content
|
||||
</li>
|
||||
</ul>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div style="padding: 0 0px; float: right">
|
||||
<ul class="operateBox">
|
||||
<!-- <li
|
||||
v-if="isEditComment"
|
||||
style="background-color: #fff !important; color: #f56c6c; border: 1px solid #f56c6c"
|
||||
@mousedown="cacheSelection"
|
||||
@click="handleSelection"
|
||||
>
|
||||
<i class="el-icon-document-add" style="margin-top: 2px; float: left"></i>
|
||||
|
||||
Comment
|
||||
</li> -->
|
||||
<div style="border-right: 1px solid #d8d8d8; padding: 0 20px">
|
||||
<ul class="HTitleBox" style="border: none">
|
||||
<li @click="addContent" style="font-size: 14px; padding: 0; background-color: #fff !important; color: #333">
|
||||
<i class="el-icon-document" style="margin-right: 2px"> </i>
|
||||
Batch Add content
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<li style="background-color: #cbccd1 !important; color: #333; border: 1px solid #cbccd1" @click="onAddRow">
|
||||
<i class="el-icon-document-add" style="margin-top: 2px"></i>
|
||||
|
||||
Row
|
||||
</li>
|
||||
|
||||
<!-- <li style="" @click="onEdit">
|
||||
<i class="el-icon-edit" style="margin-top: 2px"></i>
|
||||
|
||||
Edit
|
||||
</li> -->
|
||||
|
||||
<li style="background-color: #fc625d !important" @click="onDelete">
|
||||
<i class="el-icon-delete" style="margin-top: 2px"></i>
|
||||
|
||||
Delete
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="word-container-box"
|
||||
:style="isPreview ? 'width: 100%;padding: 20px;' : 'width: calc(100% - 300px);padding: 60px 20px 20px 34px;'"
|
||||
style="
|
||||
box-sizing: border-box;
|
||||
width: calc(100% - 300px);
|
||||
float: left;
|
||||
@@ -21,7 +127,18 @@
|
||||
position: relative;
|
||||
"
|
||||
>
|
||||
<!-- <div v-if="selectedIds.length > 0" class="selected-to-here">
|
||||
Selected to here: {{ selectedIds[selectedIds.length - 1] }}
|
||||
</div> -->
|
||||
<!-- <common-late-x></common-late-x> -->
|
||||
<template v-for="(item, index) in wordList">
|
||||
<el-checkbox
|
||||
@change="updateUniqueIds"
|
||||
v-if="!isPreview"
|
||||
v-model="item.checked"
|
||||
style="position: absolute; left: -20px; width: 8px; height: 8px; margin-top: 8px"
|
||||
></el-checkbox>
|
||||
|
||||
<span class="isRemark" :remark-main-id="item.am_id" v-if="item.checks && item.checks.length > 0 && !isPreview">
|
||||
><img
|
||||
class="isRemark"
|
||||
@@ -32,12 +149,57 @@
|
||||
|
||||
<span>{{ item.am_id }}</span>
|
||||
</span>
|
||||
<div :class="!isPreview?(item.is_h1?'isTitleH1':item.is_h2?'isTitleH2':item.is_h3?'isTitleH3':''):''" style="line-height: 24px;">
|
||||
<template v-if="!isPreview"> <span class="Htitle Htitle1" v-if="item.is_h1==1">H1</span>
|
||||
<div
|
||||
:class="
|
||||
!isPreview
|
||||
? item.is_h1
|
||||
? 'isTitleH1'
|
||||
: item.is_h2
|
||||
? 'isTitleH2'
|
||||
: item.is_h3
|
||||
? 'isTitleH3'
|
||||
: ''
|
||||
: item.is_h1
|
||||
? 'Ptitle'
|
||||
: ''
|
||||
"
|
||||
style="line-height: 24px"
|
||||
>
|
||||
<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>
|
||||
<span class="Htitle Htitle3" v-else-if="item.is_h3 == 1">H3</span></template
|
||||
>
|
||||
|
||||
<div :class="currentId == item.am_id ? 'glowing-border' : ''" style="position: relative">
|
||||
<div
|
||||
v-if="currentId == item.am_id"
|
||||
style="background-color: #fff; z-index: 100; position: absolute; right: 0px; top: -40px"
|
||||
>
|
||||
<!-- <el-button
|
||||
v-if="currentId == item.am_id"
|
||||
style="background-color: #006699d1; font-weight: bold; color: #fff; font-size: 16px !important"
|
||||
:style="index == 0 ? ' opacity: 0.2;' : ' opacity: 1;'"
|
||||
size="mini"
|
||||
plain
|
||||
:disabled="index != 0 ? false : true"
|
||||
@click="changeSort('up')"
|
||||
>↑</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="currentId == item.am_id"
|
||||
style="background-color: #006699d1; font-weight: bold; color: #fff; font-size: 16px !important"
|
||||
size="mini"
|
||||
:style="index == wordList.length - 1 ? ' opacity: 0.2;' : ' opacity: 1;'"
|
||||
plain
|
||||
:disabled="index == wordList.length - 1 ? true : false"
|
||||
@click="changeSort('down')"
|
||||
>↓</el-button
|
||||
> -->
|
||||
</div>
|
||||
|
||||
<div
|
||||
@dblclick="dblclickEdit(item.am_id, 'img', item, index)"
|
||||
:key="item.am_id"
|
||||
id="drop-target"
|
||||
:class="highlightImg(item.ami_id, item.checks ? item.checks : [])"
|
||||
@@ -47,47 +209,59 @@
|
||||
@dragleave="handleDragLeave"
|
||||
@drop="handleDrop"
|
||||
class="MaxPicture pMain myeditabledivImage drop-target"
|
||||
@click="initializeEditor(item.am_id, 'img', item)"
|
||||
@click.stop="initializeEditor($event, item.am_id, 'img', item, index)"
|
||||
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"
|
||||
@contextmenu.prevent="openMenu($event, 'img', item.am_id, item, index)"
|
||||
:id="'editor' + item.am_id"
|
||||
>
|
||||
<img :src="`${mediaUrl + item.image.url}`" />
|
||||
|
||||
<font class="font imageTitle" :style="`width: ${item.width ? `${item.width}px` : '100%'}`">
|
||||
<span
|
||||
v-html="item.image.title ? highlightText(item.image.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 ? item.checks : []) : ''"></span>
|
||||
<span
|
||||
v-html="item.image.note ? highlightText(item.image.note, item.checks ? item.checks : []) : ''"
|
||||
></span>
|
||||
</font>
|
||||
</div>
|
||||
<div
|
||||
@dblclick="dblclickEdit(item.am_id, 'table', item, index)"
|
||||
id="drop-target"
|
||||
@dragover="handleDragOver"
|
||||
@dragenter="handleDragEnter"
|
||||
@dragleave="handleDragLeave"
|
||||
@drop="handleDrop"
|
||||
@click="initializeEditor(item.am_id, 'table', item)"
|
||||
@click.stop="initializeEditor($event, item.am_id, 'table', item, index)"
|
||||
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"
|
||||
@contextmenu.prevent="openMenu($event, 'table', item.am_id, item, index)"
|
||||
>
|
||||
<!-- 标题部分 -->
|
||||
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`" style="text-align: center;">
|
||||
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`" style="text-align: center">
|
||||
<span v-html="highlightText(item.table.title || '', item.checks ? item.checks : [])"></span>
|
||||
</font>
|
||||
|
||||
<!-- 表格部分 -->
|
||||
<table border="1" style="width: 100%; border-collapse: collapse; text-align: center">
|
||||
<tr v-for="(row, i) in JSON.parse(item.table.table_data)" :key="i" :class="{ 'table-header-row': isHeaderRow(i,item.table.table_data) }">
|
||||
<tr
|
||||
v-for="(row, i) in JSON.parse(item.table.table_data)"
|
||||
:key="i"
|
||||
:class="{ 'table-header-row': isHeaderRow(i, item.table.table_data) }"
|
||||
>
|
||||
<td
|
||||
v-for="(cell, i1) in row"
|
||||
:key="i1"
|
||||
@@ -106,18 +280,19 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
@contextmenu.prevent="openMenu($event, 'content', item.am_id, item, index)"
|
||||
@dblclick="dblclickEdit(item.am_id, 'text', item, index)"
|
||||
v-else
|
||||
id="drop-target"
|
||||
@dragover="handleDragOver"
|
||||
@dragenter="handleDragEnter"
|
||||
@dragleave="handleDragLeave"
|
||||
@drop="handleDrop"
|
||||
@click="initializeEditor(item.am_id)"
|
||||
@click.stop="initializeEditor($event, item.am_id, 'text', item, index)"
|
||||
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"
|
||||
@@ -125,6 +300,7 @@
|
||||
v-html="highlightText(item.content, item.checks ? item.checks : [], item.type)"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
@@ -162,21 +338,16 @@
|
||||
</el-link>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
|
||||
padding:6px 6px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid rgba(243, 213, 213);
|
||||
"
|
||||
style="padding: 6px 6px; box-sizing: border-box; border-bottom: 1px solid rgba(243, 213, 213)"
|
||||
: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;line-height: 20px;">
|
||||
<div style="display: flex; align-items: center; line-height: 20px">
|
||||
<span
|
||||
:style="commont.estate == 1 ? 'opacity:0.6;color:rgb(19, 188, 32);' : ''"
|
||||
style="color: #e61a12; font-weight: bold;font-size: 12px;"
|
||||
style="color: #e61a12; font-weight: bold; font-size: 12px"
|
||||
>{{ commentIndex + 1 }}、</span
|
||||
>
|
||||
<span
|
||||
@@ -195,7 +366,7 @@
|
||||
$t('commonTable.Resolved')
|
||||
}}</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; justify-content: center;line-height: 20px;">
|
||||
<div style="display: flex; align-items: center; justify-content: center; line-height: 20px">
|
||||
<span style="color: #b8b7b7; font-size: 12px">{{ getTime(commont.ctime) }}</span
|
||||
><span
|
||||
style="color: #aaa; font-size: 13px; margin: 0 4px"
|
||||
@@ -302,7 +473,10 @@
|
||||
"
|
||||
>
|
||||
<i class="el-icon-user-solid" style="color: #333; padding: 0 4px"></i>
|
||||
<div v-html="commont.author_remark" style="width: calc(100% - 20px); font-size: 13px;line-height: 14px;"></div>
|
||||
<div
|
||||
v-html="commont.author_remark"
|
||||
style="width: calc(100% - 20px); font-size: 13px; line-height: 14px"
|
||||
></div>
|
||||
</div>
|
||||
<i
|
||||
class="el-icon-edit"
|
||||
@@ -322,6 +496,54 @@
|
||||
<!-- </form> -->
|
||||
|
||||
<!-- <textarea class="tinymce-textarea" :id="tinymceId"></textarea> -->
|
||||
|
||||
<div v-if="isMenuVisible" class="context-menu" :style="{ top: `${menuPosition.y}px`, left: `${menuPosition.x}px` }">
|
||||
<ul>
|
||||
<!-- {{ menuType }} -->
|
||||
|
||||
<div v-if="currentData.type == 0">
|
||||
<div style="padding: 0 60px 0 20px">
|
||||
<ul class="HTitleBox" style="border: none">
|
||||
<li
|
||||
style="font-size: 16px"
|
||||
:style="currentData.is_h1 == 1 ? 'color:#4d99f1' : 'color:#333'"
|
||||
@click="currentData.is_h1 == 0 ? changeTitle(1) : changeTitle(0)"
|
||||
>
|
||||
H1
|
||||
</li>
|
||||
<li
|
||||
style="font-size: 16px"
|
||||
:style="currentData.is_h2 == 1 ? 'color:#4d99f1' : 'color:#333'"
|
||||
@click="currentData.is_h2 == 0 ? changeTitle(2) : changeTitle(0)"
|
||||
>
|
||||
H2
|
||||
</li>
|
||||
<li
|
||||
style="font-size: 16px"
|
||||
:style="currentData.is_h3 == 1 ? 'color:#4d99f1' : 'color:#333'"
|
||||
@click="currentData.is_h3 == 0 ? changeTitle(3) : changeTitle(0)"
|
||||
>
|
||||
H3
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<li @click="menuAction('edit')" style="color: rgb(43, 129, 239) !important"><i class="el-icon-edit" style=""></i>Edit</li>
|
||||
|
||||
<li v-if="isEditComment" style="color: #f56c6c" @mousedown="cacheSelection" @click="menuAction('comment')">
|
||||
<i class="el-icon-document-add"></i>Comment
|
||||
</li>
|
||||
<li @click="menuAction('up')"><i class="el-icon-arrow-up" style=""></i>Move Up</li>
|
||||
<li @click="menuAction('down')"><i class="el-icon-arrow-down" style=""></i>Move Down</li>
|
||||
<li @click="menuAction('row')"><i class="el-icon-plus" style=""></i>Add Row</li>
|
||||
<li @click="menuAction('addContent')"><i class="el-icon-document"> </i>Batch Add content</li>
|
||||
|
||||
<li @click="menuAction('delete')" style="color: red; margin-top: 2px; border-top: 1px solid #e5e6eb">
|
||||
<i class="el-icon-delete" style=""></i>Delete
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@@ -341,6 +563,12 @@ const tableStyle = `
|
||||
}blue {
|
||||
color: rgb(0, 130, 170) !important;
|
||||
}
|
||||
blue sup{
|
||||
color: rgb(0, 130, 170) !important;
|
||||
}
|
||||
blue sub{
|
||||
color: rgb(0, 130, 170) !important;
|
||||
}
|
||||
b span{
|
||||
font-weight: bold !important;
|
||||
}
|
||||
@@ -510,6 +738,17 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isMenuVisible: false,
|
||||
menuPosition: { x: 0, y: 0 },
|
||||
menuType: '', // 用来区分不同的菜单
|
||||
cachedHtml: '', // 缓存选中的 HTML
|
||||
cachedText: '', // 缓存选中的纯文本
|
||||
cachedMainId: null, // 选中的 main-id
|
||||
cachedType: null, // 选中的 type
|
||||
currentId: null,
|
||||
currentIndex: null,
|
||||
checked: false,
|
||||
currentData: {},
|
||||
imagePath: require('@/assets/img/carriageReturn.png'), // 或者你可以设置其他路径
|
||||
scrollPosition: 0,
|
||||
wordList: [],
|
||||
@@ -556,6 +795,7 @@ export default {
|
||||
}
|
||||
],
|
||||
uploadReset: false,
|
||||
uniqueIds: [],
|
||||
dialogVisible: false,
|
||||
form: {
|
||||
name: '',
|
||||
@@ -570,7 +810,7 @@ export default {
|
||||
formLabelWidth: '120px',
|
||||
hasChange: false,
|
||||
hasInit: false,
|
||||
|
||||
// selectedIds:[],
|
||||
tinymceId: this.id || 'vue-tinymce-' + +new Date()
|
||||
};
|
||||
},
|
||||
@@ -582,6 +822,7 @@ export default {
|
||||
if (val) {
|
||||
this.wordList = [...this.contentList];
|
||||
this.$nextTick(() => {
|
||||
window.renderMathJax(); // 主动触发 MathJax 渲染
|
||||
this.getCommentsData();
|
||||
});
|
||||
}
|
||||
@@ -589,12 +830,18 @@ export default {
|
||||
deep: true // 启用深度监听
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedIds() {
|
||||
return this.wordList.filter((item) => item.checked).map((item) => item.am_id);
|
||||
}
|
||||
},
|
||||
updated() {
|
||||
// 恢复子组件的滚动位置
|
||||
// this.$refs.scrollDiv.scrollTop = this.scrollPosition;
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
window.renderMathJax(); // 主动触发 MathJax 渲染
|
||||
this.getCommentsData();
|
||||
if (!this.isPreview && localStorage.getItem('scrollPosition')) {
|
||||
this.$refs.scrollDiv.scrollTop = localStorage.getItem('scrollPosition'); // 滚动到 500px 位置
|
||||
@@ -611,6 +858,7 @@ export default {
|
||||
this.$refs.scrollDiv.addEventListener('scroll', this.divOnScroll, { passive: true });
|
||||
},
|
||||
activated() {
|
||||
window.renderMathJax(); // 主动触发 MathJax 渲染
|
||||
this.isShowEditComment();
|
||||
this.typesettingType = 1;
|
||||
this.editors = {};
|
||||
@@ -623,8 +871,6 @@ export default {
|
||||
this.editors = {};
|
||||
},
|
||||
beforeDestroy() {
|
||||
|
||||
|
||||
for (const key in this.editors) {
|
||||
if (this.editors[key]) {
|
||||
// 确保销毁所有编辑器实例
|
||||
@@ -639,6 +885,184 @@ export default {
|
||||
this.editors = {};
|
||||
},
|
||||
methods: {
|
||||
openMenu(event, type, currentId) {
|
||||
console.log('event at line 860:', event);
|
||||
// 获取鼠标点击位置
|
||||
this.menuPosition.x = event.clientX + 30;
|
||||
this.menuPosition.y = event.clientY + 40;
|
||||
this.menuType = type; // 设置菜单类型，根据点击区域不同显示不同菜单
|
||||
// this.currentId=currentId;
|
||||
this.isMenuVisible = true;
|
||||
},
|
||||
closeMenu() {
|
||||
this.isMenuVisible = false;
|
||||
},
|
||||
menuAction(action) {
|
||||
console.log(`执行了：${action}`);
|
||||
switch (action) {
|
||||
case 'addContent':
|
||||
this.addContent();
|
||||
break;
|
||||
case 'comment':
|
||||
this.handleSelection();
|
||||
break;
|
||||
case 'edit':
|
||||
this.onEdit();
|
||||
break;
|
||||
case 'row':
|
||||
this.onAddRow('');
|
||||
break;
|
||||
case 'up':
|
||||
this.changeSort('up');
|
||||
break;
|
||||
case 'down':
|
||||
this.changeSort('down');
|
||||
break;
|
||||
case 'delete':
|
||||
this.onDelete();
|
||||
break;
|
||||
}
|
||||
this.closeMenu();
|
||||
},
|
||||
|
||||
changeSort(type) {
|
||||
console.log('type at line 782:', type);
|
||||
if (this.currentId) {
|
||||
this.$emit('changeSort', type, this.currentId);
|
||||
}
|
||||
},
|
||||
addContent() {
|
||||
if (this.currentId) {
|
||||
this.$emit('addContent', this.currentId);
|
||||
} else {
|
||||
this.$message.warning('Please select content');
|
||||
}
|
||||
},
|
||||
cacheSelection() {
|
||||
const selection = window.getSelection();
|
||||
if (!selection.rangeCount) {
|
||||
this.clearCache();
|
||||
return;
|
||||
}
|
||||
|
||||
const range = selection.getRangeAt(0);
|
||||
let selectedNode = range.commonAncestorContainer;
|
||||
|
||||
// **向上查找包含 main-id 的最近 div**
|
||||
let outerDiv = selectedNode;
|
||||
while (outerDiv && outerDiv.tagName !== 'DIV') {
|
||||
outerDiv = outerDiv.parentNode;
|
||||
}
|
||||
|
||||
if (!outerDiv) {
|
||||
this.clearCache();
|
||||
return;
|
||||
}
|
||||
|
||||
// **缓存 main-id 和 type**
|
||||
this.cachedMainId = outerDiv.getAttribute('main-id');
|
||||
this.cachedType = outerDiv.getAttribute('type');
|
||||
|
||||
// **创建临时 div 存放选中的 HTML**
|
||||
const tempDiv = document.createElement('div');
|
||||
tempDiv.appendChild(range.cloneContents());
|
||||
|
||||
// **检查是否包含 <img> 标签**
|
||||
if (tempDiv.querySelector('img')) {
|
||||
this.clearCache();
|
||||
this.$message.error(this.$t('commonTable.selectComment'));
|
||||
return;
|
||||
}
|
||||
|
||||
// **获取纯文本**
|
||||
let selectedText = tempDiv.innerText.trim().replace(/\s+/g, ' ');
|
||||
|
||||
// **允许保留的 HTML 标签**
|
||||
const allowedTags = ['sup', 'sub', 'strong', 'em', 'b', 'i', 'blue', 'tr', 'td'];
|
||||
|
||||
function preserveTags(node) {
|
||||
if (node.nodeType === 3) return node.nodeValue; // 文本节点
|
||||
if (node.nodeType === 1 && allowedTags.includes(node.nodeName.toLowerCase())) {
|
||||
return node.outerHTML; // 仅保留允许的标签
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
let preservedContent = Array.from(tempDiv.childNodes).map(preserveTags).join('');
|
||||
|
||||
// **检查是否已有批注**
|
||||
if (tempDiv.querySelector('.positionRemarkIndex')) {
|
||||
this.clearCache();
|
||||
this.$message.error(this.$t('commonTable.alreadyCommented'));
|
||||
return;
|
||||
}
|
||||
|
||||
// **缓存选区内容**
|
||||
this.cachedHtml = preservedContent;
|
||||
this.cachedText = selectedText;
|
||||
},
|
||||
|
||||
// **点击“添加批注”按钮**
|
||||
handleSelection() {
|
||||
if (!this.cachedText) {
|
||||
this.$message.error(this.$t('commonTable.selectComment'));
|
||||
return;
|
||||
}
|
||||
|
||||
// **发送批注**
|
||||
this.$emit('onAddComment', {
|
||||
mainId: this.cachedMainId,
|
||||
label: this.cachedHtml
|
||||
});
|
||||
|
||||
// **清空缓存**
|
||||
this.clearCache();
|
||||
},
|
||||
|
||||
// **清空缓存**
|
||||
clearCache() {
|
||||
this.cachedHtml = '';
|
||||
this.cachedText = '';
|
||||
this.cachedMainId = null;
|
||||
this.cachedType = null;
|
||||
},
|
||||
updateUniqueIds() {
|
||||
this.currentId = null;
|
||||
this.currentData = {};
|
||||
|
||||
console.log('this.selectedIds at line 917:', this.selectedIds);
|
||||
// this.uniqueIds = [...new Set(this.wordList.filter((item) => item.checked).map((item) => item.am_id))];
|
||||
// console.log('this.uniqueIds at line 839:', this.selectedIds);
|
||||
this.$forceUpdate();
|
||||
},
|
||||
onEdit() {
|
||||
this.currentData = this.currentData;
|
||||
this.$emit('onEdit', this.currentId);
|
||||
},
|
||||
onAddRow() {
|
||||
this.currentData = this.currentData;
|
||||
this.$emit('onAddRow', this.currentId);
|
||||
},
|
||||
onDelete() {
|
||||
// console.log('this.uniqueIds.length at line 866:', this.selectedIds.length);
|
||||
if (this.selectedIds && this.selectedIds.length > 0) {
|
||||
this.$emit('onDeletes', this.selectedIds.toString());
|
||||
this.$forceUpdate();
|
||||
}
|
||||
|
||||
if (this.currentId) {
|
||||
this.$emit('onDelete', this.currentId);
|
||||
}
|
||||
},
|
||||
|
||||
changeTitle(value) {
|
||||
if (this.currentData.type == 0) {
|
||||
this.$emit('onEditTitle', {
|
||||
mainId: this.currentId,
|
||||
value: value
|
||||
});
|
||||
}
|
||||
},
|
||||
// 右侧批注列点击时，触发高亮左侧对应的批注
|
||||
// 右侧批注列点击时，触发高亮左侧对应的批注
|
||||
highlightLeftComment(commentId) {
|
||||
@@ -691,11 +1115,9 @@ export default {
|
||||
},
|
||||
// 判断是否是表头行
|
||||
isHeaderRow(rowIndex, table) {
|
||||
var table = JSON.parse(table);
|
||||
|
||||
var table=JSON.parse(table)
|
||||
|
||||
var head=table[0]
|
||||
|
||||
var head = table[0];
|
||||
|
||||
return rowIndex < head[0].rowspan; // 假设前两行是表头
|
||||
},
|
||||
@@ -959,30 +1381,78 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
initializeEditor(index, type, data) {
|
||||
if (!this.isPreview) {
|
||||
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; // 清除引用
|
||||
}
|
||||
|
||||
initializeEditor(event, id, type, data, index) {
|
||||
this.clearHighlight();
|
||||
this.selectedIds = [];
|
||||
// this.menuPosition.x = event.clientX+20;
|
||||
// this.menuPosition.y = event.clientY+20;
|
||||
|
||||
const menuWidth = 180; // 你的菜单宽度（按实际调整）
|
||||
const menuHeight = 275; // 你的菜单高度（按实际调整）
|
||||
|
||||
let x = event.clientX + 20;
|
||||
let y = event.clientY + 20;
|
||||
|
||||
// 判断右侧是否越界
|
||||
if (x + menuWidth > window.innerWidth) {
|
||||
x = window.innerWidth - menuWidth - 10; // 留点空隙
|
||||
}
|
||||
|
||||
if (type == 'img') {
|
||||
this.initTinymceImg(editorId);
|
||||
} else if (type == 'table') {
|
||||
this.initTinymceTable(editorId);
|
||||
} else {
|
||||
this.initTinymceContent(editorId);
|
||||
// 判断底部是否越界
|
||||
if (y + menuHeight > window.innerHeight) {
|
||||
y = event.clientY - menuHeight - 10; // 改为往上弹
|
||||
}
|
||||
this.$set(this.editors, editorId, tinymce.get(`editor${index}`));
|
||||
|
||||
this.menuPosition.x = x;
|
||||
this.menuPosition.y = y;
|
||||
|
||||
this.menuType = type; // 设置菜单类型，根据点击区域不同显示不同菜单
|
||||
// this.currentId=currentId;
|
||||
|
||||
this.wordList.forEach((item, index) => {
|
||||
item.checked = false;
|
||||
});
|
||||
if (!this.isPreview) {
|
||||
this.currentId = id;
|
||||
this.currentIndex = index;
|
||||
this.currentData = data;
|
||||
this.isMenuVisible = true;
|
||||
// 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}`));
|
||||
}
|
||||
},
|
||||
dblclickEdit(id, type, data, index) {
|
||||
if (!this.isPreview) {
|
||||
this.currentId = id;
|
||||
this.currentIndex = index;
|
||||
this.currentData = data;
|
||||
this.onEdit();
|
||||
}
|
||||
this.clearHighlight();
|
||||
this.selectedIds = [];
|
||||
this.wordList.forEach((item, index) => {
|
||||
item.checked = false;
|
||||
});
|
||||
},
|
||||
deleteComment(data) {
|
||||
this.$emit('deleteComment', data);
|
||||
},
|
||||
@@ -1025,6 +1495,9 @@ export default {
|
||||
},
|
||||
divOnScroll() {
|
||||
if (!this.isPreview) {
|
||||
this.isMenuVisible = false;
|
||||
this.currentId = null;
|
||||
this.currentData = {};
|
||||
// const scrollTop = scrollDiv.scrollTop; // 获取垂直滚动距离
|
||||
this.scrollPosition = this.$refs.scrollDiv.scrollTop;
|
||||
localStorage.setItem('scrollPosition', this.scrollPosition);
|
||||
@@ -1071,16 +1544,11 @@ export default {
|
||||
}
|
||||
},
|
||||
highlightImgCommentId(imgId, annotations) {
|
||||
|
||||
const emptyContentIndexes = annotations
|
||||
.map((annotation, index) => (annotation.content === '' ? annotation.amc_id : -1)) // 找到内容为空的批注项的索引，其他项返回 -1
|
||||
.filter((index) => index !== -1) // 过滤掉值为 -1 的项
|
||||
.join(','); // 以逗号连接索引
|
||||
return emptyContentIndexes;
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
escapeRegExp(string) {
|
||||
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
||||
@@ -1118,7 +1586,7 @@ export default {
|
||||
style="background-color: ${randomColor};
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
// white-space: nowrap;
|
||||
overflow-wrap: anywhere;
|
||||
border-left: 2px solid #cd5454;
|
||||
border-right: 2px solid #cd5454;"
|
||||
@@ -1134,7 +1602,6 @@ export default {
|
||||
});
|
||||
});
|
||||
if (type == 0 && tempText == '') {
|
||||
|
||||
tempText =
|
||||
tempText +
|
||||
`<img contenteditable="${false}" src="${this.imagePath}" alt="" style="width: 20px;height: 20px;opacity:0.6;">`;
|
||||
@@ -1851,6 +2318,7 @@ export default {
|
||||
.pMain {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
min-height: 30px;
|
||||
}
|
||||
::v-deep .tox.tox-tinymce-inline {
|
||||
z-index: 9999 !important;
|
||||
@@ -1962,7 +2430,6 @@ export default {
|
||||
}
|
||||
|
||||
.Htitle {
|
||||
|
||||
color: #4d99f1;
|
||||
background-color: #dbebfca6;
|
||||
/* border: 1px solid #4d99f1; */
|
||||
@@ -1976,25 +2443,136 @@ export default {
|
||||
left: -30px;
|
||||
top: 0px;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.Htitle1 {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
/* font-size: 14px; */
|
||||
}
|
||||
.Htitle2{ width: 24px;
|
||||
.Htitle2 {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
/* font-size: 16px; */
|
||||
}
|
||||
.Htitle3{ width: 24px;
|
||||
.Htitle3 {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
/* font-size: 12px; */
|
||||
}
|
||||
.isTitleH2{position: relative;
|
||||
.isTitleH2 {
|
||||
position: relative;
|
||||
background-color: #dbebfc54;
|
||||
}
|
||||
.isTitleH3{position: relative;
|
||||
.isTitleH3 {
|
||||
position: relative;
|
||||
background-color: #dbebfc54;
|
||||
}
|
||||
.glowing-border {
|
||||
border: 3px solid #006699d1;
|
||||
border-radius: 5px;
|
||||
padding: 4px;
|
||||
animation: glow 1.5s infinite alternate;
|
||||
}
|
||||
@keyframes glow {
|
||||
0% {
|
||||
box-shadow: 0 0 5px #006699d1;
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 20px #006699d1;
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 5px #006699d1;
|
||||
}
|
||||
}
|
||||
.HTitleBox {
|
||||
height: 100%;
|
||||
border: 1px solid #c5c5c5;
|
||||
width: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.HTitleBox li {
|
||||
list-style: none;
|
||||
padding: 0 10px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.operateBox {
|
||||
width: auto;
|
||||
display: flex;
|
||||
}
|
||||
.operateBox li {
|
||||
min-width: 55px;
|
||||
display: flex;
|
||||
/* flex-direction: column; */
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
padding: 2px 10px;
|
||||
margin-left: 10px;
|
||||
color: #8a8a8b;
|
||||
/* font-weight: bold; */
|
||||
font-size: 16px;
|
||||
background-color: rgb(43, 129, 239) !important;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
height: 26px;
|
||||
}
|
||||
::v-deep .el-checkbox__inner {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
/* 悬浮提示的样式 */
|
||||
.selected-to-here {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: rgba(0, 123, 255, 0.7);
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
z-index: 999;
|
||||
}
|
||||
.context-menu {
|
||||
position: fixed;
|
||||
width: 180px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 4px;
|
||||
z-index: 1000;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
line-height: 28px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.context-menu ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.context-menu li {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: rgb(51, 54, 57);
|
||||
border-radius: 4px;
|
||||
padding: 2px 0;
|
||||
}
|
||||
.context-menu li i {
|
||||
margin: 5px 10px 0 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.context-menu li:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -20,14 +20,14 @@
|
||||
>
|
||||
<div
|
||||
v-if="!isPreview"
|
||||
style="
|
||||
border-bottom: 2px solid #c7cdcf;
|
||||
:style="
|
||||
`border-bottom: 2px solid #c7cdcf;
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
left: 285px;
|
||||
left: ${drawer?'0px':'285px'};
|
||||
z-index: 10;
|
||||
right: 330px;
|
||||
right: ${drawer?'50vw':'330px'};
|
||||
height: 46px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -35,45 +35,10 @@
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
width: calc(100% - 285px - 330px);
|
||||
width:${drawer?'50w':'calc(100% - 285px - 330px)'} ;`
|
||||
"
|
||||
>
|
||||
<div style="width: auto; display: flex; align-items: center">
|
||||
<!-- <el-checkbox v-model="checked" style="border-right: 1px solid #d8d8d8; padding: 0 20px 0 0;z-index: 10;" size="medium">Select All</el-checkbox> -->
|
||||
<!-- <div
|
||||
style="border-right: 1px solid #d8d8d8; padding: 0 20px"
|
||||
:style="currentData.type == 0 ? 'Opacity:1' : 'Opacity:0.6'"
|
||||
>
|
||||
<ul class="HTitleBox">
|
||||
<li
|
||||
:style="currentData.is_h1 == 1 ? 'color:#4d99f1' : 'color:#333'"
|
||||
@click="currentData.is_h1 == 0 ? changeTitle(1) : changeTitle(0)"
|
||||
>
|
||||
H1
|
||||
</li>
|
||||
<li
|
||||
:style="currentData.is_h2 == 1 ? 'color:#4d99f1' : 'color:#333'"
|
||||
@click="currentData.is_h2 == 0 ? changeTitle(2) : changeTitle(0)"
|
||||
>
|
||||
H2
|
||||
</li>
|
||||
<li
|
||||
:style="currentData.is_h3 == 1 ? 'color:#4d99f1' : 'color:#333'"
|
||||
@click="currentData.is_h3 == 0 ? changeTitle(3) : changeTitle(0)"
|
||||
>
|
||||
H3
|
||||
</li>
|
||||
</ul>
|
||||
</div> -->
|
||||
<!-- <div style="border-right: 1px solid #d8d8d8; padding: 0 20px">
|
||||
<ul class="HTitleBox" style="border: none">
|
||||
<li @click="addContent" style="font-size: 14px; padding: 0">
|
||||
<i class="el-icon-document"> </i>
|
||||
Batch Add content
|
||||
</li>
|
||||
</ul>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
|
||||
<div style="padding: 0 0px; float: right">
|
||||
<ul class="operateBox">
|
||||
@@ -216,7 +181,7 @@
|
||||
:data-id="item.ami_id"
|
||||
:type="item.type"
|
||||
:main-id="item.am_id"
|
||||
@contextmenu.prevent="openMenu($event, 'img', item.am_id, item, index)"
|
||||
|
||||
:id="'editor' + item.am_id"
|
||||
>
|
||||
<img :src="`${mediaUrl + item.image.url}`" />
|
||||
@@ -248,7 +213,7 @@
|
||||
:type="item.type"
|
||||
:id="'editor' + item.am_id"
|
||||
:main-id="item.am_id"
|
||||
@contextmenu.prevent="openMenu($event, 'table', item.am_id, item, index)"
|
||||
|
||||
>
|
||||
<!-- 标题部分 -->
|
||||
<font class="font" :style="`width: ${item.width ? `${item.width}px` : '100%'}`" style="text-align: center">
|
||||
@@ -280,7 +245,7 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
@contextmenu.prevent="openMenu($event, 'content', item.am_id, item, index)"
|
||||
|
||||
@dblclick="dblclickEdit(item.am_id, 'text', item, index)"
|
||||
v-else
|
||||
id="drop-target"
|
||||
@@ -306,7 +271,8 @@
|
||||
|
||||
<div
|
||||
v-if="!isPreview"
|
||||
style="
|
||||
v-show="drawer"
|
||||
:style="`
|
||||
width: 310px;
|
||||
position: fixed;
|
||||
top: 70px;
|
||||
@@ -314,7 +280,7 @@
|
||||
right:10px;
|
||||
bottom: 0;
|
||||
|
||||
overflow-y: auto;
|
||||
overflow-y: auto;`
|
||||
"
|
||||
class="commentList"
|
||||
>
|
||||
@@ -731,6 +697,9 @@ export default {
|
||||
isShowArtWorkButton: {
|
||||
default: false
|
||||
},
|
||||
drawer: {
|
||||
default: false
|
||||
},
|
||||
wordStyle: {
|
||||
type: String,
|
||||
default: ''
|
||||
@@ -1441,6 +1410,7 @@ export default {
|
||||
}
|
||||
},
|
||||
dblclickEdit(id, type, data, index) {
|
||||
console.log('id at line 1443:', id)
|
||||
if (!this.isPreview) {
|
||||
this.currentId = id;
|
||||
this.currentIndex = index;
|
||||
|
||||
Reference in New Issue
Block a user