Html Editor

轻量级 HTML 可视化编辑器（Electron 桌面应用）：实时预览 + 语法高亮 + 可视化编辑。

特性

• 三模式工作流：编辑 / 预览 / 批注，标题栏分段控件一键切换
• 实时预览：sandbox iframe + 注入脚本，所见即所得
• 可视化编辑：点击选中元素、属性编辑、元素树、拖拽缩放/平移
• 代码编辑：Monaco Editor 本地加载（无 CDN），支持语法高亮
• 撤销重做：50 步历史，自动入栈 + 防抖合并
• 多标签页：打开多个文件，拖放打开、标签页管理
• 打标批注：页面元素标注，保存时注入查看脚本
• 双主题：GitHub Dark / Light

快速开始

npm install
npx electron .

项目结构

├── main.js              # Electron 主进程（窗口/文件 IPC）
├── preload.js           # contextBridge 暴露 editorAPI
├── renderer/
│   ├── index.html       # 主界面
│   ├── style.css        # 样式（GitHub Dark/Light 双主题）
│   ├── app.js           # 渲染层逻辑（编辑/预览/批注）
│   └── vendor/          # 本地化资源（remixicon 图标）
└── assets/              # 应用图标

技术要点

• Electron 33，无边框窗口（titleBarStyle hidden + titleBarOverlay）
• 渲染层零框架：原生 HTML + CSS + JS
• 预览 iframe 与主进程通过 postMessage（__vis_ 前缀）双向通信
• Monaco 本地加载（node_modules/monaco-editor/min/vs），file:// 下用空 Worker

License

MIT © 吴鹏波 (Wu Pengbo)