Slide Editor

English

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

Installation

Prerequisites: Install bun first (required for running the injector).

bash

macOS/Linux

curl -fsSL https://bun.sh/install | bash

Windows (PowerShell)

powershell -c irm bun.sh/install.ps1 | iex

Or use npm

npm install -g bun

Then install and build:

bash

Clone or download this project

cd slide-editor

Install dependencies and build (use bun, not npm)

bun install bun run build

Quick Start

When user wants to visually edit an HTML presentation:

bash

Inject editor and open in browser (one command)

bun ~/projects/slide-editor/inject.ts --inline --enable --open

This will:

1. Inject the editor bundle into the HTML file
Automatically open the browser with editor enabled

CLI Commands

bash

Full workflow: inject + enable + open (recommended)

bun ~/projects/slide-editor/inject.ts presentation.html --inline --enable --open

Inline mode (single file, portable)

bun ~/projects/slide-editor/inject.ts presentation.html --inline --enable

Link mode (separate bundle file)

bun ~/projects/slide-editor/inject.ts presentation.html --link --enable

Remove editor from HTML

bun ~/projects/slide-editor/inject.ts presentation.html --remove

User Interaction

Action	How
Select	Click on element
Move

Toolbar Buttons

Button	Function
T	Add text box
Image

Workflow

1. Inject: Run inject.ts with --open flag
Edit: Make changes in browser (editor auto-enables)
Export: Click Export button
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 控制和直接用户操作。

安装

前置条件：先安装 bun（运行注入器必需）。

bash

macOS/Linux

curl -fsSL https://bun.sh/install | bash

Windows (PowerShell)

powershell -c irm bun.sh/install.ps1 | iex

或使用 npm

npm install -g bun

然后安装和构建：

bash

克隆或下载此项目

cd slide-editor

安装依赖并构建（使用 bun，不要用 npm）

bun install bun run build

快速开始

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

bash

注入编辑器并在浏览器中打开（一条命令）

bun ~/projects/slide-editor/inject.ts --inline --enable --open

这将：

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

CLI 命令

bash

完整流程：注入 + 启用 + 打开（推荐）

bun ~/projects/slide-editor/inject.ts presentation.html --inline --enable --open

内联模式（单文件，便携）

bun ~/projects/slide-editor/inject.ts presentation.html --inline --enable

链接模式（独立的 bundle 文件）

bun ~/projects/slide-editor/inject.ts presentation.html --link --enable

从 HTML 中移除编辑器

bun ~/projects/slide-editor/inject.ts presentation.html --remove

用户操作

操作	方法
选择	点击元素
移动

工具栏按钮

按钮	功能
T	添加文本框
图片

工作流程

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

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

幻灯片编辑器

幻灯片编辑器

Slide Editor

English

Installation

Quick Start

CLI Commands

User Interaction

Toolbar Buttons

Workflow

API Reference

Core

Slides

Elements

Selection

History

Export

Type Definitions

Examples

中文

安装

快速开始

CLI 命令

用户操作

工具栏按钮

工作流程

API 参考

核心

幻灯片

元素

选择

历史

导出

示例

Slide Editor

English

Installation

macOS/Linux

Windows (PowerShell)

Or use npm

Clone or download this project

Install dependencies and build (use bun, not npm)

Quick Start

Inject editor and open in browser (one command)

CLI Commands

Full workflow: inject + enable + open (recommended)

Inline mode (single file, portable)

Link mode (separate bundle file)

Remove editor from HTML

User Interaction

Toolbar Buttons

Workflow

API Reference

Core

Slides

Elements

Selection

History

Export

Type Definitions

Examples

中文

安装

macOS/Linux

Windows (PowerShell)

或使用 npm

克隆或下载此项目

安装依赖并构建（使用 bun，不要用 npm）

快速开始

注入编辑器并在浏览器中打开（一条命令）

CLI 命令

完整流程：注入 + 启用 + 打开（推荐）

内联模式（单文件，便携）

链接模式（独立的 bundle 文件）

从 HTML 中移除编辑器

用户操作

工具栏按钮

工作流程

API 参考

核心