HTML Editor (HTML 可视化编辑器)
一个为前端开发者和UI设计师打造的现代化HTML可视化编辑工具，提供类似Figma的直观编辑体验。
仅支持通过tailwind编写的html
✨ 功能特色
🎯 核心功能
- 可视化编辑: 在WebView中直接编辑HTML元素，所见即所得
- 实时同步: 代码编辑器与可视化编辑器双向实时同步
- 类Figma体验: 直观的元素选择和悬浮操作面板
- 智能布局: 支持三种核心布局模式（默认流布局、Flex布局、绝对定位）
🛠️ 操作体验
- 底部悬浮工具栏: 释放编辑空间，提供便捷操作入口
- 元素操作面板: 样式、布局、属性三合一操作面板
- 拖拽重排: 流畅的元素拖拽和重新排列
- 快捷键支持: 完整的键盘快捷键操作体系
- 响应式预览: 多设备尺寸预览和切换
🚀 安装使用
安装方式
方式一：VSCode 扩展市场
- 打开 VSCode
- 进入扩展市场 (Ctrl+Shift+X)
- 搜索 "vscode-html-editor" 或 "HTML Editor"
- 找到发布者为 "demonduyu" 的扩展
- 点击安装
方式二：命令行安装
code --install-extension demonduyu.vscode-html-editor
使用方法
启动编辑器
- 在VSCode中打开任意HTML文件
- 右键点击编辑器 → 选择 "使用HTML可视化编辑器打开"
- 或使用命令面板 (Ctrl+Shift+P) → 输入 "HTML Editor: Open"
基础操作
元素选择与编辑
- 单击任意HTML元素进行选择
- 选中元素后自动显示操作面板
- 支持Tab键循环选择元素
操作面板使用
┌─── 操作面板 ───┐
│ 🎨 样式 | 📐 布局 | 🔧 属性 │
├─────────────────────┤
│ • 背景色 [色彩选择器] │
│ • 文字色 [色彩选择器] │
│ • 边距 [数值输入] │
│ • 圆角 [数值输入] │
└─────────────────────┘
底部工具栏功能
- 🎯 编辑模式: 开启/关闭可视化编辑
- 👁 预览模式: 切换到纯预览模式
- 🔗 关联代码: 跳转到对应代码位置
- 🔄 刷新视图: 重新加载内容
- 🔍 缩放控制: 放大缩小视图
- 📱 设备预览: 响应式设备尺寸切换
⌨️ 快捷键
基础操作
| 快捷键 |
功能 |
Ctrl/Cmd + C |
复制选中元素 |
Ctrl/Cmd + V |
粘贴元素 |
Ctrl/Cmd + X |
剪切选中元素 |
Delete |
删除选中元素 |
Ctrl/Cmd + Z |
撤销操作 |
Ctrl/Cmd + Y |
重做操作 |
选择与导航
| 快捷键 |
功能 |
Tab |
选择下一个元素 |
Shift + Tab |
选择上一个元素 |
Escape |
取消选择 |
Enter |
进入编辑模式 |
布局快捷键
| 快捷键 |
功能 |
Ctrl/Cmd + 1 |
设置为默认布局 |
Ctrl/Cmd + 2 |
设置为Flex布局 |
Ctrl/Cmd + 3 |
设置为绝对定位 |
🎨 布局系统
三种核心布局模式
1. 默认流布局 (Document Flow)
- 跟随正常文档流
- 块级和内联元素的自然排列
- 适用于大多数内容布局
2. Flex 布局 (Flexbox)
- 现代响应式布局的首选
- 可视化控制方向、对齐、分布
- 支持自动换行和间距调整
3. 绝对定位 (Absolute Position)
- 脱离文档流的精确定位
- 自动为父元素设置相对定位
- 适用于悬浮元素和精确布局
📱 响应式设计
设备预设
- 📱 手机: iPhone SE (320px)、iPhone 8 (375px)、iPhone Plus (414px)
- 📟 平板: iPad (768px)
- 💻 笔记本: Laptop (1024px)
- 🖥 桌面: Desktop (1440px)
自定义尺寸
- 支持输入自定义宽度和高度
- 记住常用的自定义尺寸
- 横屏/竖屏快速切换
⚙️ 配置选项
在VSCode设置中可配置以下选项：
{
// 是否启用JavaScript预览
"webVisualEditor.allowScript": true,
// 是否允许拖拽元素
"webVisualEditor.enableMovingElements": true
}
🎯 适用场景
目标用户
- 前端开发者: 快速布局和样式调试
- UI/UX设计师: 从设计到代码的无缝转换
- 全栈开发者: 提高前端开发效率
- 学习者: 直观理解HTML/CSS布局原理
使用场景
- 📄 静态页面布局: 快速搭建页面结构
- 🎨 样式调试: 实时调整元素样式
- 📱 响应式设计: 多设备适配测试
- 🔧 原型制作: 快速HTML原型验证
- 📚 教学演示: 可视化展示布局原理
🆚 与其他工具对比
| 功能特性 |
HTML可视化编辑器 |
传统代码编辑 |
在线编辑器 |
| 可视化编辑 |
✅ |
❌ |
✅ |
| 代码同步 |
✅ |
✅ |
⚠️ |
| VSCode集成 |
✅ |
✅ |
❌ |
| 离线使用 |
✅ |
✅ |
❌ |
| 类Figma体验 |
✅ |
❌ |
⚠️ |
| 拖拽操作 |
✅ |
❌ |
✅ |
🔧 开发与扩展
技术架构
- 后端: VSCode Extension API + JSDOM
- 前端: WebView + TypeScript
- 通信: VSCode WebView Message API
- 解析: HTML Entity 编码/解码
贡献指南
欢迎提交Issues和Pull Requests！
- Fork 项目
- 创建特性分支
- 提交变更
- 推送到分支
- 创建Pull Request
📞 支持与反馈
- 功能建议: 通过Issues提交新功能建议
- 使用文档: 查看项目Wiki获取详细文档
📄 许可证
本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。
🎉 更新日志
v2.0.0 (计划中)
- 🎨 全新底部悬浮工具栏设计
- 🖱️ 类Figma的元素操作面板
- 📐 简化的三种布局模式
- ⌨️ 完整的快捷键操作体系
- 📱 增强的响应式设备预览
v1.0.0 (当前版本)
- ✅ 基础可视化HTML编辑功能
- ✅ 代码编辑器双向同步
- ✅ 元素拖拽重排
- ✅ 基础样式编辑
- ✅ 页面缩放功能
让HTML编辑像使用Figma一样直观！ 🚀
| |
