feat: 添加图片编辑器,与文本共用工具栏,选中切换编辑面板,支持图片透明度调节

This commit is contained in:
Zhukj
2026-04-18 14:55:08 +08:00
parent b69bfae1bb
commit 22ba7dd6a3
4 changed files with 103 additions and 46 deletions

View File

@@ -79,12 +79,15 @@ html, body {
display: block;
}
/* 文本编辑器工具栏 */
.text-editor-toolbar {
/* 编辑器工具栏(文本/图片共用) */
.editor-toolbar {
position: absolute;
top: 49px;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: #fff;
border-bottom: 1px solid #e0e0e0;
@@ -92,13 +95,25 @@ html, body {
visibility: hidden;
opacity: 0;
transition: opacity 0.2s;
z-index: 100;
}
.text-editor-toolbar.active {
.editor-toolbar.active {
visibility: visible;
opacity: 1;
}
.toolbar-group {
display: none;
justify-content: center;
align-items: center;
gap: 8px;
}
.toolbar-group.active {
display: flex;
}
.toolbar-btn {
width: 40px;
height: 40px;
@@ -150,6 +165,14 @@ html, body {
cursor: pointer;
}
.opacity-slider {
width: 120px;
height: 40px;
cursor: pointer;
accent-color: #4a90e2;
margin: 0;
}
/* 字号滚轮选择器 */
.roller-picker {
display: flex;