src/components/RichTextEditor.vue

@@ -95,6 +95,35 @@ onMounted(() => {
           handleInput();
         });
       }
+      
+      // 为图片容器添加触摸事件以显示/隐藏删除按钮
+      container.addEventListener('touchstart', 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('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)
 })
@@ -735,6 +764,7 @@ const insertImage = () => {
           deleteBtn.style.zIndex = '10'
           deleteBtn.style.display = 'none' // 默认隐藏
           deleteBtn.style.transition = 'opacity 0.2s ease'
+          deleteBtn.style.touchAction = 'manipulation' // 优化触摸体验
           
           // 将图片和删除按钮添加到容器中
           imgContainer.appendChild(img)
@@ -798,13 +828,29 @@ const insertImage = () => {
             handleInput();
           });
           
-          // 为图片容器添加鼠标悬停事件以显示/隐藏删除按钮
-          imgContainer.addEventListener('mouseenter', function() {
-            deleteBtn.style.display = 'block';
+          // 为图片容器添加触摸事件以显示/隐藏删除按钮
+          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('mouseleave', function() {
-            deleteBtn.style.display = 'none';
+          // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试）
+          imgContainer.addEventListener('click', function(e) {
+            e.stopPropagation();
+            // 切换删除按钮的显示状态
+            if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') {
+              deleteBtn.style.display = 'block';
+            } else {
+              deleteBtn.style.display = 'none';
+            }
           });
           
           console.log('Added touch event listeners')
@@ -1444,13 +1490,31 @@ const adjustExistingImages = () => {
             });
           }
           
-          // 为图片容器添加鼠标悬停事件以显示/隐藏删除按钮
-          container.addEventListener('mouseenter', function() {
-            if (deleteBtn) deleteBtn.style.display = 'block';
+          // 为图片容器添加触摸事件以显示/隐藏删除按钮
+          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('mouseleave', function() {
-            if (deleteBtn) deleteBtn.style.display = 'none';
+          // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试）
+          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';
+              }
+            }
           });
           
           img.setAttribute('data-touch-listeners', 'true')
@@ -1504,6 +1568,35 @@ defineExpose({
                 handleInput();
               });
             }
+            
+            // 为图片容器添加触摸事件以显示/隐藏删除按钮
+            container.addEventListener('touchstart', 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('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) {