提交
This commit is contained in:
@@ -34,7 +34,7 @@
|
||||
"vue": "^2.6.10",
|
||||
"vue-cropperjs": "^3.0.0",
|
||||
"vue-i18n": "^8.10.0",
|
||||
"vue-paypal-checkout": "^3.2.0",
|
||||
"vue-paypal-checkout": "latest",
|
||||
"vue-pdf": "^4.3.0",
|
||||
"vue-quill-editor": "^3.0.6",
|
||||
"vue-router": "^3.0.3",
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div>
|
||||
<PayPal
|
||||
currency="USD"
|
||||
:client="paypal"
|
||||
:amount="amount"
|
||||
:env="env"
|
||||
@payment-authorized="onPaymentSuccess"
|
||||
@payment-completed="onPaymentError"
|
||||
>
|
||||
</PayPal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PayPal from 'vue-paypal-checkout';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
paypal: {
|
||||
sandbox: 'Ab8SeEuhkLGp6Fts9V3Cti0UcXQhITRWZkiHDM3U1fDY9YrrRc5IOcYHPfV6qROhmh0hvgysqrfOCSUr',
|
||||
production: 'Ad-9iuPrN9U8zQxfcog7QweDSJsDY6ns2I5WaPjuuN_4ToE5LEGASm09j9x7VC0fbQkTmnpFtrZYpHEE'
|
||||
},
|
||||
// myItems: [
|
||||
// {
|
||||
// name: 'hat',
|
||||
// quantity: '1',
|
||||
// price: '5',
|
||||
// currency: 'USD'
|
||||
// },
|
||||
// {
|
||||
// name: 'handbag',
|
||||
// // description: "Black handbag.",
|
||||
// quantity: '1',
|
||||
// price: '5',
|
||||
// currency: 'USD'
|
||||
// }
|
||||
// ],
|
||||
amount: '9.99', // Amount to be paid
|
||||
env: 'sandbox'
|
||||
};
|
||||
},
|
||||
components: {
|
||||
PayPal
|
||||
},
|
||||
methods: {
|
||||
onPaymentSuccess(payment) {
|
||||
try {
|
||||
console.log('Payment successful!', payment);
|
||||
this.$emit('payment-success', payment);
|
||||
} catch (error) {
|
||||
console.error('Error in onPaymentSuccess callback:', error);
|
||||
}
|
||||
},
|
||||
|
||||
onPaymentError(error) {
|
||||
try {
|
||||
console.error('Payment error:', error);
|
||||
this.$emit('payment-error', error);
|
||||
} catch (err) {
|
||||
console.error('Error in onPaymentError callback:', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -1,24 +1,35 @@
|
||||
<template>
|
||||
<div>
|
||||
<PayPal
|
||||
|
||||
currency="USD"
|
||||
:client="paypal"
|
||||
:amount="amount"
|
||||
:env="env"
|
||||
|
||||
:on-success="onPaymentSuccess"
|
||||
:on-error="onPaymentError"
|
||||
:commit="true"
|
||||
@payment-authorized="onPaymentSuccess"
|
||||
@payment-completed="onPaymentCompleted"
|
||||
@payment-cancelled="onPaymentCancel"
|
||||
locale="en_US"
|
||||
:button-style="myStyle"
|
||||
:token="paymentToken"
|
||||
:paypal-button="paypalButton"
|
||||
>
|
||||
</PayPal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- paymentID= "PAY-3L661344P7749433KLD2R5ZQ" -->
|
||||
<script>
|
||||
import PayPal from 'vue-paypal-checkout';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
myStyle: {
|
||||
label: 'checkout',
|
||||
size: 'responsive',
|
||||
shape: 'pill',
|
||||
color: 'blue'
|
||||
},
|
||||
paymentToken: '2S842212TP193105C', // 存储自定义的 token
|
||||
paypal: {
|
||||
sandbox: 'Ab8SeEuhkLGp6Fts9V3Cti0UcXQhITRWZkiHDM3U1fDY9YrrRc5IOcYHPfV6qROhmh0hvgysqrfOCSUr',
|
||||
production: 'Ad-9iuPrN9U8zQxfcog7QweDSJsDY6ns2I5WaPjuuN_4ToE5LEGASm09j9x7VC0fbQkTmnpFtrZYpHEE'
|
||||
@@ -26,7 +37,6 @@ export default {
|
||||
// myItems: [
|
||||
// {
|
||||
// name: 'hat',
|
||||
|
||||
// quantity: '1',
|
||||
// price: '5',
|
||||
// currency: 'USD'
|
||||
@@ -46,17 +56,68 @@ export default {
|
||||
components: {
|
||||
PayPal
|
||||
},
|
||||
created() {
|
||||
// this.fetchCustomToken();
|
||||
},
|
||||
methods: {
|
||||
onPaymentSuccess(payment) {
|
||||
alert(payment)
|
||||
console.log('Payment successful!', payment);
|
||||
// Handle successful payment here
|
||||
this.$emit('payment-success', payment);
|
||||
// 配置 PayPal 按钮（传递自定义的 token）
|
||||
paypalButton(data, actions) {
|
||||
return actions.payment.create({
|
||||
transactions: [
|
||||
{
|
||||
amount: {
|
||||
total: '20.00',
|
||||
currency: 'USD'
|
||||
},
|
||||
custom: this.paymentToken // 将自定义 token 作为 custom 数据传递
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
onPaymentError(error) {
|
||||
console.error('Payment error:', error);
|
||||
// Handle payment error here
|
||||
this.$emit('payment-error', error);
|
||||
async fetchCustomToken() {
|
||||
try {
|
||||
this.customToken = '2S842212TP193105C'; // 假设返回的 JSON 里有 token 字段
|
||||
} catch (error) {}
|
||||
},
|
||||
|
||||
onPaymentSuccess(payment) {
|
||||
try {
|
||||
console.log('Payment successful Button!', payment);
|
||||
// this.$emit('payment-success', payment);
|
||||
|
||||
// const token = this.paymentToken;
|
||||
|
||||
// // 使用token进行支付处理
|
||||
// paypal.payment.execute(token, (error, payment) => {
|
||||
// console.log('payment at line 73:', payment)
|
||||
// if (error) {
|
||||
// // 处理错误
|
||||
// console.error('Error in onPaymentSuccess callback:', error);
|
||||
// } else {
|
||||
// // 处理支付成功的情况
|
||||
// console.log('Payment successful Button!', payment);
|
||||
// }
|
||||
// });
|
||||
} catch (error) {
|
||||
console.error('Error in onPaymentSuccess callback:', error);
|
||||
}
|
||||
},
|
||||
|
||||
onPaymentCompleted(error) {
|
||||
try {
|
||||
console.error('Payment paymentCompleted Button:', error);
|
||||
this.$emit('payment-error', error);
|
||||
} catch (err) {
|
||||
console.error('Error in paymentCompleted callback:', err);
|
||||
}
|
||||
},
|
||||
onPaymentCancel(error) {
|
||||
try {
|
||||
console.error('Payment cancel Button:', error);
|
||||
this.$emit('payment-error', error);
|
||||
} catch (err) {
|
||||
console.error('Error in onPaymentCancel callback:', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -249,7 +249,7 @@ export default {
|
||||
isShowEditComment() {
|
||||
if (localStorage.getItem('U_role')) {
|
||||
var identity = localStorage.getItem('U_role');
|
||||
|
||||
|
||||
if (identity.includes('editor')) {
|
||||
this.isEditComment = true;
|
||||
} else {
|
||||
@@ -386,256 +386,254 @@ export default {
|
||||
content_css: 'default',
|
||||
|
||||
setup(ed) {
|
||||
if(!_this.readonly){
|
||||
ed.on('click', function (e) {
|
||||
// 判断点击的是否是目标元素
|
||||
const target = e.target;
|
||||
console.log('target at line 351:', target);
|
||||
|
||||
if (target.classList.contains('isRemarkIcon')) {
|
||||
_this.$emit('onComment', target.getAttribute('main-id'));
|
||||
}
|
||||
});
|
||||
// // 添加批注按钮
|
||||
ed.ui.registry.addButton('addImageButton', {
|
||||
text: 'Add Figure',
|
||||
icon: 'comment',
|
||||
onAction: function () {
|
||||
_this.$emit('add', img);
|
||||
// const selection = ed.selection;
|
||||
// const selectedNode = selection.getNode(); // 获取选中的节点
|
||||
// console.log('selectedNode at line 333:', selectedNode);
|
||||
// if (selectedNode) {
|
||||
// const comment = prompt('Enter your comment:');
|
||||
// if (comment) {
|
||||
// const dataId = selectedNode.getAttribute('main-id');
|
||||
// _this.comments.push({ text: comment, time: new Date().getTime(), mId: dataId });
|
||||
// }
|
||||
// } else {
|
||||
// alert('Please select some text to comment on.');
|
||||
// }
|
||||
}
|
||||
});
|
||||
ed.on('dragstart', (e) => {
|
||||
// 阻止拖动事件
|
||||
e.preventDefault();
|
||||
});
|
||||
// 监听焦点变化并高亮当前选中的元素
|
||||
ed.on('focus', function () {
|
||||
if (!isDeleting) {
|
||||
// 处理正常的焦点逻辑
|
||||
ed.getBody().style.outline = 'none'; // 当编辑器获取焦点时，移除焦点框
|
||||
if (!_this.readonly) {
|
||||
ed.on('click', function (e) {
|
||||
// 判断点击的是否是目标元素
|
||||
const target = e.target;
|
||||
console.log('target at line 351:', target);
|
||||
|
||||
if (target.classList.contains('isRemarkIcon')) {
|
||||
_this.$emit('onComment', target.getAttribute('main-id'));
|
||||
}
|
||||
});
|
||||
// // 添加批注按钮
|
||||
ed.ui.registry.addButton('addImageButton', {
|
||||
text: 'Add Figure',
|
||||
icon: 'comment',
|
||||
onAction: function () {
|
||||
_this.$emit('add', img);
|
||||
// const selection = ed.selection;
|
||||
// const selectedNode = selection.getNode(); // 获取选中的节点
|
||||
// console.log('selectedNode at line 333:', selectedNode);
|
||||
// if (selectedNode) {
|
||||
// const comment = prompt('Enter your comment:');
|
||||
// if (comment) {
|
||||
// const dataId = selectedNode.getAttribute('main-id');
|
||||
// _this.comments.push({ text: comment, time: new Date().getTime(), mId: dataId });
|
||||
// }
|
||||
// } else {
|
||||
// alert('Please select some text to comment on.');
|
||||
// }
|
||||
}
|
||||
});
|
||||
ed.on('dragstart', (e) => {
|
||||
// 阻止拖动事件
|
||||
e.preventDefault();
|
||||
});
|
||||
// 监听焦点变化并高亮当前选中的元素
|
||||
ed.on('focus', function () {
|
||||
if (!isDeleting) {
|
||||
// 处理正常的焦点逻辑
|
||||
ed.getBody().style.outline = 'none'; // 当编辑器获取焦点时，移除焦点框
|
||||
_this.updateCurrentTag(ed);
|
||||
}
|
||||
});
|
||||
// 监听焦点变化并高亮当前选中的元素
|
||||
ed.on('selectionChange', function () {
|
||||
_this.updateCurrentTag(ed);
|
||||
}
|
||||
});
|
||||
// 监听焦点变化并高亮当前选中的元素
|
||||
ed.on('selectionChange', function () {
|
||||
_this.updateCurrentTag(ed);
|
||||
});
|
||||
});
|
||||
|
||||
ed.on('mouseup', function () {
|
||||
_this.updateCurrentTag(ed);
|
||||
});
|
||||
ed.on('blur', function () {
|
||||
console.log('_this.lastPTag at line 367:', _this.lastTag);
|
||||
if (_this.lastTag) {
|
||||
_this.lastTag.style.backgroundColor = ''; // 清除之前的高亮
|
||||
_this.lastTag.style.border = '';
|
||||
_this.lastTag = null;
|
||||
}
|
||||
if (wordButtonContainer) {
|
||||
wordButtonContainer.remove();
|
||||
wordButtonContainer = null;
|
||||
}
|
||||
});
|
||||
ed.on('drop', (event, index) => {
|
||||
console.log('event at line 375:', event);
|
||||
|
||||
const selection = ed.selection;
|
||||
const selectedNode = selection.getNode(); // 获取选中的节点
|
||||
console.log('1899', selectedNode); // 查看光标位置的节点类型
|
||||
|
||||
// 向上遍历直到找到带有 main-id 属性的节点
|
||||
const findParentWithMainId = (node) => {
|
||||
while (node) {
|
||||
if (node.hasAttribute && node.classList.contains('pMain')) {
|
||||
return node; // 找到并返回该节点
|
||||
}
|
||||
node = node.parentNode; // 向上遍历父节点
|
||||
}
|
||||
return null; // 如果没有找到，返回 null
|
||||
};
|
||||
|
||||
// 查找选中节点的父节点，直到找到带有 main-id 属性的节点
|
||||
const nodeWithMainId = findParentWithMainId(selectedNode);
|
||||
console.log('at line 395:', nodeWithMainId);
|
||||
const dataId = nodeWithMainId.getAttribute('main-id');
|
||||
event.preventDefault();
|
||||
hideDeleteButton();
|
||||
// 获取拖动的数据
|
||||
_this.$emit('onDrop', event, dataId); // 阻止默认的行为
|
||||
// 在编辑器中插入数据
|
||||
// const content = <div class="dropped-item">${itemData}</div>;
|
||||
// ed.insertContent(content); // 插入文本或HTML
|
||||
});
|
||||
// 方法：更新当前选中的 p 标签的样式
|
||||
_this.updateCurrentTag = function (ed) {
|
||||
var selection = ed.selection;
|
||||
var node = selection.getNode();
|
||||
|
||||
// 向上查找包含的节点直到找到合适的标签
|
||||
if (node && !node.classList.contains('pMain')) {
|
||||
node = node.closest('.pMain'); // 向上找到最近的包含 'aa' 类的标签
|
||||
}
|
||||
|
||||
if (node && node.classList.contains('pMain')) {
|
||||
// 清除上一个高亮的节点样式
|
||||
if (_this.lastTag && _this.lastTag !== node) {
|
||||
_this.lastTag.style.backgroundColor = ''; // 清除上一个高亮的标签样式
|
||||
ed.on('mouseup', function () {
|
||||
_this.updateCurrentTag(ed);
|
||||
});
|
||||
ed.on('blur', function () {
|
||||
console.log('_this.lastPTag at line 367:', _this.lastTag);
|
||||
if (_this.lastTag) {
|
||||
_this.lastTag.style.backgroundColor = ''; // 清除之前的高亮
|
||||
_this.lastTag.style.border = '';
|
||||
_this.lastTag = null;
|
||||
}
|
||||
if (wordButtonContainer) {
|
||||
wordButtonContainer.remove();
|
||||
wordButtonContainer = null;
|
||||
}
|
||||
});
|
||||
ed.on('drop', (event, index) => {
|
||||
console.log('event at line 375:', event);
|
||||
|
||||
// 设置当前节点的背景色和边框
|
||||
node.style.backgroundColor = 'rgb(0 102 153 / 10%)';
|
||||
node.style.border = '2px dashed rgb(0 102 153 / 50%)';
|
||||
const selection = ed.selection;
|
||||
const selectedNode = selection.getNode(); // 获取选中的节点
|
||||
console.log('1899', selectedNode); // 查看光标位置的节点类型
|
||||
|
||||
// 更新选中的节点
|
||||
var currentNode = node;
|
||||
// 向上遍历直到找到带有 main-id 属性的节点
|
||||
const findParentWithMainId = (node) => {
|
||||
while (node) {
|
||||
if (node.hasAttribute && node.classList.contains('pMain')) {
|
||||
return node; // 找到并返回该节点
|
||||
}
|
||||
node = node.parentNode; // 向上遍历父节点
|
||||
}
|
||||
return null; // 如果没有找到，返回 null
|
||||
};
|
||||
|
||||
// 显示删除按钮
|
||||
showDeleteButton(currentNode);
|
||||
|
||||
// 更新 lastTag
|
||||
_this.lastTag = node;
|
||||
} else {
|
||||
// 如果没有找到包含 'aa' 类的节点，隐藏删除按钮
|
||||
// 查找选中节点的父节点，直到找到带有 main-id 属性的节点
|
||||
const nodeWithMainId = findParentWithMainId(selectedNode);
|
||||
console.log('at line 395:', nodeWithMainId);
|
||||
const dataId = nodeWithMainId.getAttribute('main-id');
|
||||
event.preventDefault();
|
||||
hideDeleteButton();
|
||||
}
|
||||
};
|
||||
function hideDeleteButton() {
|
||||
if (wordButtonContainer) {
|
||||
wordButtonContainer.remove(); // 移除删除按钮
|
||||
wordButtonContainer = null; // 清空按钮引用
|
||||
}
|
||||
}
|
||||
function showDeleteButton(paragraph) {
|
||||
if (wordButtonContainer) {
|
||||
wordButtonContainer.remove(); // 如果已有按钮容器，移除
|
||||
}
|
||||
|
||||
// 获取 <p> 标签的位置信息
|
||||
const paragraphRect = paragraph.getBoundingClientRect();
|
||||
const iframe = ed.getDoc().defaultView.frameElement;
|
||||
const iframeRect = iframe.getBoundingClientRect();
|
||||
var left = 0;
|
||||
if (_this.isEditComment) {
|
||||
left = 100;
|
||||
} else {
|
||||
left = 80;
|
||||
}
|
||||
// 创建按钮容器 div
|
||||
wordButtonContainer = document.createElement('div');
|
||||
wordButtonContainer.style.position = 'absolute';
|
||||
wordButtonContainer.style.top = `${iframeRect.top + paragraphRect.top + window.scrollY - 20}px`; // 确保按钮容器位于 <p> 标签旁边
|
||||
wordButtonContainer.style.left = `${iframeRect.left + paragraphRect.left + paragraphRect.width - left}px`;
|
||||
wordButtonContainer.style.zIndex = '9999'; // 设置更高的值
|
||||
wordButtonContainer.style.display = 'flex'; // 使用 flex 布局将按钮水平排列
|
||||
wordButtonContainer.style.alignItems = 'center'; // 垂直居中
|
||||
|
||||
// 创建删除按钮
|
||||
const deleteButton = document.createElement('button');
|
||||
deleteButton.style.backgroundColor = 'red';
|
||||
deleteButton.style.color = 'white';
|
||||
deleteButton.style.border = 'none';
|
||||
deleteButton.style.borderRadius = '50%';
|
||||
deleteButton.style.padding = '5px';
|
||||
deleteButton.style.cursor = 'pointer';
|
||||
deleteButton.style.marginLeft = '10px'; // 给批注按钮添加间距
|
||||
const deleteIcon = document.createElement('i');
|
||||
deleteIcon.classList.add('el-icon-delete'); // 使用 Element UI 删除图标
|
||||
deleteIcon.style.fontSize = '20px';
|
||||
deleteIcon.style.color = '#fff'; // 设置图标颜色
|
||||
deleteButton.appendChild(deleteIcon);
|
||||
deleteButton.addEventListener('mousedown', function (e) {
|
||||
e.stopImmediatePropagation();
|
||||
e.preventDefault();
|
||||
_this.$emit('onDelete', paragraph.getAttribute('main-id'));
|
||||
// 获取拖动的数据
|
||||
_this.$emit('onDrop', event, dataId); // 阻止默认的行为
|
||||
// 在编辑器中插入数据
|
||||
// const content = <div class="dropped-item">${itemData}</div>;
|
||||
// ed.insertContent(content); // 插入文本或HTML
|
||||
});
|
||||
// 方法：更新当前选中的 p 标签的样式
|
||||
_this.updateCurrentTag = function (ed) {
|
||||
var selection = ed.selection;
|
||||
var node = selection.getNode();
|
||||
|
||||
// 创建批注按钮
|
||||
const editButton = document.createElement('button');
|
||||
editButton.style.backgroundColor = 'rgb(19, 188, 32)';
|
||||
editButton.style.color = 'white';
|
||||
editButton.style.border = 'none';
|
||||
editButton.style.borderRadius = '50%';
|
||||
editButton.style.padding = '5px';
|
||||
editButton.style.marginLeft = '10px'; // 给批注按钮添加间距
|
||||
editButton.style.cursor = 'pointer';
|
||||
|
||||
const editIcon = document.createElement('i');
|
||||
editIcon.classList.add('el-icon-edit'); // 使用 Element UI 批注图标
|
||||
editIcon.style.fontSize = '20px';
|
||||
editIcon.style.color = '#fff'; // 设置图标颜色
|
||||
|
||||
editButton.appendChild(editIcon);
|
||||
editButton.addEventListener('mousedown', function (e) {
|
||||
e.stopImmediatePropagation();
|
||||
e.preventDefault();
|
||||
// 触发批注事件
|
||||
_this.$emit('onEdit', paragraph.getAttribute('main-id'));
|
||||
});
|
||||
|
||||
// 将按钮添加到容器中
|
||||
wordButtonContainer.appendChild(editButton);
|
||||
wordButtonContainer.appendChild(deleteButton);
|
||||
|
||||
if (_this.isEditComment) {
|
||||
// 创建批注按钮
|
||||
const commentButton = document.createElement('button');
|
||||
commentButton.style.backgroundColor = '#2b81ef';
|
||||
commentButton.style.color = 'white';
|
||||
commentButton.style.border = 'none';
|
||||
commentButton.style.borderRadius = '50%';
|
||||
commentButton.style.padding = '5px';
|
||||
commentButton.style.marginLeft = '10px'; // 给批注按钮添加间距
|
||||
commentButton.style.cursor = 'pointer';
|
||||
|
||||
const commentIcon = document.createElement('i');
|
||||
commentIcon.classList.add('el-icon-chat-dot-square'); // 使用 Element UI 批注图标
|
||||
commentIcon.style.fontSize = '20px';
|
||||
commentIcon.style.color = '#fff'; // 设置图标颜色
|
||||
|
||||
commentButton.appendChild(commentIcon);
|
||||
commentButton.addEventListener('mousedown', function (e) {
|
||||
e.stopImmediatePropagation();
|
||||
e.preventDefault();
|
||||
// 触发批注事件
|
||||
_this.$emit('onAddComment', paragraph.getAttribute('main-id'));
|
||||
if (wordButtonContainer) {
|
||||
wordButtonContainer.remove(); // 移除删除按钮
|
||||
wordButtonContainer = null; // 清空按钮引用
|
||||
// 向上查找包含的节点直到找到合适的标签
|
||||
if (node && !node.classList.contains('pMain')) {
|
||||
node = node.closest('.pMain'); // 向上找到最近的包含 'aa' 类的标签
|
||||
}
|
||||
});
|
||||
|
||||
wordButtonContainer.appendChild(commentButton);
|
||||
}
|
||||
if (node && node.classList.contains('pMain')) {
|
||||
// 清除上一个高亮的节点样式
|
||||
if (_this.lastTag && _this.lastTag !== node) {
|
||||
_this.lastTag.style.backgroundColor = ''; // 清除上一个高亮的标签样式
|
||||
_this.lastTag.style.border = '';
|
||||
}
|
||||
|
||||
wordButtonContainer.classList.add('wordButtonContainer'); // 给按钮
|
||||
// 将容器添加到页面中
|
||||
document.body.appendChild(wordButtonContainer);
|
||||
}
|
||||
ed.on('mousedown', function (e) {
|
||||
// 检查点击的位置是否是删除按钮或选中的 <p> 标签
|
||||
if (!currentParagraph || (e.target !== wordButtonContainer && !currentParagraph.contains(e.target))) {
|
||||
// 设置当前节点的背景色和边框
|
||||
node.style.backgroundColor = 'rgb(0 102 153 / 10%)';
|
||||
node.style.border = '2px dashed rgb(0 102 153 / 50%)';
|
||||
|
||||
// 更新选中的节点
|
||||
var currentNode = node;
|
||||
|
||||
// 显示删除按钮
|
||||
showDeleteButton(currentNode);
|
||||
|
||||
// 更新 lastTag
|
||||
_this.lastTag = node;
|
||||
} else {
|
||||
// 如果没有找到包含 'aa' 类的节点，隐藏删除按钮
|
||||
hideDeleteButton();
|
||||
}
|
||||
};
|
||||
function hideDeleteButton() {
|
||||
if (wordButtonContainer) {
|
||||
wordButtonContainer.remove(); // 移除删除按钮
|
||||
wordButtonContainer = null; // 清空按钮引用
|
||||
}
|
||||
}
|
||||
});
|
||||
function showDeleteButton(paragraph) {
|
||||
if (wordButtonContainer) {
|
||||
wordButtonContainer.remove(); // 如果已有按钮容器，移除
|
||||
}
|
||||
|
||||
// 获取 <p> 标签的位置信息
|
||||
const paragraphRect = paragraph.getBoundingClientRect();
|
||||
const iframe = ed.getDoc().defaultView.frameElement;
|
||||
const iframeRect = iframe.getBoundingClientRect();
|
||||
var left = 0;
|
||||
if (_this.isEditComment) {
|
||||
left = 100;
|
||||
} else {
|
||||
left = 80;
|
||||
}
|
||||
// 创建按钮容器 div
|
||||
wordButtonContainer = document.createElement('div');
|
||||
wordButtonContainer.style.position = 'absolute';
|
||||
wordButtonContainer.style.top = `${iframeRect.top + paragraphRect.top + window.scrollY - 20}px`; // 确保按钮容器位于 <p> 标签旁边
|
||||
wordButtonContainer.style.left = `${iframeRect.left + paragraphRect.left + paragraphRect.width - left}px`;
|
||||
wordButtonContainer.style.zIndex = '9999'; // 设置更高的值
|
||||
wordButtonContainer.style.display = 'flex'; // 使用 flex 布局将按钮水平排列
|
||||
wordButtonContainer.style.alignItems = 'center'; // 垂直居中
|
||||
|
||||
// 创建删除按钮
|
||||
const deleteButton = document.createElement('button');
|
||||
deleteButton.style.backgroundColor = 'red';
|
||||
deleteButton.style.color = 'white';
|
||||
deleteButton.style.border = 'none';
|
||||
deleteButton.style.borderRadius = '50%';
|
||||
deleteButton.style.padding = '5px';
|
||||
deleteButton.style.cursor = 'pointer';
|
||||
deleteButton.style.marginLeft = '10px'; // 给批注按钮添加间距
|
||||
const deleteIcon = document.createElement('i');
|
||||
deleteIcon.classList.add('el-icon-delete'); // 使用 Element UI 删除图标
|
||||
deleteIcon.style.fontSize = '20px';
|
||||
deleteIcon.style.color = '#fff'; // 设置图标颜色
|
||||
deleteButton.appendChild(deleteIcon);
|
||||
deleteButton.addEventListener('mousedown', function (e) {
|
||||
e.stopImmediatePropagation();
|
||||
e.preventDefault();
|
||||
_this.$emit('onDelete', paragraph.getAttribute('main-id'));
|
||||
});
|
||||
|
||||
// 创建批注按钮
|
||||
const editButton = document.createElement('button');
|
||||
editButton.style.backgroundColor = 'rgb(19, 188, 32)';
|
||||
editButton.style.color = 'white';
|
||||
editButton.style.border = 'none';
|
||||
editButton.style.borderRadius = '50%';
|
||||
editButton.style.padding = '5px';
|
||||
editButton.style.marginLeft = '10px'; // 给批注按钮添加间距
|
||||
editButton.style.cursor = 'pointer';
|
||||
|
||||
const editIcon = document.createElement('i');
|
||||
editIcon.classList.add('el-icon-edit'); // 使用 Element UI 批注图标
|
||||
editIcon.style.fontSize = '20px';
|
||||
editIcon.style.color = '#fff'; // 设置图标颜色
|
||||
|
||||
editButton.appendChild(editIcon);
|
||||
editButton.addEventListener('mousedown', function (e) {
|
||||
e.stopImmediatePropagation();
|
||||
e.preventDefault();
|
||||
// 触发批注事件
|
||||
_this.$emit('onEdit', paragraph.getAttribute('main-id'));
|
||||
});
|
||||
|
||||
// 将按钮添加到容器中
|
||||
wordButtonContainer.appendChild(editButton);
|
||||
wordButtonContainer.appendChild(deleteButton);
|
||||
|
||||
if (_this.isEditComment) {
|
||||
// 创建批注按钮
|
||||
const commentButton = document.createElement('button');
|
||||
commentButton.style.backgroundColor = '#2b81ef';
|
||||
commentButton.style.color = 'white';
|
||||
commentButton.style.border = 'none';
|
||||
commentButton.style.borderRadius = '50%';
|
||||
commentButton.style.padding = '5px';
|
||||
commentButton.style.marginLeft = '10px'; // 给批注按钮添加间距
|
||||
commentButton.style.cursor = 'pointer';
|
||||
|
||||
const commentIcon = document.createElement('i');
|
||||
commentIcon.classList.add('el-icon-chat-dot-square'); // 使用 Element UI 批注图标
|
||||
commentIcon.style.fontSize = '20px';
|
||||
commentIcon.style.color = '#fff'; // 设置图标颜色
|
||||
|
||||
commentButton.appendChild(commentIcon);
|
||||
commentButton.addEventListener('mousedown', function (e) {
|
||||
e.stopImmediatePropagation();
|
||||
e.preventDefault();
|
||||
// 触发批注事件
|
||||
_this.$emit('onAddComment', paragraph.getAttribute('main-id'));
|
||||
if (wordButtonContainer) {
|
||||
wordButtonContainer.remove(); // 移除删除按钮
|
||||
wordButtonContainer = null; // 清空按钮引用
|
||||
}
|
||||
});
|
||||
|
||||
wordButtonContainer.appendChild(commentButton);
|
||||
}
|
||||
|
||||
wordButtonContainer.classList.add('wordButtonContainer'); // 给按钮
|
||||
// 将容器添加到页面中
|
||||
document.body.appendChild(wordButtonContainer);
|
||||
}
|
||||
ed.on('mousedown', function (e) {
|
||||
// 检查点击的位置是否是删除按钮或选中的 <p> 标签
|
||||
if (!currentParagraph || (e.target !== wordButtonContainer && !currentParagraph.contains(e.target))) {
|
||||
if (wordButtonContainer) {
|
||||
wordButtonContainer.remove(); // 移除删除按钮
|
||||
wordButtonContainer = null; // 清空按钮引用
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
init_instance_callback: (editor) => {
|
||||
|
||||
Reference in New Issue
Block a user