\"fix: resolve image deletion conflict in RichTextEditor\"

\"通过二次点击机制避免误删,提升用户体验。同时更新了IFLOW.md文档以反映这些更改。\"
This commit is contained in:
yuantao
2025-10-16 18:35:39 +08:00
parent 915fd00268
commit 5858c6c163
2 changed files with 43 additions and 25 deletions

View File

@@ -137,6 +137,8 @@
### RichTextEditor 组件 ### RichTextEditor 组件
* **富文本编辑**: 支持多种文本格式(加粗、居中、待办事项、列表、标题、引用) * **富文本编辑**: 支持多种文本格式(加粗、居中、待办事项、列表、标题、引用)
* **图片插入**: 支持插入图片功能 * **图片插入**: 支持插入图片功能
* **图片删除**: 支持通过短按图片显示删除按钮,二次点击删除按钮执行删除操作
* **图片拖拽排序**: 支持长按图片进行拖拽排序
* **工具栏**: 提供浮动工具栏,支持格式化操作 * **工具栏**: 提供浮动工具栏,支持格式化操作
## 页面 ## 页面
@@ -160,6 +162,7 @@
* **编辑模式**: 支持新建和编辑便签 * **编辑模式**: 支持新建和编辑便签
* **富文本编辑**: 集成RichTextEditor组件支持丰富的文本格式 * **富文本编辑**: 集成RichTextEditor组件支持丰富的文本格式
* **图片插入**: 支持通过工具栏插入图片 * **图片插入**: 支持通过工具栏插入图片
* **图片删除**: 支持通过短按图片显示删除按钮,二次点击删除按钮执行删除操作
* **状态管理**: 根据路由参数判断是新建还是编辑模式 * **状态管理**: 根据路由参数判断是新建还是编辑模式
* **智能日期显示**: 根据时间范围显示不同的日期格式 * **智能日期显示**: 根据时间范围显示不同的日期格式
* 今天:显示为 "今天 下午 4:00" * 今天:显示为 "今天 下午 4:00"
@@ -206,3 +209,8 @@
* **多格式支持**: 支持多种日期格式化方式以适应不同场景 * **多格式支持**: 支持多种日期格式化方式以适应不同场景
* **本地化显示**: 支持中文友好的日期时间显示 * **本地化显示**: 支持中文友好的日期时间显示
* **场景适配**: 不同页面使用最适合的日期格式化规则 * **场景适配**: 不同页面使用最适合的日期格式化规则
### 图片处理增强
* **图片删除优化**: 通过二次点击机制避免误删,提升用户体验
* **图片拖拽排序**: 支持长按图片进行拖拽排序,操作更直观
* **事件冲突解决**: 优化了图片删除按钮与容器短按事件的冲突问题

View File

@@ -64,11 +64,19 @@ const eventManager = {
const deleteHandler = function (e) { const deleteHandler = function (e) {
e.stopPropagation() e.stopPropagation()
e.preventDefault() e.preventDefault()
// 添加延时确保不是由短按触发的切换显示操作
setTimeout(() => { // 检查删除按钮是否可见,只有在可见状态下才能触发删除
if (deleteBtn.classList.contains('visible')) {
// 检查是否是刚显示的按钮点击(通过时间戳判断)
const lastVisibleTime = deleteBtn._lastVisibleTime || 0
const currentTime = Date.now()
// 如果距离上次显示时间超过300ms才执行删除操作
if (currentTime - lastVisibleTime > 300) {
container.remove() container.remove()
handleInput() handleInput()
}, 50) }
}
} }
deleteBtn.addEventListener('click', deleteHandler) deleteBtn.addEventListener('click', deleteHandler)
@@ -110,6 +118,8 @@ const eventManager = {
deleteBtn.classList.remove('visible') deleteBtn.classList.remove('visible')
} else { } else {
deleteBtn.classList.add('visible') deleteBtn.classList.add('visible')
// 记录显示时间
deleteBtn._lastVisibleTime = Date.now()
} }
} }
} }