HtmlDrag 使用指南

欢迎使用 HtmlDrag 可视化 HTML 编辑器。本指南将帮助您从零开始，全面掌握账户管理、内容导入、可视化编辑和作品导出的完整流程。

一、账户与登录

开始使用 HtmlDrag 前，您需要创建一个账户。我们提供多种注册和登录方式，确保您能快速开始创作。

1.1 注册账号

HtmlDrag 采用邮箱注册方式，您只需填写几项基本信息即可完成账户创建，注册成功后自动登录并跳转到首页。

邮箱注册流程

在注册页面，按以下步骤完成账户创建：

1. 输入邮箱：填写您常用的邮箱地址，该邮箱将作为登录凭证和接收通知的渠道。请确保邮箱格式正确，如 [email protected]。
2. 设置密码：密码必须包含字母和数字，长度在 8-32 位之间。建议使用强密码以保障账户安全。
3. 确认密码：再次输入密码，确保两次输入一致。
4. 设置昵称（选填）：您可以自定义昵称，若不填写，系统将自动为您生成一个默认昵称。
5. 同意服务条款：勾选"我已阅读并同意《服务条款》和《隐私政策》"后，点击"立即注册"按钮完成注册。

注册页面：输入邮箱和基本信息完成注册

邮箱验证与积分奖励

注册成功后，系统会向您的邮箱发送一封验证邮件。完成邮箱验证后，您将获得注册积分奖励，可用于 AI 生成和 URL 导入等付费功能。如果没有收到邮件，请检查垃圾邮件文件夹；3 分钟后可点击"重新发送"按钮再次获取验证邮件。

提示：完成邮箱验证不仅能获得积分奖励，还能解锁完整使用体验并提升账号安全性。

1.2 登录账号

HtmlDrag 支持多种登录方式，您可以根据个人偏好选择最便捷的方式登录。

邮箱密码登录

使用注册时填写的邮箱和密码进行登录：

1. 在登录页面输入您的邮箱地址
2. 输入密码（可点击眼睛图标切换密码显示/隐藏）
3. 点击"登录"按钮完成登录

登录成功后，页面将自动跳转到首页，您可以开始创作。

第三方登录（Google / GitHub）

如果您希望更快捷地登录，可以使用 Google 或 GitHub 账号：

1. 使用 Google 账号登录：点击"使用 Google 账号登录"按钮，在弹出的 Google 授权页面中选择您的账号并确认授权。
2. 使用 GitHub 账号登录：点击"使用 GitHub 账号登录"按钮，页面将跳转到 GitHub 授权页面，确认授权后自动返回 HtmlDrag。

登录页面：支持邮箱密码和第三方账号登录

提示：使用 Google 或 GitHub 登录可自动创建账号，无需单独注册。首次使用第三方登录时，系统会自动为您创建一个关联账户。

忘记密码入口

如果您忘记了登录密码，可以点击登录页面右下方的"忘记密码？"链接，进入密码重置流程（详见 1.3 节）。

1.3 找回密码

如果您忘记了登录密码，可以通过邮箱验证码重置密码。整个流程在一个页面完成，无需跳转。

重置密码流程

按照以下步骤完成密码重置：

1. 输入邮箱：填写您注册时使用的邮箱地址
2. 获取验证码：点击"获取验证码"按钮，系统会向您的邮箱发送一封包含 6 位数字验证码的邮件
3. 输入验证码：在验证码输入框填入您收到的 6 位数字验证码
4. 设置新密码：输入新密码（必须包含字母和数字，长度 8-32 位）
5. 确认新密码：再次输入新密码确保一致
6. 点击"重置密码"：完成密码重置，系统提示成功后将自动跳转到登录页面

找回密码：通过邮箱验证码重置密码

验证码有效期

验证码有效期有限，请在收到邮件后尽快使用。如果验证码已过期，可以点击"重新发送"按钮获取新的验证码（需等待倒计时结束后才能重新发送）。

注意：如果您的邮箱尚未在系统中注册，将无法发送验证码。请确认输入的是注册时使用的邮箱地址。

二、个人中心

个人中心是管理您账户信息、作品和订单的统一入口。点击右上角头像即可进入。

个人中心：统一管理账户、作品和订单

2.1 个人资料

个人资料模块让您管理账户的基本信息，包括头像、昵称、邮箱、个人简介和密码设置。

头像修改

点击头像区域的"更换头像"按钮，选择本地图片文件上传。系统会自动裁剪并保存您的新头像。

昵称修改

点击昵称旁的编辑按钮，输入新的昵称后点击"保存"。昵称将在您的所有作品和评论中显示。

邮箱管理

邮箱区域显示当前绑定的邮箱地址及验证状态：

