From 51809ad7572748292eefbe05d8a84205d7680214 Mon Sep 17 00:00:00 2001
From: yuantao <user@example.com>
Date: Thu, 16 Oct 2025 10:43:17 +0800
Subject: [PATCH] =?UTF-8?q?\"fix:=20=E4=BF=AE=E5=A4=8D=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=8C=89=E9=92=AE=E6=98=BE=E7=A4=BA=E5=92=8C?=
 =?UTF-8?q?=E6=8B=96=E6=8B=BD=E5=8A=9F=E8=83=BD=E5=86=B2=E7=AA=81=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98\"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/RichTextEditor.vue | 71 ++++++++++++++++++++-----------
 1 file changed, 46 insertions(+), 25 deletions(-)

diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue
index 177e59b..a74dfea 100644
--- a/src/components/RichTextEditor.vue
+++ b/src/components/RichTextEditor.vue
@@ -809,13 +809,7 @@ const insertImage = () => {
           }
           tempImg.src = imageDataUrl
 
-          // 添加触摸事件监听器实现拖拽功能
-          img.addEventListener('touchstart', handleTouchStart)
-          img.addEventListener('touchmove', handleTouchMove)
-          img.addEventListener('touchend', handleTouchEnd)
-          img.addEventListener('touchcancel', handleTouchCancel)
-          
-          // 为图片容器添加事件监听器
+          // 为图片容器添加事件监听器（用于拖拽功能）
           imgContainer.addEventListener('touchstart', handleTouchStart)
           imgContainer.addEventListener('touchmove', handleTouchMove)
           imgContainer.addEventListener('touchend', handleTouchEnd)
@@ -829,18 +823,7 @@ const insertImage = () => {
           });
           
           // 为图片容器添加触摸事件以显示/隐藏删除按钮
-          imgContainer.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';
-              }
-            }
-          });
+          // 注意：这个事件监听器需要在拖拽事件监听器之前添加，以确保正确处理
           
           // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试）
           imgContainer.addEventListener('click', function(e) {
@@ -946,14 +929,52 @@ const handleKeydown = e => {
 
 // 处理触摸开始事件
 const handleTouchStart = (e) => {
-  const img = e.target
-  if (!img.classList.contains('editor-image')) return
+  // 获取触摸目标
+  const target = e.target
+  
+  // 检查目标是否为图片容器或图片
+  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
+  }
+  
+  // 检查是否触摸的是删除按钮
+  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'
+      }
+      // 如果只是简单的点击（非长按），我们不阻止事件继续传播
+      // 这样可以允许删除按钮的点击事件正常处理
+    }
+  }
   
   // 防止图片被选中
-  img.style.userSelect = 'none'
-  img.style.webkitUserSelect = 'none'
-  img.style.mozUserSelect = 'none'
-  img.style.msUserSelect = 'none'
+  if (img) {
+    img.style.userSelect = 'none'
+    img.style.webkitUserSelect = 'none'
+    img.style.mozUserSelect = 'none'
+    img.style.msUserSelect = 'none'
+  }
   
   // 清除之前的定时器
   if (dragState.value.longPressTimer) {