refactor(editor): 优化引用消息的点击事件处理逻辑
使用事件委托统一处理引用消息的点击事件,包括关闭按钮点击和光标定位 移除重复的事件监听器,简化代码结构 修复引用消息ID字段从msg_id改为id的匹配问题
This commit is contained in:
parent
b18a6e5432
commit
1ff26564c7
@ -375,6 +375,7 @@ const sendMessage = () => {
|
|||||||
quoteId:messageData.quoteId,
|
quoteId:messageData.quoteId,
|
||||||
}
|
}
|
||||||
console.log('发送前',data)
|
console.log('发送前',data)
|
||||||
|
console.log('quoteData',quoteData.value)
|
||||||
emit(
|
emit(
|
||||||
'editor-event',
|
'editor-event',
|
||||||
emitCall('text_event', data,(ok)=>{
|
emitCall('text_event', data,(ok)=>{
|
||||||
@ -527,7 +528,7 @@ const parseEditorContent = () => {
|
|||||||
const result = {
|
const result = {
|
||||||
items: items.length > 0 ? items : [{ type: 1, content: '' }],
|
items: items.length > 0 ? items : [{ type: 1, content: '' }],
|
||||||
mentionUids,
|
mentionUids,
|
||||||
quoteId: quoteElements.length > 0 && quoteData.value ? quoteData.value.msg_id ||'' : ''
|
quoteId: quoteElements.length > 0 && quoteData.value ? quoteData.value.id ||'' : ''
|
||||||
}
|
}
|
||||||
|
|
||||||
// 如果有引用信息,添加到结果中
|
// 如果有引用信息,添加到结果中
|
||||||
@ -840,10 +841,15 @@ const onSubscribeQuote = (data) => {
|
|||||||
editor.appendChild(quoteElement)
|
editor.appendChild(quoteElement)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 添加关闭按钮点击事件
|
// 使用事件委托处理引用元素的所有点击事件
|
||||||
const closeBtn = quoteElement.querySelector('.quote-close')
|
quoteElement.addEventListener('click', (e) => {
|
||||||
if (closeBtn) {
|
console.log('执行删除',e)
|
||||||
closeBtn.addEventListener('click', () => {
|
// 检查点击的是否是关闭按钮或其内部元素
|
||||||
|
const closeButton = e.target.classList?.contains('quote-close') ? e.target : e.target.closest('.quote-close')
|
||||||
|
if (closeButton) {
|
||||||
|
// 阻止事件冒泡
|
||||||
|
e.stopPropagation()
|
||||||
|
|
||||||
// 移除引用元素
|
// 移除引用元素
|
||||||
quoteElement.remove()
|
quoteElement.remove()
|
||||||
|
|
||||||
@ -859,15 +865,8 @@ const onSubscribeQuote = (data) => {
|
|||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
editor.focus()
|
editor.focus()
|
||||||
}, 0)
|
}, 0)
|
||||||
})
|
} else {
|
||||||
}
|
// 如果不是点击关闭按钮,则设置光标到引用卡片后面
|
||||||
|
|
||||||
// 注意:不调用saveDraft(),确保引用内容不会被保存到草稿中
|
|
||||||
|
|
||||||
// 添加点击整个引用卡片的事件
|
|
||||||
quoteElement.addEventListener('click', (e) => {
|
|
||||||
// 如果不是点击关闭按钮,则设置光标到引用卡片后面
|
|
||||||
if (!e.target.classList.contains('quote-close')) {
|
|
||||||
const selection = window.getSelection()
|
const selection = window.getSelection()
|
||||||
const range = document.createRange()
|
const range = document.createRange()
|
||||||
range.setStartAfter(quoteElement)
|
range.setStartAfter(quoteElement)
|
||||||
@ -880,6 +879,13 @@ const onSubscribeQuote = (data) => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 注意:不调用saveDraft(),确保引用内容不会被保存到草稿中
|
||||||
|
|
||||||
|
// 在同一个事件监听器中处理引用卡片的点击
|
||||||
|
// 已经在上面的事件处理中添加了关闭按钮的处理逻辑
|
||||||
|
// 这里只需要处理非关闭按钮的点击
|
||||||
|
// 注意:由于事件委托的方式,不需要额外添加点击事件监听器
|
||||||
|
|
||||||
// 监听键盘事件,处理删除操作
|
// 监听键盘事件,处理删除操作
|
||||||
// 监听键盘事件,处理删除操作
|
// 监听键盘事件,处理删除操作
|
||||||
const handleDeleteQuote = function(e) {
|
const handleDeleteQuote = function(e) {
|
||||||
@ -1109,6 +1115,11 @@ onMounted(() => {
|
|||||||
bus.subscribe(EditorConst.Edit, onSubscribeEdit)
|
bus.subscribe(EditorConst.Edit, onSubscribeEdit)
|
||||||
bus.subscribe(EditorConst.Clear, onSubscribeClear)
|
bus.subscribe(EditorConst.Clear, onSubscribeClear)
|
||||||
|
|
||||||
|
// 为编辑器添加点击事件监听器,用于处理引用消息关闭等
|
||||||
|
if (editorRef.value) {
|
||||||
|
editorRef.value.addEventListener('click', handleEditorClick);
|
||||||
|
}
|
||||||
|
|
||||||
// 点击外部隐藏mention
|
// 点击外部隐藏mention
|
||||||
document.addEventListener('click', (event) => {
|
document.addEventListener('click', (event) => {
|
||||||
if (!editorRef.value?.contains(event.target)) {
|
if (!editorRef.value?.contains(event.target)) {
|
||||||
@ -1134,6 +1145,11 @@ onBeforeUnmount(() => {
|
|||||||
bus.unsubscribe(EditorConst.Edit, onSubscribeEdit)
|
bus.unsubscribe(EditorConst.Edit, onSubscribeEdit)
|
||||||
bus.unsubscribe(EditorConst.Clear, onSubscribeClear)
|
bus.unsubscribe(EditorConst.Clear, onSubscribeClear)
|
||||||
|
|
||||||
|
// 移除编辑器点击事件监听器
|
||||||
|
if (editorRef.value) {
|
||||||
|
editorRef.value.removeEventListener('click', handleEditorClick);
|
||||||
|
}
|
||||||
|
|
||||||
// 清理DOM事件监听器
|
// 清理DOM事件监听器
|
||||||
const editor = editorRef.value
|
const editor = editorRef.value
|
||||||
if (editor && handleDeleteQuote) {
|
if (editor && handleDeleteQuote) {
|
||||||
@ -1191,6 +1207,24 @@ const onVoteSubmit = (data) => {
|
|||||||
})
|
})
|
||||||
isShowVote.value = false
|
isShowVote.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 处理编辑器内部点击事件(用于关闭引用等)
|
||||||
|
const handleEditorClick = (event) => {
|
||||||
|
const closeButton = event.target.closest('.quote-close');
|
||||||
|
|
||||||
|
if (closeButton) {
|
||||||
|
const quoteElement = event.target.closest('.editor-quote');
|
||||||
|
if (quoteElement) {
|
||||||
|
quoteElement.remove();
|
||||||
|
quoteData.value = null;
|
||||||
|
|
||||||
|
handleInput({ target: editorRef.value });
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
Loading…
Reference in New Issue
Block a user