1. 已验证：邮箱已完成验证，可正常使用所有功能
2. 未验证：可点击"发送验证邮件"完成验证，验证后可获得积分奖励
3. 修改邮箱：需先验证当前邮箱，然后输入新邮箱地址完成更换

个人简介

在个人简介区域输入您的自我介绍（建议不超过 200 字），点击"保存"即可更新。

修改密码 / 设置密码

点击"修改密码"按钮打开密码设置对话框：

1. 已设置密码的用户：需输入当前密码，然后设置新密码（8-32位，包含字母和数字）
2. 未设置密码的用户：直接设置新密码即可，设置后可使用邮箱和密码登录

注销账号

如需注销账号，点击页面底部的"注销账号"按钮。出于安全考虑，需要先通过邮箱验证码验证身份。

注意：提交注销后，账号将进入保留期（通常为 30 天），期间无法登录。保留期结束后，系统会永久删除您的作品、积分和历史记录。

个人资料：管理头像、昵称、邮箱和密码

2.2 容量使用

容量使用模块展示您账户的存储使用情况，帮助您了解剩余空间并合理规划创作。

容量概览

顶部显示总体使用情况，包括：

1. 已用容量：当前已使用的存储空间
2. 总容量：您的账户存储上限（Pro享有更大容量）
3. 剩余容量：可用于创建新作品的空间
4. 已储存作品：当前保存的作品数量及上限

容量分布

系统将存储空间分为三类统计：

1. HTML 内容：作品的网页代码占用空间
2. 图片资源：上传的图片文件占用空间
3. 其他资源：其他附加资源占用空间

作品数量限制

Free和Pro的作品数量上限不同。当达到上限时，需删除部分作品或升级订阅后才能创建新作品。

容量刷新与升级

点击刷新按钮可更新容量信息。如需更大存储空间，可点击"升级扩容"按钮进入订阅中心选择适合的订阅方案。

提示：如果账户容量已满或作品数量达到上限，系统会冻结新增作品权限。请删除部分作品或升级订阅以恢复上传权限。

2.3 作品管理

作品管理模块集中展示您创建的所有作品，支持查看、编辑、分享和删除操作。

作品列表与筛选

作品以卡片或列表形式展示，您可以通过以下方式筛选：

1. 搜索：输入作品编码或标题进行搜索
2. 类型筛选：按 AI 生成、文件上传、URL 快照、代码粘贴等类型筛选
3. 日期范围：选择开始和结束日期筛选特定时间段的作品
4. 排序方式：支持按最新优先、最旧优先、点赞数、浏览量排序

作品管理：查看、筛选和管理所有作品

作品查看与编辑

点击作品卡片的"查看"按钮可预览作品效果。在预览界面中，您可以：

1. 修改作品标题（双击标题编辑）
2. 点击"编辑"按钮进入可视化编辑器继续编辑
3. 查看作品的历史保存记录并恢复到指定版本

分享状态管理

Pro可以分享作品，让其他人通过链接查看：

1. 启用分享：点击"分享"按钮生成分享链接，有效期为 7 天
2. 更新分享：已分享的作品可更新链接，刷新有效期
3. 停止分享：点击"停止分享"立即使链接失效

作品删除

点击作品卡片的"删除"按钮可删除作品。系统会弹出两次确认对话框以防止误删：

1. 第一次确认：询问是否删除该作品
2. 第二次确认：提醒作品删除后不可恢复

提示：同一时间最多删除 3 条记录。删除作品后，其占用的存储空间会被释放。

2.4 积分记录

积分记录模块展示您账户的积分交易历史，包括消耗和获取记录。

积分交易历史

积分记录以表格形式展示，包含以下信息：

1. 日期：积分变动的时间
2. 类型：积分变动的操作类型
3. 积分变化：增加（正数）或减少（负数）的积分数量
4. 描述：详细的变动说明

您可以通过日期范围筛选查看特定时间段的记录。

积分类型说明

1. AI 生成：使用 AI 生成功能时消耗积分
2. URL 快照：使用 URL 导入功能时消耗积分
3. 注册奖励：新用户注册并完成邮箱验证后获得的积分奖励
4. 平台赠送：平台赠送的积分
5. 订阅赠送：Pro每月赠送的积分额度
6. 购买积分：通过积分充值获得的积分
7. 管理员调整：由管理员手动调整的积分

积分记录：查看积分收支明细

提示：Pro每月可获得额外的赠送积分，积分可用于 AI 生成和 URL 导入等付费功能。

2.5 订单记录

订单记录模块展示您的购买历史和支付记录，方便您查询和管理订单。

订单管理

订单列表展示您的购买记录，您可以：

1. 查看订单状态和详情
2. 通过筛选功能快速查找特定订单
3. 对待支付订单继续完成支付
4. 关闭或删除不需要的订单

提示：如果订单支付遇到问题，可以关闭当前订单后重新下单。

