diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index a74dfea..e8cfc91 100644 --- a/src/components/RichTextEditor.vue +++ b/src/components/RichTextEditor.vue @@ -96,9 +96,15 @@ onMounted(() => { }); } - // 为图片容器添加触摸事件以显示/隐藏删除按钮 - container.addEventListener('touchstart', function(e) { - // 防止与拖拽功能冲突 + // 为图片容器添加事件监听器(用于拖拽功能) + container.addEventListener('touchstart', handleTouchStart) + container.addEventListener('touchmove', handleTouchMove) + container.addEventListener('touchend', handleTouchEnd) + container.addEventListener('touchcancel', handleTouchCancel) + + // 为图片容器添加点击事件以显示/隐藏删除按钮(用于桌面端测试) + container.addEventListener('click', function(e) { + // 如果当前没有处于拖拽状态,则切换删除按钮显示状态 if (!dragState.value.isLongPress) { e.stopPropagation(); // 切换删除按钮的显示状态 @@ -111,19 +117,6 @@ onMounted(() => { } } }); - - // 为图片容器添加点击事件以显示/隐藏删除按钮(用于桌面端测试) - container.addEventListener('click', function(e) { - e.stopPropagation(); - // 切换删除按钮的显示状态 - if (deleteBtn) { - if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { - deleteBtn.style.display = 'block'; - } else { - deleteBtn.style.display = 'none'; - } - } - }); }) }, 0) }) @@ -809,12 +802,6 @@ const insertImage = () => { } tempImg.src = imageDataUrl - // 为图片容器添加事件监听器(用于拖拽功能) - imgContainer.addEventListener('touchstart', handleTouchStart) - imgContainer.addEventListener('touchmove', handleTouchMove) - imgContainer.addEventListener('touchend', handleTouchEnd) - imgContainer.addEventListener('touchcancel', handleTouchCancel) - // 为删除按钮添加点击事件 deleteBtn.addEventListener('click', function(e) { e.stopPropagation(); @@ -822,17 +809,23 @@ const insertImage = () => { handleInput(); }); - // 为图片容器添加触摸事件以显示/隐藏删除按钮 - // 注意:这个事件监听器需要在拖拽事件监听器之前添加,以确保正确处理 + // 为图片容器添加事件监听器(用于拖拽功能和删除按钮切换) + imgContainer.addEventListener('touchstart', handleTouchStart) + imgContainer.addEventListener('touchmove', handleTouchMove) + imgContainer.addEventListener('touchend', handleTouchEnd) + imgContainer.addEventListener('touchcancel', handleTouchCancel) // 为图片容器添加点击事件以显示/隐藏删除按钮(用于桌面端测试) imgContainer.addEventListener('click', function(e) { - e.stopPropagation(); - // 切换删除按钮的显示状态 - if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { - deleteBtn.style.display = 'block'; - } else { - deleteBtn.style.display = 'none'; + // 如果当前没有处于拖拽状态,则切换删除按钮显示状态 + if (!dragState.value.isLongPress) { + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; + } } }); @@ -932,6 +925,12 @@ const handleTouchStart = (e) => { // 获取触摸目标 const target = e.target + // 检查是否触摸的是删除按钮 + if (target.classList.contains('image-delete-btn')) { + // 如果是删除按钮,让事件正常处理 + return + } + // 检查目标是否为图片容器或图片 let imgContainer = null let img = null @@ -947,27 +946,6 @@ const handleTouchStart = (e) => { return } - // 检查是否触摸的是删除按钮 - if (target.classList.contains('image-delete-btn')) { - // 如果是删除按钮,让事件正常处理 - return - } - - // 如果当前没有处于长按拖拽状态,切换删除按钮的显示状态 - if (!dragState.value.isLongPress) { - const deleteBtn = imgContainer.querySelector('.image-delete-btn') - if (deleteBtn) { - // 切换删除按钮的显示状态 - if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { - deleteBtn.style.display = 'block' - } else { - deleteBtn.style.display = 'none' - } - // 如果只是简单的点击(非长按),我们不阻止事件继续传播 - // 这样可以允许删除按钮的点击事件正常处理 - } - } - // 防止图片被选中 if (img) { img.style.userSelect = 'none' @@ -993,11 +971,13 @@ const handleTouchStart = (e) => { dragState.value.currentY = e.touches[0].clientY // 添加拖拽样式 - img.classList.add('dragging') - img.style.opacity = '0.9' - img.style.transform = 'scale(0.98)' - img.style.zIndex = '999' - img.style.transition = 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)' + if (img) { + img.classList.add('dragging') + img.style.opacity = '0.9' + img.style.transform = 'scale(0.98)' + img.style.zIndex = '999' + img.style.transition = 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)' + } // 添加拖拽指示器 const indicator = document.createElement('div') @@ -1590,9 +1570,15 @@ defineExpose({ }); } - // 为图片容器添加触摸事件以显示/隐藏删除按钮 - container.addEventListener('touchstart', function(e) { - // 防止与拖拽功能冲突 + // 为图片容器添加事件监听器(用于拖拽功能) + container.addEventListener('touchstart', handleTouchStart) + container.addEventListener('touchmove', handleTouchMove) + container.addEventListener('touchend', handleTouchEnd) + container.addEventListener('touchcancel', handleTouchCancel) + + // 为图片容器添加点击事件以显示/隐藏删除按钮(用于桌面端测试) + container.addEventListener('click', function(e) { + // 如果当前没有处于拖拽状态,则切换删除按钮显示状态 if (!dragState.value.isLongPress) { e.stopPropagation(); // 切换删除按钮的显示状态 @@ -1605,19 +1591,6 @@ defineExpose({ } } }); - - // 为图片容器添加点击事件以显示/隐藏删除按钮(用于桌面端测试) - container.addEventListener('click', function(e) { - e.stopPropagation(); - // 切换删除按钮的显示状态 - if (deleteBtn) { - if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { - deleteBtn.style.display = 'block'; - } else { - deleteBtn.style.display = 'none'; - } - } - }); }) }, 0) } catch (error) {