# 编辑器的使用方法

## **更改文本**

### **文本编辑**

点击要更改的文本元素，工具栏中会显示"更改文本"。您可以在此屏幕上直接更改文本。

您可以更改副本和CTA按钮的文本等，并验证转换率。

### **样式编辑**

点击工具栏中"样式编辑"图标，您可以更改以下内容：

元素大小

字体、字体大小、粗细、字体颜色

行间距、对齐

下划线、斜体、删除线等装饰

所选元素的背景和边框颜色、粗细、边距

## **更改图像**

### 更换图像

#### **基本步骤**

**选择元素** 点击要更改的图像元素

**工具栏显示** "更改图像"选项显示在工具栏中

**上传图像** 上传您的图像文件或输入图像的链接

**替换图像** 上传的图像会自动替换原始图像

> 此功能仅适用于使用 img 标签创建的图像。
>
> 不能用于背景图像或 CSS 中指定的图像。

**支持的图像格式和限制 📁**

**支持的格式**：JPEG、PNG、GIF、AVIF、WebP、ICO、SVG

**最大文件大小**：6 MB

您可以更改特色图像和横幅图像等，并验证效果。

与文本更改类似，您可以从样式编辑调整大小和边距。

### **图像设置（替代文本）**

选择图像元素时，"图像设置"图标将显示在工具栏中。您可以为所选图像设置替代文本 (Alt)。