2.6 我的作品

我的作品页面是您查看和管理所有创作的专属空间。通过左侧导航栏或用户菜单均可快速访问。

作品展示

页面以卡片形式展示您的所有作品，每个卡片包含：

1. 缩略图预览：作品的视觉预览，方便快速识别
2. 作品标题：显示作品名称，支持点击编辑
3. 创建时间：记录作品的创建日期
4. 分享状态：显示作品是否已开启分享

我的作品：集中查看和管理您的所有创作

快捷操作

每个作品卡片提供便捷的操作按钮：

1. 编辑：进入可视化编辑器继续创作
2. 分享：生成或管理分享链接（Pro专享）

三、栏目导航

HtmlDrag 提供多种方式将内容导入编辑器，覆盖从零创作到二次加工的所有场景。左侧导航栏可快速切换不同入口。

左侧导航：快速切换不同创建入口

3.1 主页

主页是 HtmlDrag 的默认入口，集成了 AI 生成功能。您可以在此输入文案内容，快速生成专业的网页设计。

3.2 URL 导入

URL 导入功能让您可以输入任意公开网页链接，系统会自动抓取页面内容并生成可编辑的作品。这是快速获取现有网页设计、进行二次加工的理想方式。

输入网址

在输入框中粘贴您要获取的网页地址。仅支持公开的 http/https 链接，内网或本地地址暂不支持。

URL 导入：输入网址，一键获取网页

积分扣除确认

点击"开始获取"后，系统会弹出积分扣除确认弹窗，显示本次操作所需积分、当前积分余额以及本月赠送积分余额。确认后将优先扣除本月赠送积分，不足部分从当前积分中扣除。

获取进度与状态

确认后系统开始获取页面内容。获取过程中请勿离开此页面，以免导致获取中断。获取成功后将自动跳转至编辑页面。

温馨提示：

部分网站无法获取：需要登录验证的网站、使用复杂前端框架的网站（如部分 SPA 应用）可能无法获取或获取不完整。

音视频类网站：音频、视频类网站的动态内容可能无法正常抓取。

页面过大：如果页面内容超出服务器允许的大小，获取可能失败，建议尝试更精简的页面。

3.3 文件上传

文件上传功能让您可以将本地的 HTML 文件导入 HtmlDrag，系统会进行安全扫描并生成可编辑的作品。适合已有 HTML 模板或邮件设计需要二次编辑的场景。

文件格式与大小限制

支持 .html 和 .htm 格式的文件。单个文件大小建议不超过系统限制（具体限制请参见上传界面提示）。上传文件入库会进行高级优化处理，实际占用空间可能明显大于原始文件，请确保剩余容量充足。

文件上传：拖拽或点击上传 HTML 文件

安全检测说明

系统会对上传的文件进行安全扫描，检测并移除潜在的恶意脚本、危险标签和可疑外部资源。根据风险等级（低风险、中风险、高风险、严重风险），系统会给出相应的提示或阻止保存。

注意：请勿上传包含恶意代码的文件，违规上传可能导致账号被封禁。

预览与保存

文件解析完成后，您可以在预览区查看效果。确认无误后点击"保存作品"，即可将作品保存至您的账户，随时进入可视化编辑器进行编辑。

3.4 代码粘贴

代码粘贴功能允许您直接粘贴 HTML 代码，系统会进行安全扫描并转换为可视化设计。这是最灵活的导入方式，适合开发者或需要精确控制代码的用户。

粘贴 HTML 代码

在代码输入区域粘贴您的 HTML 代码。您可以选择性地填写作品标题（如不填写，系统会使用默认名称"未命名作品"）。

代码粘贴：直接粘贴 HTML 代码开始编辑

安全检测说明

与文件上传类似，系统会对粘贴的代码进行安全检测。如果代码风险等级过高，系统安全策略将拒绝处理此内容，请检查代码后再试。

注意：请勿粘贴恶意代码或脚本，违规使用可能导致账号被封禁。

生成预览与保存

输入代码后，点击"生成预览"按钮。代码安全检测通过后，预览将自动生成。确认效果后点击"保存作品"即可将作品保存至账户。

3.5 AI创造

AI创造适合从已有素材开始：准备 PDF、PPT/PPTX、Excel/XLSX、CSV、Word、Markdown、TXT、JPG/PNG，或直接写一段自定义需求。提交前建议说明页面目标，例如资料整理、产品介绍、活动招募、课程报名、内部说明、数据摘要、销售跟进材料、作品集展示或临时测试页面。

