+
+
+
+
+
+
+
+
![]()
+
{{
+ item.image.note ? item.image.note : ''
+ }}
+
+
{{
+ item.table.title ? item.table.title : ''
+ }}
+
+
+
+
{{
+ item.table.note ? item.table.note : ''
+ }}
+
+
+
+
-
-
-
![]()
-
{{
- item.image.note ? item.image.note : ''
- }}
-
-
{{
- item.table.title ? item.table.title : ''
- }}
-
-
-
-
{{
- item.table.note ? item.table.note : ''
- }}
-
@@ -70,41 +171,6 @@ const toolbar = 'addImageButton ';
const tableStyle = `
.tox .tox-edit-area::before{
border:none;
- }
- .isRemark {
- display:flex;
-
- align-items:center;
- position:absolute;
- top:-12px;
- left:-12px;
- z-index:2;
- cursor: pointer;
-
- }
- .isRemark img{
- width:15px;
- height:15px;
- margin-right:4px;
-
- }
- .isRemark span{
- background-color: #fef0f0;
- border-color: #fde2e2;
- padding: 0 5px;
- line-height: 19px;
- color: #f56c6c;
- font-size: 12px;display:inline-block;
-
- }
- .isRemark .Resolved{
- background-color: #f0f9eb;
- margin-left:10px;
- border-color: #67c23a;
- color:#67c23a;
- font-weight:bold;
- border-radius:2px;
-
}
img{
@@ -251,6 +317,13 @@ export default {
return [];
}
},
+ comments: {
+ type: Array,
+
+ default() {
+ return [];
+ }
+ },
menubar: {
default: 'file edit insert view format table '
},
@@ -274,6 +347,8 @@ export default {
},
data() {
return {
+ editors: {}, // 用于存储每个编辑器的实例
+ editorsInitialized: {}, // 用于存储每个编辑器实例
mediaUrl: mediaUrl, //
lastTag: null,
isEditComment: false,
@@ -340,11 +415,11 @@ export default {
}
},
mounted() {
- // this.$refs.scrollDiv.addEventListener('scroll', this.divOnScroll, { passive: true });
+ this.$refs.scrollDiv.addEventListener('scroll', this.divOnScroll, { passive: true });
this.isShowEditComment();
this.typesettingType = 1;
- this.initTinymce();
+ // this.initTinymce();
},
activated() {
this.isShowEditComment();
@@ -355,79 +430,25 @@ export default {
this.destroyTinymce();
},
methods: {
- divOnScroll() {
- console.log('111 at line 358:', 111);
- var deleteButtons = document.querySelectorAll('.tox-tinymce-inline');
- if (deleteButtons) {
- deleteButtons.forEach(function (button) {
- button.remove(); // 移除每个 wordButtonContainer 按钮
- });
- }
- },
- isShowEditComment() {
- if (localStorage.getItem('U_role')) {
- var identity = localStorage.getItem('U_role');
+ initializeEditor(index) {
+ const editorId = `editor${index}`;
- if (identity.includes('editor')) {
- this.isEditComment = true;
- } else {
- this.isEditComment = false;
+ // 检查当前编辑器是否已经初始化
+ if (this.editors[editorId]) return;
+
+ // 销毁所有已初始化的编辑器实例
+ for (const key in this.editors) {
+ if (this.editors[key]) {
+ // 确保销毁所有编辑器实例
+ tinymce.remove(this.editors[key]);
+ this.editors[key] = null; // 清除引用
}
}
- },
- // 查看评论详情
-
- handleSubmit() {
- this.$refs.uploadImage.handleSubmit();
- },
- getDetail(val) {
- if (this.hasInit == true) {
- this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val));
- }
- },
- //将字符串添加到富文本编辑器中
- addArtWork(str) {
- window.tinymce.get(this.tinymceId).insertContent(str);
- },
- onClick(e) {
- this.$emit('onClick', e, tinymce);
- },
-
- changeTable() {
- // 获取所有表格
- const tables = window.tinymce.get(this.tinymceId).getBody().querySelectorAll('table');
- console.log('tables at line 110:', tables);
-
- // 遍历并设置样式
- tables.forEach((table) => {
- console.log('table at line 360:', table);
- const editor = window.tinymce.get(this.tinymceId);
- editor.dom.setStyles(table, {
- width: this.typesettingType == 1 ? '17.18cm' : '25.88cm'
- });
- });
-
- this.$forceUpdate();
- },
- goToComment(mainId) {
- var ed = window.tinymce.get(this.tinymceId);
- const editorDoc = ed.getDoc(); // 获取 TinyMCE 内部的 document
- console.log('Looking for element with main-id:', mainId); // 调试输出
-
- // 在 iframe 内部的 document 中查找带有 main-id 的元素
- const commentElement = editorDoc.querySelector(`[main-id="${mainId}"]`);
-
- if (commentElement) {
- commentElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
- } else {
- console.log('没有找到对应的批注元素', mainId); // 调试输出
- }
- },
- initTinymce() {
var _this = this;
+ // _this.$emit('positionAnnotations');
// non-breaking
- window.tinymce.init({
- selector: '.myeditablediv',
+ tinymce.init({
+ selector: `#${editorId}`,
inline: true,
license_key: 'gpl', // 使用开源 GPL 许可证
content_css: false,
@@ -439,28 +460,28 @@ export default {
.tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(1) button.tox-tbtn:nth-child(1){
font-weight:bold !important;
background-color:#fef0f0;
- color: #f56c6c;
+ color: #f56c6c;
fill:rgb(19, 188, 32);
}
/* 成功 */
.tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(3) button.tox-tbtn:nth-child(1){
font-weight:bold !important;
background-color: rgb(19, 188, 32);
- color: #fff;
+ color: #fff;
fill:rgb(19, 188, 32);
}
/* 删除 */
.tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(2) button.tox-tbtn:nth-child(1){
font-weight:bold !important;
background-color: red;
- color: #fff;
-
+ color: #fff;
+
}
.tox-toolbar-overlord .tox-toolbar:nth-child(1) .tox-toolbar__group:nth-child(1) button.tox-tbtn:nth-child(1) svg{
font-weight:bold !important;
background-color:#fef0f0;
color: #f56c6c; /* 设置字体颜色 */
-
+
fill:#f56c6c !important;
font-size:16px!important;
}
@@ -482,13 +503,13 @@ export default {
font-weight:bold !important;
color: #007bff; /* 设置字体颜色 */
}
-
+
.tox-toolbar-overlord .tox-toolbar:nth-child(2) .tox-toolbar__group:nth-child(4) button.tox-tbtn:nth-child(2){
font-weight:bold !important;
color: #007bff; /* 设置字体颜色 */
text-decoration: line-through;
}
-
+
`,
menubar: false,
toolbar: [
@@ -498,6 +519,29 @@ export default {
end_container_on_empty_block: true,
content_css: 'default ',
setup(ed) {
+ var previousContent = ed.getContent();
+ ed.on('blur', function () {
+ var edSelection = ed.selection;
+ const selectedNode = edSelection.getNode(); // 获取选中的节点
+ if (selectedNode) {
+ // 向上查找最外层的 div
+ let outerDiv = selectedNode;
+ while (outerDiv && outerDiv.tagName !== 'DIV') {
+ outerDiv = outerDiv.parentNode;
+ }
+
+ // 如果找到的 div 节点存在
+ if (outerDiv) {
+ const dataId = outerDiv.getAttribute('main-id');
+ // console.log('previousContent at line 617:', outerDiv.innerHTML.replace(/^
/, '').replace(/<\/p>$/, ''))
+ if (previousContent == _this.contentList.find((e) => e.am_id == dataId).content) {
+ console.log('at line 618:', '内容没有发生变化');
+ } else {
+ console.log('at line 618:', '内容发生变化');
+ }
+ }
+ }
+ });
ed.ui.registry.addMenuButton('customDropdown', {
text: 'Set Title', // 下拉框标题
fetch: function (callback) {
@@ -529,11 +573,9 @@ export default {
while (outerDiv && outerDiv.tagName !== 'DIV') {
outerDiv = outerDiv.parentNode;
}
-
// 如果找到的 div 节点存在
if (outerDiv) {
const dataId = outerDiv.getAttribute('main-id');
-
_this.$emit('onEditTitle', {
mainId: dataId,
value: item.value
@@ -550,7 +592,61 @@ export default {
icon: 'checkmark',
text: 'Save',
onAction: function () {
- _this.getContent('content');
+ var deleteButtons = document.querySelectorAll('.tox-tinymce-inline');
+ // if (deleteButtons) {
+ // deleteButtons.forEach(function (button) {
+ // button.remove(); // 移除每个 wordButtonContainer 按钮
+ // });
+ // }
+ var edSelection = ed.selection;
+ const selectedNode = edSelection.getNode(); // 获取选中的节点
+ let outerDiv = selectedNode;
+ while (outerDiv && outerDiv.tagName !== 'DIV') {
+ outerDiv = outerDiv.parentNode;
+ }
+
+ // 如果找到的 div 节点存在
+ if (outerDiv) {
+ const dataId = outerDiv.getAttribute('main-id');
+ var content;
+ console.log('outerDiv at line 663:', outerDiv.innerHTML);
+ content = outerDiv.innerHTML.replace(/<(?!\/?(img|b|i|sub|sup|span|strong|em |blue)\b)[^>]+>/g, '');
+
+ // 2. 移除所有 style 属性
+ content = content.replace(/\s*style="[^"]*"/g, '');
+
+ // 3. 将 转换为 ， 转换为
+
+ var div = document.createElement('div');
+ div.innerHTML = content; // 将 HTML 字符串加载到 div 中
+
+ // 替换所有 为
+ var strongTags = div.getElementsByTagName('strong');
+ for (var i = 0; i < strongTags.length; i++) {
+ var bTag = document.createElement('b');
+ bTag.innerHTML = strongTags[i].innerHTML; // 保留内容
+ strongTags[i].parentNode.replaceChild(bTag, strongTags[i]);
+ }
+
+ // 替换所有 为
+ var emTags = div.getElementsByTagName('em');
+ for (var i = 0; i < emTags.length; i++) {
+ var iTag = document.createElement('i');
+ iTag.innerHTML = emTags[i].innerHTML; // 保留内容
+ emTags[i].parentNode.replaceChild(iTag, emTags[i]);
+ }
+
+ // 获取最终修改后的 HTML
+ content = div.innerHTML;
+ console.log('content at line 486:', content);
+ _this.$emit('saveContent', content, dataId);
+ // const dataId = outerDiv.getAttribute('main-id');
+ // let selectedText = edSelection.getContent({ format: 'text' });
+ // _this.$emit('onAddComment', {
+ // mainId: dataId,
+ // label: selectedText ? selectedText : ''
+ // });
+ }
}
});
ed.ui.registry.addButton('commentAdd', {
@@ -673,7 +769,138 @@ export default {
// }
}
});
+
+ // 初始化当前编辑器
+ // tinymce.init({
+ // selector: `#${editorId}`,
+ // inline: true, // 使用内联模式
+ // menubar: false, // 禁用菜单栏
+ // toolbar: 'undo redo | bold italic | alignleft aligncenter alignright', // 工具栏
+ // setup: (editor) => {
+ // editor.on('blur', () => {
+ // console.log('内容更新:', editor.getContent());
+ // });
+ // }
+ // });
+
+ // 保存当前编辑器实例
+ this.$set(this.editors, editorId, tinymce.get(`editor${index}`));
},
+ deleteComment(data) {
+ this.$emit('deleteComment', data);
+ },
+ editComment(data) {
+ this.$emit('editComment', data);
+ },
+ getCommentRemark(data) {
+ console.log('data at line 426:', data);
+ var info = this.comments.find((e) => e.am_id == data.am_id);
+ if (info && info.remark) {
+ return info.remark;
+ }
+ },
+ getTime(timestamp) {
+ // 创建一个新的 Date 对象
+
+ // 转换为 Date 对象（乘以 1000，因为 JavaScript 使用毫秒）
+ const date = new Date(timestamp * 1000);
+
+ // 获取年、月、日、时、分、秒
+ const year = date.getFullYear();
+ const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从 0 开始的，所以加 1
+ const day = String(date.getDate()).padStart(2, '0');
+ const hours = String(date.getHours()).padStart(2, '0');
+ const minutes = String(date.getMinutes()).padStart(2, '0');
+ const seconds = String(date.getSeconds()).padStart(2, '0');
+
+ // 格式化为 年-月-日 时:分:秒
+ const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}`;
+
+ console.log(formattedDate); // 输出: 2025-10-20 15:30:03
+
+ return formattedDate;
+ },
+ divOnScroll() {
+ // 检查每个编辑器是否在可视区域内
+ for (const key in this.editors) {
+ const editorElement = document.getElementById(key);
+ const editor = this.editors[key];
+
+ if (editorElement) {
+ const rect = editorElement.getBoundingClientRect();
+ const isVisible =
+ rect.top >= 0 && rect.left >= 0 && rect.bottom <= window.innerHeight && rect.right <= window.innerWidth;
+
+ if (!isVisible) {
+ // 如果编辑器不可见，销毁该编辑器实例
+ if (editor) {
+ tinymce.remove(editor);
+ this.$set(this.editors, key, null); // 清除该编辑器的引用
+ }
+ }
+ }
+ }
+ },
+ isShowEditComment() {
+ if (localStorage.getItem('U_role')) {
+ var identity = localStorage.getItem('U_role');
+
+ if (identity.includes('editor')) {
+ this.isEditComment = true;
+ } else {
+ this.isEditComment = false;
+ }
+ }
+ },
+ // 查看评论详情
+
+ handleSubmit() {
+ this.$refs.uploadImage.handleSubmit();
+ },
+ getDetail(val) {
+ if (this.hasInit == true) {
+ this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val));
+ }
+ },
+ //将字符串添加到富文本编辑器中
+ addArtWork(str) {
+ window.tinymce.get(this.tinymceId).insertContent(str);
+ },
+ onClick(e) {
+ this.$emit('onClick', e, tinymce);
+ },
+
+ changeTable() {
+ // 获取所有表格
+ const tables = window.tinymce.get(this.tinymceId).getBody().querySelectorAll('table');
+ console.log('tables at line 110:', tables);
+
+ // 遍历并设置样式
+ tables.forEach((table) => {
+ console.log('table at line 360:', table);
+ const editor = window.tinymce.get(this.tinymceId);
+ editor.dom.setStyles(table, {
+ width: this.typesettingType == 1 ? '17.18cm' : '25.88cm'
+ });
+ });
+
+ this.$forceUpdate();
+ },
+ goToComment(mainId) {
+ var ed = window.tinymce.get(this.tinymceId);
+ const editorDoc = ed.getDoc(); // 获取 TinyMCE 内部的 document
+ console.log('Looking for element with main-id:', mainId); // 调试输出
+
+ // 在 iframe 内部的 document 中查找带有 main-id 的元素
+ const commentElement = editorDoc.querySelector(`[main-id="${mainId}"]`);
+
+ if (commentElement) {
+ commentElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+ } else {
+ console.log('没有找到对应的批注元素', mainId); // 调试输出
+ }
+ },
+ initTinymce() {},
// initTinymce() {
// var deleteButtons = document.querySelectorAll('.wordButtonContainer');
// if (deleteButtons) {
@@ -1384,11 +1611,100 @@ export default {
.word-container table span blue {
color: rgb(0, 130, 170) !important;
}
+.word-container {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ overflow: auto;
+ /* background: #f2f3f5 !important; */
+ padding: 20px 20px;
+ box-sizing: border-box;
+}
.pMain {
- margin-top: 20px;
- margin-bottom: 20px;
+ margin-top: 5px;
+ margin-bottom: 5px;
}
-::v-deep .tox.tox-tinymce-inline{
-z-index: 9999 !important;
+::v-deep .tox.tox-tinymce-inline {
+ z-index: 9999 !important;
}
+.remarkbg {
+ background-color: #f3d5d5c2;
+ border-right: 2px solid #cd5454;
+}
+.isRemark {
+ display: flex;
+
+ align-items: center;
+ /* position:absolute; */
+ top: -12px;
+ left: -12px;
+ z-index: 2;
+ cursor: pointer;
+}
+.isRemark img {
+ width: 15px;
+ height: 15px;
+ margin-right: 4px;
+}
+.isRemark span {
+ background-color: #fef0f0;
+ border-color: #fde2e2;
+ padding: 0 5px;
+ line-height: 19px;
+ color: #f56c6c;
+ font-size: 12px;
+ display: inline-block;
+}
+.commentList li {
+ list-style: none;
+}
+.comment-item {
+ z-index: 10;
+ list-style: none;
+ width: 320px;
+ position: absolute;
+ right: -340px;
+}
+.comment-item::before {
+ content: '';
+ position: absolute;
+ top: 24px; /* 调整线段开始的超出位置 */
+ left: -32px; /* 调整线段开始的超出位置 */
+ width: 34px; /* 设置斜线的长度 */
+ height: 0; /* 设置高度为 0，使用 border 来创建线条 */
+ border-top: 2px dashed #cd5454; /* 设置斜线为虚线，设置颜色和宽度 */
+
+ background-color: #cd5454; /* 设置斜线的颜色 */
+ transform: rotate(-15deg); /* 设置斜线的角度 */
+}
+.commentOperateItem {
+ display: flex;
+ align-items: center;
+ font-size: 14px;
+ font-weight: bold;
+}
+.commentOperateItem img {
+ width: 20px;
+ height: 20px;
+ margin-right: 10px;
+}
+
+.Resolved {
+ background-color: #dedede;
+ margin-left: 10px;
+ border-color: #dedede;
+ color: #8888a6;
+ font-weight: bold;
+ padding: 2px 4px;
+ border-radius: 2px;
+ font-size: 14px
+}
+/* .Resolved {
+ background-color: #f0f9eb;
+ margin-left: 10px;
+ border-color: #67c23a;
+ color: #67c23a;
+ font-weight: bold;
+ border-radius: 2px;
+} */
diff --git a/src/components/page/components/table/wordHtmlTypesetting.vue b/src/components/page/components/table/wordHtmlTypesetting.vue
index 7a72a5d..8c5bff4 100644
--- a/src/components/page/components/table/wordHtmlTypesetting.vue
+++ b/src/components/page/components/table/wordHtmlTypesetting.vue
@@ -54,7 +54,7 @@
-->
+ item.width ? `${item.width}px` : '100%'
+ }" />
${
- item.image.note ? item.image.note : ''
- }
+ item.image.note ? item.image.note : ''
+ }
+ 
+ 
+ {{ item.am_id
+ }}
+ 
+ 
+ 
+ 
+ 
+ 
+ 
- 
- 
- 
- 
- 
- 
- 
-