From adf570d89f7c8964b8f446ab4f945696f78f384d Mon Sep 17 00:00:00 2001 From: yuantao Date: Thu, 16 Oct 2025 10:56:32 +0800 Subject: [PATCH] =?UTF-8?q?\"feat:=20=E6=92=A4=E5=9B=9E=E6=8B=96=E6=8B=BD?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=E6=AD=A3=E5=B8=B8=E7=89=88=E6=9C=AC=E5=B9=B6?= =?UTF-8?q?=E9=87=8D=E6=96=B0=E6=B7=BB=E5=8A=A0=E5=88=A0=E9=99=A4=E6=8C=89?= =?UTF-8?q?=E9=92=AE=E5=8A=9F=E8=83=BD\"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/RichTextEditor.vue | 241 +++++++----------------------- 1 file changed, 58 insertions(+), 183 deletions(-) diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index e1cd4df..342d772 100644 --- a/src/components/RichTextEditor.vue +++ b/src/components/RichTextEditor.vue @@ -96,64 +96,15 @@ onMounted(() => { }); } - // 为图片容器添加事件监听器（用于拖拽功能） - 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(); - // 切换删除按钮的显示状态 - if (deleteBtn) { - if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { - deleteBtn.style.display = 'block'; - } else { - deleteBtn.style.display = 'none'; - } - } - } - }); - - // 为图片容器添加触摸事件以显示/隐藏删除按钮 - container.addEventListener('touchend', function(e) { - // 检查是否为轻触（非拖拽） - if (!dragState.value.isLongPress && dragState.value.longPressTimer) { - // 清除长按定时器 - clearTimeout(dragState.value.longPressTimer); - dragState.value.longPressTimer = null; - - e.stopPropagation(); - // 切换删除按钮的显示状态 - if (deleteBtn) { - if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { - deleteBtn.style.display = 'block'; - } else { - deleteBtn.style.display = 'none'; - } - } - } - }); - - // 为图片容器添加触摸事件以显示/隐藏删除按钮 - container.addEventListener('touchend', function(e) { - // 检查是否为轻触（非拖拽） - if (!dragState.value.isLongPress && dragState.value.longPressTimer) { - // 清除长按定时器 - clearTimeout(dragState.value.longPressTimer); - dragState.value.longPressTimer = null; - - e.stopPropagation(); - // 切换删除按钮的显示状态 - if (deleteBtn) { - if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { - deleteBtn.style.display = 'block'; - } else { - deleteBtn.style.display = 'none'; - } + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn) { + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; } } }); @@ -833,6 +784,12 @@ 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(); @@ -840,41 +797,14 @@ const insertImage = () => { handleInput(); }); - // 为图片容器添加事件监听器（用于拖拽功能和删除按钮切换） - imgContainer.addEventListener('touchstart', handleTouchStart) - imgContainer.addEventListener('touchmove', handleTouchMove) - imgContainer.addEventListener('touchend', handleTouchEnd) - imgContainer.addEventListener('touchcancel', handleTouchCancel) - - // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试） + // 为图片容器添加点击事件以显示/隐藏删除按钮 imgContainer.addEventListener('click', function(e) { - // 如果当前没有处于拖拽状态，则切换删除按钮显示状态 - if (!dragState.value.isLongPress) { - e.stopPropagation(); - // 切换删除按钮的显示状态 - if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { - deleteBtn.style.display = 'block'; - } else { - deleteBtn.style.display = 'none'; - } - } - }); - - // 为图片容器添加触摸事件以显示/隐藏删除按钮 - imgContainer.addEventListener('touchend', function(e) { - // 检查是否为轻触（非拖拽） - if (!dragState.value.isLongPress && dragState.value.longPressTimer) { - // 清除长按定时器 - clearTimeout(dragState.value.longPressTimer); - dragState.value.longPressTimer = null; - - e.stopPropagation(); - // 切换删除按钮的显示状态 - if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { - deleteBtn.style.display = 'block'; - } else { - deleteBtn.style.display = 'none'; - } + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; } }); @@ -971,37 +901,14 @@ const handleKeydown = e => { // 处理触摸开始事件 const handleTouchStart = (e) => { - // 获取触摸目标 - const target = e.target - - // 检查是否触摸的是删除按钮 - if (target.classList.contains('image-delete-btn')) { - // 如果是删除按钮，让事件正常处理 - return - } - - // 检查目标是否为图片容器或图片 - let imgContainer = null - let img = null - - if (target.classList.contains('image-container')) { - imgContainer = target - img = target.querySelector('.editor-image') - } else if (target.classList.contains('editor-image')) { - img = target - imgContainer = target.parentElement - } else { - // 如果触摸的不是图片或图片容器，直接返回 - return - } + const img = e.target + if (!img.classList.contains('editor-image')) return // 防止图片被选中 - if (img) { - img.style.userSelect = 'none' - img.style.webkitUserSelect = 'none' - img.style.mozUserSelect = 'none' - img.style.msUserSelect = 'none' - } + img.style.userSelect = 'none' + img.style.webkitUserSelect = 'none' + img.style.mozUserSelect = 'none' + img.style.msUserSelect = 'none' // 清除之前的定时器 if (dragState.value.longPressTimer) { @@ -1020,13 +927,11 @@ const handleTouchStart = (e) => { dragState.value.currentY = e.touches[0].clientY // 添加拖拽样式 - 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)' - } + 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') @@ -1059,10 +964,10 @@ const handleTouchStart = (e) => { if (navigator.vibrate) { navigator.vibrate(10) } + + // 阻止页面滚动 + e.preventDefault() }, 300) // 300毫秒长按触发拖拽 - - // 阻止页面滚动 - e.preventDefault() } // 处理触摸移动事件 @@ -1247,7 +1152,7 @@ const checkAndSwapImages = (draggedImg, deltaY) => { // 检查是否与目标图片重叠，使用更精确的碰撞检测 // 当拖拽图片覆盖目标图片高度的三分之二时触发排序 - const overlapThreshold = targetRect.height * 0.27 + const overlapThreshold = targetRect.height * 0.67 const distance = Math.abs(draggedCenterY - targetCenterY) if (distance < overlapThreshold) { @@ -1540,21 +1445,7 @@ const adjustExistingImages = () => { }); } - // 为图片容器添加触摸事件以显示/隐藏删除按钮 - container.addEventListener('touchstart', function(e) { - // 防止与拖拽功能冲突 - if (!dragState.value.isLongPress) { - e.stopPropagation(); - // 切换删除按钮的显示状态 - if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { - deleteBtn.style.display = 'block'; - } else { - deleteBtn.style.display = 'none'; - } - } - }); - - // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试） + // 为图片容器添加点击事件以显示/隐藏删除按钮 container.addEventListener('click', function(e) { e.stopPropagation(); // 切换删除按钮的显示状态 @@ -1619,44 +1510,15 @@ defineExpose({ }); } - // 为图片容器添加事件监听器（用于拖拽功能） - 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(); - // 切换删除按钮的显示状态 - if (deleteBtn) { - if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { - deleteBtn.style.display = 'block'; - } else { - deleteBtn.style.display = 'none'; - } - } - } - }); - - // 为图片容器添加触摸事件以显示/隐藏删除按钮 - container.addEventListener('touchend', function(e) { - // 检查是否为轻触（非拖拽） - if (!dragState.value.isLongPress && dragState.value.longPressTimer) { - // 清除长按定时器 - clearTimeout(dragState.value.longPressTimer); - dragState.value.longPressTimer = null; - - e.stopPropagation(); - // 切换删除按钮的显示状态 - if (deleteBtn) { - if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { - deleteBtn.style.display = 'block'; - } else { - deleteBtn.style.display = 'none'; - } + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn) { + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; } } }); @@ -1713,6 +1575,19 @@ defineExpose({ handleInput(); }); } + + // 为图片容器添加点击事件以显示/隐藏删除按钮 + 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) {