1. 上传素材或输入需求，并补充目标用户、页面用途和风格方向。
2. 让 AI 提取重点内容，整理成标题、段落、列表、卡片和分区，而不是简单复制成一整段文字。
3. 检查生成结果，确认内容是否完整、层级是否合理，图片、表格和文本是否需要重排或删减。
4. 进入 HtmlDrag 画布继续精修，双击改字、替换图片、拖拽模块、调整颜色和版式。
5. 确认效果后保存、分享或下载 HTML。

不同素材适合不同处理方式：长文本适合先整理结构，表格适合转成摘要或对比模块，PPT 适合重组叙事顺序，图片适合拆成可编辑视觉块，PDF 适合把不方便修改的内容重新整理出来。

3.6 订阅中心

订阅中心页面是管理您的订阅和积分充值的入口。选择适合您的方案，解锁更多创作可能。

订阅方案

HtmlDrag 提供 Pro 和 Pro Max 订阅方案，订阅后可在有效期内使用对应权益：

Pro：适合常规创作者使用完整的 HTML 编辑、AI 生成、分享与导出能力。

Pro Max：适合更高频的 AI 创作、更大的项目和更高配额需求。

订阅会按照结账页展示的计费周期续订，您可以在账户或支付平台中管理或取消续订。

订阅中心：选择适合您的订阅方案

积分充值

如果您只需要临时使用 AI 生成或 URL 导入功能，可以选择积分充值。充值的积分永久有效，不会过期，积分不足时可随时充值，无需等待。

功能对比

Free 与 Pro 的主要功能差异如下：

积分使用说明

每次 AI 生成作品消耗固定积分。Free每月获得基础赠送积分，Pro每月获得更多赠送积分。充值的积分永久有效，不会过期，积分不足时可随时充值，无需等待额度恢复。

3.7 历史记录

在左侧导航栏中，"我的作品"（历史记录）是您快速访问过往创作的入口。这里按时间顺序列出了您所有的编辑记录。

快速选择编辑

点击列表中的任意记录，即可快速载入编辑器，继续之前的创作。无需重新导入或查找文件。

预览窗口详情

将鼠标悬停在历史记录条目上，会显示该作品的预览窗口。在预览窗口中，您可以：

1. 直接编辑标题：点击标题文字即可直接修改作品名称。
2. 查看分享状态：图标指示该作品是否已开启分享。
3. 快速操作：提供进入编辑、删除等快捷按钮。

历史记录：快速预览和管理过往作品

四、可视化编辑器

HtmlDrag 的核心是一个强大的所见即所得编辑器，让您在真实的 HTML 环境中直接操作，告别代码编辑的繁琐。

4.1 编辑器界面概览

编辑器采用经典的三栏式布局，左侧为导航与历史作品列表，中间为画布预览区，右侧为功能面板。顶部和底部分别提供作品操作和编辑控制按钮。

编辑器界面：左侧导航、中间画布、右侧面板

左侧导航与历史作品

左侧导航栏提供快速切换入口，点击"我的作品"可展开历史作品列表，支持快速定位和切换编辑。已分享的作品会显示"已分享"标识，方便您管理分享状态。

中间画布区域

画布区域是作品的实时预览窗口，您可以在此直接选中、拖拽、编辑页面元素。支持缩放和平移操作，通过底部的缩放控制器可调整视图比例。画布会实时反映您的所有编辑操作。

右侧面板（编辑/组件/管理/收藏）

右侧面板包含四个功能标签页：编辑（样式调整与模式切换）、组件（插入新元素）、管理（图层列表与批量操作）、收藏（个人组件库）。点击标签即可切换不同功能区。

顶部标题栏与操作按钮

顶部显示作品标题（双击可编辑），右侧提供分享、下载为图片、下载为 HTML 等快捷操作按钮。部分功能需要Pro 权限。

底部操作栏

底部操作栏提供预览（新窗口打开）、撤销、重做、刷新预览、还原至上次保存、还原 HTML 为最初状态、保存等核心编辑控制按钮。

4.2 基础操作

HtmlDrag 提供直观的可视化操作方式，通过鼠标悬停、单击、双击和右键即可完成大部分编辑任务。

元素识别

将鼠标悬停在画布上的任意元素上，系统会自动识别并显示虚线边框，帮助您快速定位可操作的元素。识别范围包括文本、图片、按钮、容器等各类 HTML 元素。

元素识别：鼠标悬停时显示虚线框

拖拽模式

单击任意元素即可进入拖拽模式，此时元素周围会显示选中边框和八个缩放手柄。您可以：直接拖动元素改变位置；拖动四角手柄等比缩放；拖动边缘手柄单向缩放。选中状态下，右侧"编辑"面板会显示该元素的样式属性供您调整。

拖拽模式：单击选中元素，自由移动和缩放

编辑模式

双击文本元素即可进入编辑模式，此时光标会定位到文本内部，您可以直接修改文字内容。编辑模式下，右侧面板会显示文字样式工具，支持字体、字号、颜色、加粗、斜体等格式调整。点击元素外部区域或按 Esc 键可退出编辑模式。

