product/SmartisanNote.Remake
1
0
Fork 0
Code Issues 4 Pull Requests Projects Releases Activity

\"feat: 为图片添加移除按钮，使用item_image_btn_unbrella_delete.png图标\"

Browse Source
This commit is contained in:
yuantao
2025-10-16 10:35:50 +08:00
parent 1ca85f2709
commit 4e2771277d
1 changed files with 156 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
src/components/RichTextEditor.vue
View File

@@ -684,6 +684,12 @@ const insertImage = () => {
const range = selection.getRangeAt(0)
console.log('Current range:', range)
// 创建图片容器
const imgContainer = document.createElement('div')
imgContainer.className = 'image-container'
imgContainer.style.position = 'relative'
imgContainer.style.display = 'inline-block'
// 创建图片元素
const img = document.createElement('img')
img.src = imageDataUrl
@@ -702,6 +708,24 @@ const insertImage = () => {
img.style.outline = 'none' // 移除默认焦点轮廓
img.draggable = true
// 创建删除按钮
const deleteBtn = document.createElement('img')
deleteBtn.src = '/assets/icons/drawable-xxhdpi/item_image_btn_unbrella_delete.png'
deleteBtn.className = 'image-delete-btn'
deleteBtn.style.position = 'absolute'
deleteBtn.style.top = '8px'
deleteBtn.style.right = '8px'
deleteBtn.style.width = '24px'
deleteBtn.style.height = '24px'
deleteBtn.style.cursor = 'pointer'
deleteBtn.style.zIndex = '10'
deleteBtn.style.display = 'none' // 默认隐藏
deleteBtn.style.transition = 'opacity 0.2s ease'
// 将图片和删除按钮添加到容器中
imgContainer.appendChild(img)
imgContainer.appendChild(deleteBtn)
console.log('Created image element:', img)
// 创建一个临时图片来获取原始尺寸
@@ -746,20 +770,43 @@ const insertImage = () => {
img.addEventListener('touchmove', handleTouchMove)
img.addEventListener('touchend', handleTouchEnd)
img.addEventListener('touchcancel', handleTouchCancel)
// 为图片容器添加事件监听器
imgContainer.addEventListener('touchstart', handleTouchStart)
imgContainer.addEventListener('touchmove', handleTouchMove)
imgContainer.addEventListener('touchend', handleTouchEnd)
imgContainer.addEventListener('touchcancel', handleTouchCancel)
// 为删除按钮添加点击事件
deleteBtn.addEventListener('click', function(e) {
e.stopPropagation();
imgContainer.remove();
handleInput();
});
// 为图片容器添加鼠标悬停事件以显示/隐藏删除按钮
imgContainer.addEventListener('mouseenter', function() {
deleteBtn.style.display = 'block';
});
imgContainer.addEventListener('mouseleave', function() {
deleteBtn.style.display = 'none';
});
console.log('Added touch event listeners')
// 插入图片到当前光标位置
range.insertNode(img)
console.log('Inserted image into editor')
// 插入图片容器到当前光标位置
range.insertNode(imgContainer)
console.log('Inserted image container into editor')
// 调试信息
console.log('Image inserted:', img)
console.log('Next sibling (should be drag handle):', img.nextSibling)
console.log('Image container inserted:', imgContainer)
console.log('Next sibling (should be drag handle):', imgContainer.nextSibling)
// 添加换行
const br = document.createElement('br')
img.parentNode.insertBefore(br, img.nextSibling)
console.log('Added line break after image')
imgContainer.parentNode.insertBefore(br, imgContainer.nextSibling)
console.log('Added line break after image container')
// 触发输入事件更新内容
handleInput()
@@ -1090,7 +1137,7 @@ const checkAndSwapImages = (draggedImg, deltaY) => {
// 检查是否与目标图片重叠，使用更精确的碰撞检测
// 当拖拽图片覆盖目标图片高度的三分之二时触发排序
const overlapThreshold = targetRect.height * 0.67
const overlapThreshold = targetRect.height * 0.27
const distance = Math.abs(draggedCenterY - targetCenterY)
if (distance < overlapThreshold) {
@@ -1306,9 +1353,12 @@ const adjustExistingImages = () => {
// 等待DOM更新完成
setTimeout(() => {
if (editorRef.value) {
const imageElements = editorRef.value.querySelectorAll('img.editor-image')
console.log('Found image elements:', imageElements.length)
imageElements.forEach(img => {
const imageContainers = editorRef.value.querySelectorAll('.image-container')
console.log('Found image containers:', imageContainers.length)
imageContainers.forEach(container => {
const img = container.querySelector('img.editor-image')
if (!img) return
console.log('Processing image:', img)
// 只处理还没有调整过高度的图片
if (!img.dataset.heightAdjusted) {
@@ -1356,27 +1406,42 @@ const adjustExistingImages = () => {
})
// 为现有图片添加拖拽功能
imageElements.forEach(img => {
imageContainers.forEach(container => {
const img = container.querySelector('img.editor-image')
if (!img) return
console.log('Adding drag functionality to image:', img)
// 添加触摸事件监听器
if (!img.hasAttribute('data-touch-listeners')) {
console.log('Adding touch event listeners')
img.addEventListener('touchstart', handleTouchStart)
img.addEventListener('touchmove', handleTouchMove)
img.addEventListener('touchend', handleTouchEnd)
img.addEventListener('touchcancel', handleTouchCancel)
// 为图片容器添加事件监听器
container.addEventListener('touchstart', handleTouchStart)
container.addEventListener('touchmove', handleTouchMove)
container.addEventListener('touchend', handleTouchEnd)
container.addEventListener('touchcancel', handleTouchCancel)
// 为删除按钮添加点击事件
const deleteBtn = container.querySelector('.image-delete-btn')
if (deleteBtn) {
deleteBtn.addEventListener('click', function(e) {
e.stopPropagation();
container.remove();
handleInput();
});
}
// 为图片容器添加鼠标悬停事件以显示/隐藏删除按钮
container.addEventListener('mouseenter', function() {
if (deleteBtn) deleteBtn.style.display = 'block';
});
container.addEventListener('mouseleave', function() {
if (deleteBtn) deleteBtn.style.display = 'none';
});
img.setAttribute('data-touch-listeners', 'true')
console.log('Added touch event listeners')
}
// 移除已存在的拖拽手柄
setTimeout(() => {
const dragHandle = img.nextElementSibling
if (dragHandle && dragHandle.classList.contains('image-drag-handle')) {
console.log('Removing existing drag handle')
dragHandle.remove()
}
}, 0)
})
}
}, 0)
@@ -1397,21 +1462,34 @@ defineExpose({
// 为图片添加拖拽事件监听器
setTimeout(() => {
console.log('Adding drag event listeners to images in setContent')
const imageElements = editorRef.value.querySelectorAll('img.editor-image')
console.log('Found images in setContent:', imageElements.length)
imageElements.forEach(img => {
const imageContainers = editorRef.value.querySelectorAll('.image-container')
console.log('Found image containers in setContent:', imageContainers.length)
imageContainers.forEach(container => {
const img = container.querySelector('img.editor-image')
if (!img) return
console.log('Adding touch listeners to image in setContent:', img)
// 先移除可能已有的事件监听器，避免重复
img.removeEventListener('touchstart', handleTouchStart)
img.removeEventListener('touchmove', handleTouchMove)
img.removeEventListener('touchend', handleTouchEnd)
img.removeEventListener('touchcancel', handleTouchCancel)
container.removeEventListener('touchstart', handleTouchStart)
container.removeEventListener('touchmove', handleTouchMove)
container.removeEventListener('touchend', handleTouchEnd)
container.removeEventListener('touchcancel', handleTouchCancel)
// 重新添加事件监听器
img.addEventListener('touchstart', handleTouchStart)
img.addEventListener('touchmove', handleTouchMove)
img.addEventListener('touchend', handleTouchEnd)
img.addEventListener('touchcancel', handleTouchCancel)
container.addEventListener('touchstart', handleTouchStart)
container.addEventListener('touchmove', handleTouchMove)
container.addEventListener('touchend', handleTouchEnd)
container.addEventListener('touchcancel', handleTouchCancel)
// 为删除按钮添加点击事件
const deleteBtn = container.querySelector('.image-delete-btn')
if (deleteBtn) {
deleteBtn.addEventListener('click', function(e) {
e.stopPropagation();
container.remove();
handleInput();
});
}
})
}, 0)
} catch (error) {
@@ -1437,21 +1515,34 @@ defineExpose({
// 为图片添加拖拽事件监听器
setTimeout(() => {
console.log('Adding drag event listeners to images in delayed setContent')
const imageElements = editorRef.value.querySelectorAll('img.editor-image')
console.log('Found images in delayed setContent:', imageElements.length)
imageElements.forEach(img => {
const imageContainers = editorRef.value.querySelectorAll('.image-container')
console.log('Found image containers in delayed setContent:', imageContainers.length)
imageContainers.forEach(container => {
const img = container.querySelector('img.editor-image')
if (!img) return
console.log('Adding touch listeners to image in delayed setContent:', img)
// 先移除可能已有的事件监听器，避免重复
img.removeEventListener('touchstart', handleTouchStart)
img.removeEventListener('touchmove', handleTouchMove)
img.removeEventListener('touchend', handleTouchEnd)
img.removeEventListener('touchcancel', handleTouchCancel)
container.removeEventListener('touchstart', handleTouchStart)
container.removeEventListener('touchmove', handleTouchMove)
container.removeEventListener('touchend', handleTouchEnd)
container.removeEventListener('touchcancel', handleTouchCancel)
// 重新添加事件监听器
img.addEventListener('touchstart', handleTouchStart)
img.addEventListener('touchmove', handleTouchMove)
img.addEventListener('touchend', handleTouchEnd)
img.addEventListener('touchcancel', handleTouchCancel)
container.addEventListener('touchstart', handleTouchStart)
container.addEventListener('touchmove', handleTouchMove)
container.addEventListener('touchend', handleTouchEnd)
container.addEventListener('touchcancel', handleTouchCancel)
// 为删除按钮添加点击事件
const deleteBtn = container.querySelector('.image-delete-btn')
if (deleteBtn) {
deleteBtn.addEventListener('click', function(e) {
e.stopPropagation();
container.remove();
handleInput();
});
}
})
}, 0)
} catch (error) {
@@ -1671,11 +1762,16 @@ defineExpose({
text-align: center;
}
:deep(.editor-content .image-container) {
display: inline-block;
position: relative;
margin: calc((var(--editor-line-height, 1.6) * 10) * 1px) auto;
}
:deep(.editor-content .editor-image) {
max-width: 100%;
height: auto;
display: block;
margin: calc((var(--editor-line-height, 1.6) * 10) * 1px) auto;
object-fit: cover;
box-sizing: border-box;
border: 0.625rem solid white;
@@ -1692,6 +1788,18 @@ defineExpose({
-webkit-tap-highlight-color: transparent;
}
:deep(.editor-content .image-delete-btn) {
position: absolute;
top: 8px;
right: 8px;
width: 24px;
height: 24px;
cursor: pointer;
z-index: 10;
display: none;
transition: opacity 0.2s ease;
}
:deep(.editor-content .editor-image.draggable) {
cursor: move;
}