触发关键词

当用户提到以下内容时使用此技能：

• 可编辑PPT / HTML幻灯片编辑 / inline edit slides
• html-ppt-editable / HTML可编辑
• 明确要求在浏览器中修改 HTML 幻灯片文字

html-ppt-editable

在任意 HTML 演示文稿的基础上，追加浏览器内联编辑能力。

核心特性

• 编辑按钮隐藏式：默认完全隐藏，鼠标移入左上角 90×90px 区域才淡入显现，移开 500ms 后自动淡出
• 键盘快捷键：按 E 进入/退出编辑，Ctrl+S 下载保存
• contentEditable：点击文字直接修改，修改后虚线边框提示
• localStorage：自动保存编辑状态
• 零依赖：纯原生 JS，无任何外部库

为什么不用 CSS ~ 选择器

.hotzone:hover ~ .toggle 会失效——鼠标从热区移向按钮时，先离开热区，按钮立刻消失，根本点不到。

正确做法：JS 500ms 延迟隐藏

let hideTimer = null;

document.addEventListener('mousemove', (e) => {
  // 热区 → 显示
  if (e.clientX < 90 && e.clientY < 90) {
    clearTimeout(hideTimer);
    btn.classList.add('show');
  } else {
    // 热区外 + 非按钮/非编辑区 → 延迟隐藏
    if (!isEditing && !e.target.closest('.edit-btn')) scheduleHide();
  }
});

function scheduleHide() {
  hideTimer = setTimeout(() => {
    if (!isEditing) btn.classList.remove('show');
  }, 500); // 宽限期，让用户移动到按钮
}

集成步骤

在 HTML 演示文稿的 前追加三块代码：

Step 1: HTML（在 前插入）

<!-- 编辑按钮（完全隐藏，鼠标移入左上角区域显现） -->
<button class="edit-btn" id="editBtn" title="按 E 进入编辑模式">✏️</button>
<span class="edit-hint">按 E 键进入编辑 · Ctrl+S 保存</span>

<!-- 保存操作条 -->
<div class="save-banner" id="saveBanner">
  <span>编辑模式 · 点击文字直接修改</span>
  <button id="saveBtn">💾 保存下载</button>
  <button class="secondary" id="exitBtn">退出</button>
</div>

Step 2: CSS（在