编辑模式：双击进入，直接编辑文本内容

快捷菜单

右键点击选中的元素可打开快捷菜单，提供复制、粘贴、收藏、链接编辑、图层调整、锁定、隐藏、删除等常用操作。详细说明请参见 4.9 右键快捷菜单。

批量操作

按住 Shift 键并依次点击多个元素，可同时选中多个对象进行批量操作。多选状态下，右侧面板会显示对齐工具（左缘对齐、水平居中、右缘对齐、上缘对齐、垂直居中、下缘对齐、水平/垂直平均分布），方便您快速对齐和排列元素。

批量操作：按住 Shift 点击多选元素

4.3 我的作品快捷操作栏

编辑器左侧提供“我的作品”快捷操作栏，支持展开/收起和快速切换作品，方便您在多个创作之间流畅跳转。

展开与收起

点击左上角的“我的作品”按钮，可展开作品列表侧边栏。再次点击或点击侧边栏外的区域即可收起。展开状态下，您可以直观地浏览历史作品缩略图和标题。

作品切换

在列表中点击任意作品卡片，编辑器将立即加载该作品的内容。这使您无需返回首页或个人中心，即可在不同设计方案之间快速比对和修改。

4.4 画布快捷键

熟练使用快捷键可以大幅提升编辑效率。以下是画布区域支持的主要快捷键操作：

4.5 右侧面板 - 编辑栏目

"编辑"栏目是最常用的功能区，提供模式切换开关和丰富的样式调整工具。选中元素后，面板会根据元素类型智能显示对应的编辑选项。

编辑栏目：模式切换与样式工具

模式切换

面板顶部提供四个模式开关，用于控制编辑器的交互行为。每个开关都可独立开启或关闭，开关状态会通过消息提示告知当前状态。

提示：为了编辑组件，系统已默认阻止作品里的链接跳转。如需要开启，可在编辑台区域打开"链接跳转"开关。编辑模式下表单提交也会被阻止，以保护您的编辑内容。

文字样式

选中文本元素或进入编辑模式后，面板会显示完整的文字样式工具。支持以下格式调整：

文字样式：字体、字号、颜色等设置

元素样式

选中任意元素后，可通过元素样式工具调整其外观属性：

图片样式

选中图片元素后，可调整图片的显示方式和进行图片替换：

表格样式

选中表格或表格单元格后，可使用专用的表格编辑工具调整表格结构和样式。详细说明请参见 4.10 表格编辑。

表格样式：行列操作、边框和单元格设置

链接编辑

可为任意元素添加点击跳转链接，或编辑已有链接：

对齐工具（多选时可用）

当选中多个元素时，面板会显示对齐和分布工具，帮助您快速整理元素布局：

4.6 右侧面板 - 组件栏目

"组件"栏目提供各类可插入元素的快捷入口，帮助您快速向画布添加新内容。点击对应按钮即可在画布中插入相应组件。

组件栏目：一键插入各类元素

4.7 右侧面板 - 管理栏目

"管理"栏目提供画布中所有可编辑元素的列表视图，支持筛选、批量操作和精确定位，是管理复杂页面元素的利器。

管理栏目：图层管理与批量操作

元素卡片列表

面板以卡片形式列出页面中所有可管理的元素。每张卡片显示元素的标签类型（如 DIV、IMG、SPAN）和层级信息，文本元素还会显示内容预览。装饰层元素会标注"装饰"徽章。卡片右侧提供锁定/解锁和隐藏/显示的快捷操作图标。

筛选功能

点击筛选按钮可按元素状态过滤列表，支持以下筛选条件：

批量操作

在卡片列表中勾选多个元素后，可使用批量操作按钮进行统一处理：

精准识别开关

管理栏目提供精准识别开关，用于控制元素识别的精度：

点击卡片定位元素

点击任意元素卡片，画布会自动滚动并高亮显示对应的元素，方便您快速定位页面中的特定组件。这在处理复杂或层叠的页面布局时特别有用。

4.8 右侧面板 - 收藏栏目

"收藏"栏目是您的个人组件库，可以将常用的元素或组件收藏起来，在不同作品中重复使用，提高创作效率。

收藏栏目：个人组件库

收藏组件列表

面板以卡片形式展示您收藏的所有组件，每张卡片显示组件的缩略图和名称。收藏时系统会自动生成缩略图，未命名的组件显示为"未命名"。

搜索收藏

使用搜索框可以按名称快速查找收藏的组件。输入关键词后，列表会实时过滤显示匹配的结果。

插入收藏组件

点击收藏卡片上的"插入"按钮，即可将该组件插入到当前画布中。插入后的组件可以正常编辑和调整。

重命名/删除收藏