有关替代文本的详细信息，请参阅 [Web 可访问性支持](https://gitlab.com/PtmindDev/ptx/ptengine-helps/-/blob/main/DOCS/zh/experience/campaign/inline-edit/editnoi.md)。

## 视频的插入与编辑

您可以在页面中插入新视频，或对已有视频进行编辑。 支持 YouTube 视频和直链视频（MP4/WebM 等）两种形式。

***

### 插入视频 🎬

#### 基本步骤

1. **选择元素**
   * 点击要插入视频的位置附近的内容元素。
2. **点击「添加内容」**
   * 选择插入位置（前方、后方、内部等）。
3. **选择「视频」**

   * 在添加内容的类型列表中选择「视频」。

   <figure><img src="/files/P93IZcUIui5pBqHs4L1x" alt=""><figcaption></figcaption></figure>
4. **输入视频 URL**

   * 输入 YouTube 视频链接或视频文件的直链 URL。

   <figure><img src="/files/dz7nag5n8UHGA2kzJ59S" alt=""><figcaption></figcaption></figure>
5. **设置播放选项和尺寸后，点击「确定」**

#### 支持的视频格式

| 类型      | 示例                                      |
| ------- | --------------------------------------- |
| YouTube | `https://www.youtube.com/watch?v=xxxxx` |
| 直链视频    | MP4、WebM 等                              |

{% hint style="warning" %}
视频 URL 必须以 `http://` 或 `https://` 开头，请输入有效的链接地址。
{% endhint %}

#### 播放选项

在视频插入对话框的「播放设置」中，可配置以下选项：

* **自动播放**：页面加载时自动开始播放。
* **静音**：关闭视频声音。开启自动播放时将自动启用。
* **循环播放**：视频播放结束后自动重复播放。
* **隐藏控件**：隐藏播放进度条等操作界面。

#### 尺寸设置

在「显示设置」中可设置视频的宽度和高度：

* **像素指定**：仅输入数字（例：`380`）。
* **百分比指定**：输入数字并加上 `%`（例：`100%`）。
* 点击 🔒 图标可锁定宽高比例。

<figure><img src="/files/8Egl71SAPmN3W0j0752p" alt=""><figcaption></figcaption></figure>

***

### 编辑视频

已插入的视频元素可通过工具栏重新编辑。

#### 操作步骤

1. **点击视频元素**

   * 工具栏中将显示「编辑视频」按钮。

   <figure><img src="/files/rAl4LJgLCJWxx0Wj5dJn" alt=""><figcaption></figcaption></figure>
2. **点击「编辑视频」**
   * 打开视频编辑对话框，当前设置将自动填入。
3. **修改内容后点击「确定」**
   * 可分别修改视频链接、播放选项和尺寸。

## 添加和调整内容位置

### 添加内容

通过内容添加，您可以添加文本、图像、视频等新内容。

例：

* 在"添加到购物车"按钮附近添加"包含 7 天退货保证"的文本
* 为最新文章链接添加图像横幅
* 在页面中间添加重要的 CTA

#### **添加内容的步骤**

点击要添加内容的位置附近的内容。 使用以绿色显示的图层选择功能选择适当的图层。我们建议选择父图层。

**点击"添加内容"，然后选择要添加内容的位置。**

您可以添加以下 5 种类型的内容。

* 标题文本
* 正文文本
* 图像
* 按钮
* HTML

**添加的内容也可以从工具栏进行样式编辑。**

### **复制和粘贴内容**

如果要添加与现有内容相同的内容，您可以从工具栏中的"创建副本"图标进行复制。

然后，您可以点击"粘贴"图标，将复制的内容粘贴到页面的其他位置。

粘贴的内容也可以从工具栏进行编辑。

### 删除内容

选择要删除的内容，点击工具栏右侧的垃圾箱图标进行删除。

### 调整内容位置

选择要移动位置的内容，点击工具栏中的以下图标。

将显示以下弹出窗口。

点击移动目标，然后点击移动按钮。

选择具体位置。

💡根据网站的结构，有时可能无法正确移动。遇到问题请联系你的客户成功伙伴。

## **编辑链接**

从链接图标，您可以编辑"启用点击操作"和"启用事件测量"。

对于未设置任何链接的元素，默认情况下"启用点击操作"为关闭。请将其滑动为打开，并配置点击操作。

如果已经设置了链接，请编辑工具箱的内容。

事件测量也是如此。

### **启用点击操作**

这是为元素设置链接的功能。可以从操作类型指定点击后的操作。

#### **操作类型**

转到链接：转到指定的 URL

打开 LINE 官方账户：通过输入 LINE 官方账户的 URL，转到相关页面

拨打电话：拨打指定的电话号码（例：03-1234-5678 ※15 个字符限制）

复制文本或 URL：将指定的字符串复制到剪贴板（例：优惠券代码等）

下载文件：下载由 URL 指定的文件

执行代码：执行指定的 JavaScript 代码。如果在设置 JavaScript 代码时输入框太小，您可以从右下角的箭头扩大输入框。

### **启用事件测量**

当您启用"启用事件测量"时，您可以将目标元素的点击作为事件进行测量。您可以将其添加到现有事件，或创建新事件。

#### **事件设置步骤**

**启用"启用事件测量"**

**选择或创建新事件** 如果您已经在 Ptengine Insight 中测量事件，您可以从下拉菜单中选择（※请注意，测量数必须为 1 或以上才能与 Experience 关联）。 如果要设置新事件，请点击新建。 在此处设置的事件将被测量，无论设备如何。

**如果要将创建的事件设置为体验的评估轴，可以单独注册为 Experience 的目标。**

#### **创建新的情况下**

关于事件名称 新建设置时，请设置任意事件名称。如果您设置了与 Insight 中已设置的事件名称相同的名称，则此测量目标将添加到该事件。

关于与 Insight 的集成 在此处创建的事件也可以在 Insight 的事件分析屏幕中确认测量值。此外，设置的事件列表可以在事件设置屏幕的"编码事件"中确认。

#### 关于更改和删除

即使在交付体验期间，如果您关闭"启用事件测量"，相关体验的事件测量将停止。如果要删除特定事件名称，请通过聊天支持联系我们，将目标事件名称作为"删除体验中创建的事件的请求"。

#### **使用现有事件的情况下**

如果现有事件中有要合并测量的操作，请从下拉菜单中选择相应的事件名称。如果 Insight 中创建的事件的测量数为 1 或以上，则它将与 Experience 关联。如果现有事件名称未显示，请在 Insight 的事件分析屏幕中检查测量数。

## 预览

在创建创意期间，使用预览功能检查是否正确显示。

您可以在编辑器中进行预览。

## 其他功能

### **编辑 HTML**

如果要进行更灵活的编辑，您可以从工具栏中的"编辑 HTML"图标或菜单栏中的"代码模式"编辑源代码。

### **页面编辑历史**

所有页面编辑历史可以从菜单栏中的"编辑历史"确认。点击时，内容的更改和添加的内容将显示在左侧的列表中，并且您可以比较右侧更改前后的差异。

点击每个编辑历史记录将导出到更改的位置（删除的内容除外）。

此外，点击删除图标可以撤消该更改本身并返回原始版本。

### **屏幕操作模式**

如果要编辑不点击页面就不会显示的手风琴菜单中的内容等（交互式内容），请使用"屏幕操作模式"。

切换到屏幕操作模式后，点击显示内容后，您可以"返回编辑模式"，因此您可以继续编辑页面。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://helps.ptengine.com/cn/experience/campaign/create-new/editor-usage.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
