# Slide Editor

> Visual editor for HTML presentations. Self-contained, offline-capable, designed for AI agent control. HTML 演示文稿可视化编辑器，自包含可离线，支持 AI Agent 控制。

- Skill: `dvcrn/slide-editor` (Agent Skill, multi-file: 20 files)
- Install (CLI): `npx skillmds@latest add dvcrn/slide-editor`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dvcrn/slide-editor/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: dvcrn (https://skillmd.com/u/dvcrn)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/dvcrn/slide-editor

---


# Slide Editor

[中文](#中文) | [English](#english)

---

## English

Visual editor for HTML presentations. Self-contained, offline-capable, designed for both AI agent control and direct user manipulation.

### Quick Start

When user wants to visually edit an HTML presentation:

```bash
# Inject editor and open in browser (one command)
~/projects/slide-editor/inject.ts <html-file> --inline --enable --open
```

This will:
1. Inject the editor bundle into the HTML file
2. Automatically open the browser with editor enabled

### CLI Commands

```bash
# Full workflow: inject + enable + open (recommended)
~/projects/slide-editor/inject.ts presentation.html --inline --enable --open

# Inline mode (single file, portable)
~/projects/slide-editor/inject.ts presentation.html --inline --enable

# Link mode (separate bundle file)
~/projects/slide-editor/inject.ts presentation.html --link --enable

# Remove editor from HTML
~/projects/slide-editor/inject.ts presentation.html --remove
```

### User Interaction

| Action | How |
|--------|-----|
| Select | Click on element |
| Move | Drag selected element |
| Resize | Drag 8 corner handles |
| Edit text | Double-click text |
| Delete | Delete/Backspace key |
| Undo | Ctrl/Cmd + Z |
| Redo | Ctrl/Cmd + Shift + Z |
| Toggle Panel | P key or Panel button |
| Toggle Theme | T key or Theme button |
| Deselect | Escape |

### Toolbar Buttons

| Button | Function |
|--------|----------|
| T | Add text box |
| Image | Add image (file picker) |
| Trash | Delete selected |
| Undo/Redo | History controls |
| Panel | Toggle properties panel |
| Theme | Toggle light/dark/auto theme |
| Export | Export as new HTML file |

### Workflow

1. **Inject**: Run inject.ts with `--open` flag
2. **Edit**: Make changes in browser (editor auto-enables)
3. **Export**: Click Export button
4. **Done**: File is downloaded to your downloads folder

### API Reference

All methods available via `window.__openclawEditor`:

#### Core
- `enable()` / `disable()` - Toggle editor
- `isEnabled()` - Check if active

#### Slides
- `addSlide(index?)` - Add new slide
- `deleteSlide(index)` - Delete slide
- `moveSlide(from, to)` - Reorder slide
- `duplicateSlide(index)` - Copy slide
- `getSlides()` - Get all slides
- `getCurrentSlide()` / `setCurrentSlide(index)` - Get/set current

#### Elements
- `addText(options)` - Add text box
- `addImage(options)` - Add image (supports local file via File picker)
- `deleteElement(id)` / `deleteSelected()` - Delete
- `moveElement(id, x, y)` - Move
- `resizeElement(id, w, h)` - Resize
- `setTextContent(id, content)` - Set text
- `setStyle(id, styles)` - Apply CSS
- `cropImage(id, rect)` - Crop image
- `bringToFront(id)` / `sendToBack(id)` - Layer order

#### Selection
- `selectElement(id)` / `deselectAll()`
- `getSelectedElement()` / `getSelectedElements()`

#### History
- `undo()` / `redo()`
- `canUndo()` / `canRedo()`

#### Export
- `export()` - Export clean HTML
- `exportWithEditor()` - Export with editor embedded

### Type Definitions

```typescript
interface TextOptions {
  x?: number; y?: number;
  width?: number; height?: number;
  content?: string;
  fontSize?: string;
  color?: string;
  fontWeight?: string;
  textAlign?: 'left' | 'center' | 'right';
}

interface ImageOptions {
  x?: number; y?: number;
  width?: number; height?: number;
  src: string;  // URL or data URI
  alt?: string;
}

interface CropRect {
  x: number; y: number;
  width: number; height: number;
}
```

### Examples

```javascript
// Add text
window.__openclawEditor.addText({
  x: 100, y: 200, width: 400,
  content: 'Hello World',
  fontSize: '48px'
});

// Move element
window.__openclawEditor.moveElement('editor-el-1', 150, 250);

// Export
const html = window.__openclawEditor.export();
```

---

## 中文

HTML 演示文稿的可视化编辑器。自包含、可离线使用，支持 AI Agent 控制和直接用户操作。

### 快速开始

当用户想要可视化编辑 HTML 演示文稿时：

```bash
# 注入编辑器并在浏览器中打开（一条命令）
~/projects/slide-editor/inject.ts <html文件> --inline --enable --open
```

这将：
1. 将编辑器包注入到 HTML 文件中
2. 自动打开浏览器并启用编辑器

### CLI 命令

```bash
# 完整流程：注入 + 启用 + 打开（推荐）
~/projects/slide-editor/inject.ts presentation.html --inline --enable --open

# 内联模式（单文件，便携）
~/projects/slide-editor/inject.ts presentation.html --inline --enable

# 链接模式（独立的 bundle 文件）
~/projects/slide-editor/inject.ts presentation.html --link --enable

# 从 HTML 中移除编辑器
~/projects/slide-editor/inject.ts presentation.html --remove
```

### 用户操作

| 操作 | 方法 |
|------|------|
| 选择 | 点击元素 |
| 移动 | 拖拽选中的元素 |
| 调整大小 | 拖拽 8 个角点手柄 |
| 编辑文本 | 双击文本 |
| 删除 | Delete/Backspace 键 |
| 撤销 | Ctrl/Cmd + Z |
| 重做 | Ctrl/Cmd + Shift + Z |
| 切换面板 | P 键或面板按钮 |
| 切换主题 | T 键或主题按钮 |
| 取消选择 | Escape |

### 工具栏按钮

| 按钮 | 功能 |
|------|------|
| T | 添加文本框 |
| 图片 | 添加图片（文件选择器） |
| 垃圾桶 | 删除选中 |
| 撤销/重做 | 历史控制 |
| 面板 | 切换属性面板 |
| 主题 | 切换亮/暗/自动主题 |
| 导出 | 导出为新的 HTML 文件 |

### 工作流程

1. **注入**：使用 `--open` 标志运行 inject.ts
2. **编辑**：在浏览器中进行更改（编辑器自动启用）
3. **导出**：点击导出按钮
4. **完成**：文件下载到你的下载文件夹

### API 参考

所有方法通过 `window.__openclawEditor` 访问：

#### 核心
- `enable()` / `disable()` - 切换编辑器
- `isEnabled()` - 检查是否激活

#### 幻灯片
- `addSlide(index?)` - 添加新幻灯片
- `deleteSlide(index)` - 删除幻灯片
- `moveSlide(from, to)` - 重新排序幻灯片
- `duplicateSlide(index)` - 复制幻灯片
- `getSlides()` - 获取所有幻灯片
- `getCurrentSlide()` / `setCurrentSlide(index)` - 获取/设置当前幻灯片

#### 元素
- `addText(options)` - 添加文本框
- `addImage(options)` - 添加图片（支持通过文件选择器选择本地文件）
- `deleteElement(id)` / `deleteSelected()` - 删除
- `moveElement(id, x, y)` - 移动
- `resizeElement(id, w, h)` - 调整大小
- `setTextContent(id, content)` - 设置文本
- `setStyle(id, styles)` - 应用 CSS
- `cropImage(id, rect)` - 裁剪图片
- `bringToFront(id)` / `sendToBack(id)` - 图层顺序

#### 选择
- `selectElement(id)` / `deselectAll()`
- `getSelectedElement()` / `getSelectedElements()`

#### 历史
- `undo()` / `redo()`
- `canUndo()` / `canRedo()`

#### 导出
- `export()` - 导出干净的 HTML
- `exportWithEditor()` - 导出带编辑器的 HTML

### 示例

```javascript
// 添加文本
window.__openclawEditor.addText({
  x: 100, y: 200, width: 400,
  content: '你好世界',
  fontSize: '48px'
});

// 移动元素
window.__openclawEditor.moveElement('editor-el-1', 150, 250);

// 导出
const html = window.__openclawEditor.export();
```