每张收藏卡片提供"重命名"和"删除"操作。点击重命名可修改组件名称，方便后续查找；删除操作会永久移除该收藏，请谨慎操作。

如何收藏组件

在画布中选中任意元素，通过右键菜单选择"收藏"，即可将该元素及其子元素作为组件保存到收藏库。收藏成功后会显示"已添加到收藏"提示。

4.9 右键快捷菜单

右键点击选中的元素会弹出快捷菜单，提供常用操作的快速入口。菜单内容会根据选中元素的类型动态调整。

右键菜单：快速访问常用操作

表格专属菜单

当右键点击表格单元格时，菜单会额外显示表格专属操作：

4.10 表格编辑

选中表格或表格单元格后，右侧面板会显示专用的表格编辑工具，提供完整的表格样式和结构调整功能。

表格编辑：行列操作与样式设置

行列操作

表格编辑面板的"行列操作"区域提供以下功能：

合并/拆分单元格

选中多个相邻单元格后，可使用"合并单元格"将它们合并为一个单元格。对于已合并的单元格，可使用"拆分单元格"将其还原为原始的多个单元格。

单元格对齐

设置单元格内容的对齐方式，分为水平和垂直两个维度：

边框样式

自定义表格边框的外观，包括：

设置完成后点击"应用"按钮生效。

单元格底纹

为单元格设置背景颜色，通过颜色选择器选择所需的底纹色，适合用于突出显示表头或重要数据行。

4.11 缩放控制与视口

缩放控制器位于画布底部，提供画布缩放和视口尺寸调整功能，帮助您在不同设备尺寸下预览作品效果。

缩放控制：调整画布缩放和视口尺寸

放大/缩小/重置

使用"+"和"-"按钮可放大或缩小画布视图，也可以按住 Ctrl/Cmd + 鼠标滚轮快速缩放。点击百分比数字可重置为默认缩放比例。按住空格键 + 鼠标拖拽可平移画布。

视口尺寸预设

点击视口选择器可切换不同的预览尺寸，模拟在不同设备上的显示效果：

预览补丁

对于特殊结构的 HTML 页面，系统提供三种预览补丁来优化显示效果。启用或关闭补丁后，系统会自动保存并刷新预览：

提示：如果补丁效果不明显，可执行一次"还原 HTML 为最初状态"后再尝试启用。

4.12 HTML 源码编辑器

HTML 源码编辑器允许您直接查看和编辑作品的完整 HTML 代码，适合需要精细调整或添加自定义代码的高级用户。此功能仅对Pro开放。

HTML 编辑器：直接编辑源代码（Pro）

查看/编辑完整 HTML

打开 HTML 编辑器后，会显示当前作品的完整 HTML 源代码（包含 <!DOCTYPE html>）。您可以直接在编辑器中修改代码，保存后即可应用更改。

搜索与替换

使用 Ctrl+F 打开查找功能，输入关键词可快速定位代码位置。使用 Ctrl+H 打开替换功能，可批量替换文本内容。工具栏显示匹配计数（如 "3 / 15"），支持逐个或全部替换。

跳转到行

使用 Ctrl+G 或工具栏的跳转功能，输入行号可快速定位到指定行，方便处理大型 HTML 文件。

区分大小写

搜索时可开启"区分大小写"选项，精确匹配大小写敏感的内容。

自动换行

开启自动换行后，过长的代码行会自动折行显示，无需水平滚动即可查看完整内容。

复制/保存

点击"复制 HTML"可将完整源代码复制到剪贴板。编辑完成后，点击保存按钮将更改应用到作品。如果内容为空或存在语法错误，保存时会提示相应信息。

注意：如果 HTML 内容过大超出容量限制，保存时会提示"容量不足，无法保存此次编辑"。请删除不必要的内容或升级订阅以扩容。

4.13 底部操作栏

底部操作栏提供编辑器最核心的操作按钮，包括预览、撤销/重做、还原和保存等功能。

底部操作栏：预览、保存与还原

预览（新窗口打开）

点击预览按钮会在新窗口中打开作品的完整预览页面，展示作品的真实显示效果。预览页面会显示临时预览提示，提醒用户这是编辑阶段的预览，链接不可复用。

撤销/重做

撤销可回退上一步操作，重做可恢复被撤销的操作。支持多步撤销/重做。也可使用快捷键 Ctrl+Z（撤销）和 Ctrl+Y（重做）。

刷新预览

点击刷新按钮会重新加载预览区域。系统会先保存当前内容，然后刷新画布显示最新效果。适合在进行大量编辑后同步显示状态。

还原至上一次保存

将作品恢复到上一次手动保存的状态。所有未保存的编辑都会丢失，请谨慎操作。系统会在执行前提示确认。

还原 HTML 为最初状态

