feat: 添加字体样式工具栏,支持加粗、斜体、颜色、字体、字号调整

This commit is contained in:
Zhukj
2026-04-16 10:27:25 +08:00
parent 09e2716de4
commit a296d88d2c
3 changed files with 211 additions and 1 deletions

View File

@@ -11,7 +11,42 @@
<!-- 顶部工具栏 -->
<div class="toolbar">
<button class="btn" id="addImageBtn">添加图片</button>
<button class="btn btn-primary" id="saveBtn">保存图片</button>
<button class="btn btn-primary" id="saveBtn">保存/预览</button>
</div>
<!-- 文本编辑器工具栏 -->
<div class="text-editor-toolbar" id="textEditorToolbar">
<button class="toolbar-btn" id="boldBtn" title="加粗">B</button>
<button class="toolbar-btn italic" id="italicBtn" title="斜体">I</button>
<div class="toolbar-divider"></div>
<label class="toolbar-label">
<span>颜色</span>
<input type="color" id="colorPicker" value="#000000">
</label>
<div class="toolbar-divider"></div>
<label class="toolbar-label">
<span>字体</span>
<select id="fontPicker">
<option value="Microsoft YaHei">雅黑</option>
<option value="SimHei">黑体</option>
<option value="SimSun">宋体</option>
<option value="Arial">Arial</option>
</select>
</label>
<div class="toolbar-divider"></div>
<label class="toolbar-label">
<span>字号</span>
<select id="fontSizePicker">
<option value="12">12px</option>
<option value="14">14px</option>
<option value="16" selected>16px</option>
<option value="18">18px</option>
<option value="20">20px</option>
<option value="24">24px</option>
<option value="28">28px</option>
<option value="32">32px</option>
</select>
</label>
</div>
<!-- 图片展示区 -->