HTML Editor (HTML 可视化编辑器)

一个为前端开发者和UI设计师打造的现代化HTML可视化编辑工具，提供类似Figma的直观编辑体验。 仅支持通过tailwind编写的html

✨ 功能特色

🎯 核心功能

• 可视化编辑: 在WebView中直接编辑HTML元素，所见即所得
• 实时同步: 代码编辑器与可视化编辑器双向实时同步
• 类Figma体验: 直观的元素选择和悬浮操作面板
• 智能布局: 支持三种核心布局模式（默认流布局、Flex布局、绝对定位）

🛠️ 操作体验

• 底部悬浮工具栏: 释放编辑空间，提供便捷操作入口
• 元素操作面板: 样式、布局、属性三合一操作面板
• 拖拽重排: 流畅的元素拖拽和重新排列
• 快捷键支持: 完整的键盘快捷键操作体系
• 响应式预览: 多设备尺寸预览和切换

🚀 安装使用

安装方式

方式一：VSCode 扩展市场

1. 打开 VSCode
2. 进入扩展市场 (Ctrl+Shift+X)
3. 搜索 "vscode-html-editor" 或 "HTML Editor"
4. 找到发布者为 "demonduyu" 的扩展
5. 点击安装

方式二：命令行安装

code --install-extension demonduyu.vscode-html-editor

使用方法

启动编辑器

1. 在VSCode中打开任意HTML文件
2. 右键点击编辑器 → 选择 "使用HTML可视化编辑器打开"
3. 或使用命令面板 (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！

1. Fork 项目
2. 创建特性分支
3. 提交变更
4. 推送到分支
5. 创建Pull Request

📞 支持与反馈

• 功能建议: 通过Issues提交新功能建议
• 使用文档: 查看项目Wiki获取详细文档

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

🎉 更新日志

v2.0.0 (计划中)

• 🎨 全新底部悬浮工具栏设计
• 🖱️ 类Figma的元素操作面板
• 📐 简化的三种布局模式
• ⌨️ 完整的快捷键操作体系
• 📱 增强的响应式设备预览

v1.0.0 (当前版本)

• ✅ 基础可视化HTML编辑功能
• ✅ 代码编辑器双向同步
• ✅ 元素拖拽重排
• ✅ 基础样式编辑
• ✅ 页面缩放功能

---

让HTML编辑像使用Figma一样直观！ 🚀