将作品的 HTML 恢复到首次创建时的原始状态。所有编辑历史都会清除。此操作不可逆，请确保已备份重要内容。

保存

手动保存当前作品的所有更改。系统也支持自动保存，但建议在完成重要编辑后手动保存确保数据安全。保存成功后会显示"保存成功"提示。

4.14 顶部操作栏

顶部操作栏显示作品信息和快捷操作按钮，提供分享和下载功能的快速入口。

顶部操作栏：标题、分享与下载

作品标题（双击编辑）

顶部显示当前作品的标题，双击标题区域可进入编辑模式，修改作品名称。标题不能为空，修改成功后会显示"标题修改成功"提示。未命名的作品显示为"未命名作品"。

分享按钮

点击分享按钮可开启作品分享功能，生成可访问的分享链接。详细说明请参见 4.16 分享功能。此功能仅对Pro开放。

下载按钮

右侧提供“下载图片”和“下载 HTML”按钮。详细下载选项和说明请参见 4.15 下载作品。

4.15 下载作品

HtmlDrag 提供灵活的导出选项，您可以将作品下载为图片或标准 HTML 文件，满足分享、存档或进一步开发的需求。

下载为图片

点击顶部栏的“下载图片”按钮，系统会将当前画布的完整内容生成一张高清 PNG 图片并自动下载。这非常适合用于设计稿展示、社交媒体分享或作为预览图。

下载为 HTML

Pro可以将作品导出为标准的 HTML 源代码文件。点击“下载 HTML”按钮，系统会提供两种选择：

1. 下载当前 HTML：包含您在编辑器中所做的所有修改和调整，所见即所得。
2. 下载原始 HTML：导出作品最初创建时的原始代码，不包含后续的编辑内容。

下载选项：选择下载当前编辑版本或原始版本

4.16 分享功能

分享功能允许您将作品生成一个公开访问的链接，方便与他人分享您的创作成果。分享页面还提供访问统计数据。此功能仅对Pro开放。

分享设置：管理分享链接和状态

分享设置与管理

1. 开启分享：点击分享按钮后，系统会生成一个唯一的分享链接。首次开启时会显示“分享已启用，链接已复制到剪贴板”提示。
2. 有效期：分享链接默认有效期为 7 天。您可以在分享弹窗中查看具体的过期时间。
3. 更新时间：如果链接即将过期，或者您希望延长分享时间，可点击“更新分享链接”重置有效期。
4. 停止分享：点击“停止分享”可立即使当前链接失效，访问者将无法再查看该作品。
5. 复制链接：点击复制按钮可将分享链接复制到剪贴板。

分享页面与统计

访问者打开分享链接后，将看到作品的独立展示页面。页面右侧边栏显示作品信息，包括：

1. 作品标题与作者：展示您的昵称和作品标题。
2. 访问数据：您可以查看到作品的浏览量和点赞数，了解作品的受欢迎程度。
3. 过期时间：显示分享链接的失效时间。

分享页面：访客视角与数据统计

注意：如果作品因被举报并核实违规内容，系统可能会禁止该作品的分享功能，并提示"该作品因被举报并核实，已被系统禁止分享"。

五、其他功能

除了核心编辑功能外，HtmlDrag 还提供消息和意见反馈等辅助功能，帮助您及时获取系统通知并与我们沟通。

5.1 消息

消息模块用于接收系统发送的重要通知，包括账户状态、订单提醒、订阅到期提醒以及功能更新公告等。

消息：接收系统通知和提醒

系统消息列表

消息列表按时间倒序排列，展示消息的标题、摘要、创建时间及过期时间。点击单条消息可查看详情或进行相关操作（如"继续支付"、"前往续费"等）。

未读筛选

勾选列表右上角的"只看未读"复选框，可快速筛选出所有未读消息，帮助您聚焦重要通知。

全部标记已读

点击"全部标记已读"按钮，可一键将当前列表中的所有消息状态更新为已读，消除红点提示。

消息详情

点击消息卡片进入详情页，查看完整的通知内容。对于订单或订阅相关的消息，详情页通常会提供快捷跳转按钮，方便您处理相关事务。

5.2 意见反馈

如果您在使用过程中遇到问题或有功能建议，可以通过意见反馈模块提交给我们。支持上传图片以更直观地描述问题。

意见反馈：提交问题或建议

反馈列表与状态

反馈列表展示您提交的所有历史反馈及其当前状态。状态包括：

1. 处理中：反馈已提交，等待管理员查阅。
2. 已回复：管理员已对您的反馈进行了回复，请点击查看。
3. 已关闭：该反馈已归档或问题已解决，无法继续回复。

提交新反馈

点击"新建反馈"按钮，填写反馈内容（必填，至少10个字）。您还可以点击"上传图片"添加相关截图（最多支持上传特定数量的图片，单张大小限制为2MB），帮助我们更快定位问题。填写完成后点击"提交反馈"。

