> For the complete documentation index, see [llms.txt](https://helps.ptengine.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://helps.ptengine.com/cn/experience/campaign/create-new/notes-html.md).

# HTML 编辑

## HTML 编辑

在页面编辑功能中，可以直接编辑 HTML 代码。

编辑后的代码可以通过 Ptengine 反映到生产环境。

对于具有 HTML 知识的人来说，这是一项非常便利的功能，但如果缺乏适当的知识或经验，可能会导致意外的故障和问题，请务必注意。

### **交互式内容的故障**

#### **什么是交互式内容**

指响应用户点击或鼠标悬停等操作而工作的内容或功能。

具体来说，以下元素适用：

* 导航菜单
* 手风琴面板
* 添加到购物车按钮
* 购买按钮
* 输入表单
* 各类链接

### **情况说明**

HTML 编辑存在以下风险，请务必谨慎：

**对 JavaScript 事件的影响** 编辑某些元素可能会导致以下动态功能无法正常工作。

* 滑块功能
* 弹窗的显示/隐藏

等其他交互功能

**对模块结构的影响** 更改 HTML 结构可能会导致以下问题：

* 标签页切换功能停止
* 导航菜单崩坏
* 布局混乱
* 模块间关联功能异常

为了防止这些问题，请在编辑时注意以下几点：

* 编辑前充分确认目标元素的功能和角色
* 仅进行必要的最小更改
* 编辑后必须进行操作确认（预览功能）

### HTML 安全编辑的最佳实践

**1. 最小化编辑交互式元素**

更改与 JavaScript 连动的元素时需特别注意

更改后需要重新应用 JavaScript 事件

如果要实现类似的功能，建议使用"代码模式"添加新的代码

**2. 在单个元素级别进行编辑**

即使需要更改多个内容，也应尽可能避免编辑更高层级（父元素）

单独编辑需要更改的每个元素具有以下优势：

* 能够维持整个页面的结构
* 能够将意外影响降至最低
* 当出现问题时易于识别和修复

**3. HTML 编辑的推荐方法**

例如，我们将以更改下面图像中红色框内的 3 个内容为例进行说明。

✅ **推荐：单个元素编辑**

分别单独更改元素 1、2、3（3 次操作）

* 安全性高
* 影响范围有限
* 易于在出现问题时进行识别
* 易于撤销更改

**❌ 不推荐：批量编辑**

选择上层次一次性编辑（1 次操作）

> **批量编辑的风险**
>
> **结构崩坏**
>
> * 页面布局容易被破坏
> * 容易发生意外副作用
>
> **对交互式元素的影响**
>
> * JavaScript 事件误作动
> * 动态功能停止

**注意事项**

批量编辑可以缩短工作时间，但存在以下缺点：

* 破坏页面结构的风险高
* 修正可能需要花费大量时间
* 测试和验证工作变得复杂

## **复制和粘贴**

可以自由复制页面内的元素，并将其粘贴到另一个位置。

该功能非常方便，但如果使用不当，可能会导致意外问题。以下是主要注意事项。

### **关于 ID 重复**

复制元素时，如果该元素设置了 ID，则同一页面上将存在多个具有相同 ID 的元素。根据 W3C 标准，ID 在一个页面内必须是唯一的，因此重复可能会导致故障。

#### **可能的问题**

与 ID 关联的事件处理无法正确工作

复制的元素无法执行预期的操作或交互

#### **推荐的使用方法**

粘贴元素后，确认 HTML

检查是否包含 ID 属性

如果存在 ID，请将其更改为不重复的新值

```jsx
function findDuplicateIds() {
    // 获取页面上的所有元素
    const allElements = document.querySelectorAll('*');
    const idMap = {};
    // 迭代所有元素，检查是否有重复的ID
    allElements.forEach((element) => {
        const id = element.id;
        if (id) {
            if (idMap[id]) {
                // 如果存在重复的ID，则输出该ID
                console.log(`页面上有重复的ID元素：${id}`);
            } else {
                // 如果不存在重复的ID，则添加到ID映射中。
                idMap[id] = true;
            }
        }
    });
}
// 调用查找重复ID的方法
findDuplicateIds();
```

可以使用上面的代码通过以下步骤确认页面内是否存在 ID 重复的元素。

对目标网站打开开发者工具

Windows/Linux 情况：F12 键或 Ctrl + Shift + I

Mac 情况：Command + Option + I

选择"Console"（控制台）选项卡

将上面的代码复制并粘贴到控制台

按 Enter 键执行

> **如果存在 ID 重复**： 将显示消息"页面上存在重复 ID 的元素：\[重复的 ID]"。
>
> **如果不存在 ID 重复**： 不会显示特殊消息。

### **样式的继承**

复制和粘贴元素时，外观和位置可能与原始元素不同。

例如，在页面内移动产品信息时：

产品图像大小改变

价格显示位置偏移

说明文本的格式破坏

为了防止这些问题，需要确保样式设置得到正确继承。

#### **保持样式的要点**

移动元素时，以下两种方法可以有效维持样式：

* CSS 审查 确认样式应用情况，调整选择器，确认元素之间的关系
* 直接设置样式 在 HTML 中直接指定样式，尽量保持结构简洁，最小化移动的影响

通过这些方法，可以保持一致的设计。

### **交互功能同步不良**

复制元素并将其放置在新位置时，原始元素拥有的操作功能可能无法正确工作。例如，如果复制"添加到购物车"按钮，单击新位置上的按钮可能不会有任何反应。

#### **情况说明**

原始元素中设置的操作功能（例如：添加到购物车、订购产品、收藏注册等）通常不会在仅复制并将其放置在新位置时直接发挥作用。这是因为只有元素的外观被复制，而在其后台运行的处理设置没有被继承。

#### **推荐的处理方法**

**避免处理交互式元素**

建议尽可能避免复制具有操作功能的元素（如按钮或表单）。

**如果必须复制**

请使用 JavaScript 添加代码，以便新粘贴的元素可以执行交互事件。

添加代码时，可以使用以下类型的代码模式执行。

以下是如何将 JavaScript 交互事件添加到元素的简单说明。

打开浏览器的开发者工具

在元素面板中选择目标元素

确认事件侦听器部分：

* 找到必要的事件类型
* 确认相关的 JavaScript 逻辑

通过此步骤，可以为元素添加适当的交互事件。

***

## **样式更改**

可以在页面编辑功能内调整元素的样式。例如，可以更改颜色、布局、字体等。

### **样式未应用的情况**

#### 主要原因

CSS 优先级（特异性）问题

与现有样式的冲突

选择器指定错误

#### 推荐的解决方法

如果样式调整未反映，可以在 CSS 代码模式中直接更改样式，并使用 !important 来提高优先级。

例：

```css
.target-element {
    color: blue !important;
    font-size: 16px !important;
}
```

## **最后**

要有效且安全地利用 Ptengine 的内联编辑功能，了解每个功能的工作原理和潜在问题点是很重要的。这样可以避免常见问题，并维持网站的正常运作和优秀的用户体验。

重要注意事项：

* 操作前必须进行备份
* 更改后进行充分的测试

遵守这些原则，可以最大限度地利用 Ptengine。