反馈详情与对话记录

点击反馈列表项进入详情页，您可以查看完整的对话记录，包括您的提问和管理员的回复。页面上方会显示反馈ID和附件图片预览。

继续回复

对于"处理中"或"已回复"状态的反馈，您可以在详情页底部的输入框中继续补充内容或回复管理员，保持沟通直至问题解决。

在提交反馈时，您可以选择添加相关截图或文件，帮助我们更好地理解您的需求。同时，您也可以在反馈详情页中查看管理员的回复和对话记录，方便您跟踪问题的处理进展。

我们重视每一条反馈，并会尽快处理您的反馈。感谢您的参与和支持！

六、系统提示

在使用过程中，您可能会遇到系统发出的各类检测提示或限制提醒。以下是常见系统提示的说明与应对建议。

6.1 HTML 检测提示

为了保证导入效果和编辑体验，系统会在导入 URL 或上传文件时进行自动检测，并对潜在问题发出提示。

本地资源检测

如果导入的页面包含本地路径（如 file:// 或 C:/ 开头的图片/CSS链接），系统会提示资源无法加载。建议：确保所有资源均使用公开的 HTTP/HTTPS 网络链接。

图片防盗链提示

部分网站对图片启用了防盗链保护，导致在编辑器中无法显示。建议：使用"替换图片"功能上传本地图片，或将图片转存到可公开访问的图床。

动态渲染页面（SPA）提示

对于完全依赖 JavaScript 动态渲染的单页应用（SPA），由于无法直接抓取其动态生成的 DOM 结构，可能会导致导入内容为空或不完整。建议：尝试使用"粘贴代码"功能，在浏览器中复制渲染后的完整 HTML 代码进行导入。

外部字体/图标库提示

如果页面使用了特殊的网络字体或图标库且未正确跨域授权（CORS），可能会显示为默认字体或乱码。建议：在编辑器中使用系统内置的字体和图标库进行替换。

嵌入内容（iframe）提示

出于安全考虑，部分嵌入的 iframe 内容可能会被拦截或无法交互。系统会尽可能保留占位符。

6.2 容量与限制

HtmlDrag 对不同账户等级设有相应的资源配额限制。当达到限制时，系统会弹出"容量不足，操作未完成"或"作品数量上限"的提示对话框。

容量不足处理

当您的存储空间不足时，将无法保存新的编辑内容或上传文件。解决方法：

1. 进入"我的作品"删除不再需要的旧作品以释放空间。
2. 点击提示框中的"升级订阅"按钮，订阅 Pro 以获取更大的存储容量。

作品数量上限

Free 用户可保存的作品数量有限。达到上限后，需删除旧作品才能创建新作品，或升级订阅以提升作品数量限制。

图片上传限制

上传图片时，系统会检查单张图片大小及批量上传总大小。如果提示"文件内容超过服务器允许的大小"或"批量大小不可超过限制"，请压缩图片或分批上传。Pro通常拥有更高的单文件上传额度。

6.3 安全检测

系统内置了强大的安全扫描机制（Security Scan），在导入 URL、上传文件或粘贴代码时会自动评估内容的风险等级，以保护您的账户安全。

风险等级说明

扫描完成后，系统会根据检测到的威胁类型（如 XSS 攻击、恶意脚本注入、危险 HTML 标签等）判定风险等级：

1. 低风险：检测到轻微告警，通常不影响使用，建议确认后继续。
2. 中风险：存在潜在隐患，需谨慎操作。
3. 高风险：检测到严重安全风险，建议仅在完全信任来源的情况下继续。
4. 严重风险：包含极高风险的恶意内容（如恶意软件站点、网络钓鱼特征），系统将直接拒绝处理并阻止保存。

安全加载模式

对于存在一定风险但可处理的文件，系统会提供"安全保障措施"，包括自动清理危险脚本与标签（Auto Sanitize）。您可以选择"采用安全加载模式"继续，系统将移除可疑代码并尽可能保留页面原本的视觉与功能，确保您能在编辑器内安全地进行修改。

开始使用 HtmlDrag

HtmlDrag 提供慷慨的免费配额，新用户注册即可获得赠送积分

体验 AI 生成和 URL 抓取功能。可视化编辑功能完全免费，无限制使用。

立即开始创作

HtmlDrag 使用指南涵盖账户注册登录、个人中心管理、AI生成、URL导入、文件上传、代码粘贴、订阅中心等创建入口，以及可视化编辑器的完整操作说明，包括元素识别、拖拽缩放、文字编辑、图片替换、样式调整、图层管理、表格编辑、HTML源码编辑、分享导出等核心功能。适合独立开发者、营销人员、设计师等用户快速上手使用。