> 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/advanced-editing.md).

# 高级编辑功能

本节我们将详细为您介绍高级编辑功能是什么，以及 Ptengine 是如何实现高级编辑功能的。

阅读本章节前，我们强烈建议您先阅读[弹窗](/cn/experience/campaign/create-new-1.md)与[页面编辑](/cn/experience/campaign/create-new.md)的相关内容。

## 什么是高级编辑功能

高级功能是基于 Ptengine 的编辑器，允许您在一个编辑器内对页面或多个弹窗进行编辑。同时通过高级编辑功能，您可以实现页面与弹窗的交互，或弹窗与弹窗之间的交互，让您对用户的触达更加个性化。

## 高级功能与“弹窗”“页面编辑”的区别

高级功能应视作一个独立体验，目的是将多个弹窗、页面编辑与弹窗互动等功能整合实现。

当高级功能中同时编辑了弹窗 + 页面编辑时，Ptengine 会将这些编辑视为一个整体，体验报告中无法细分查看弹窗或页面编辑各自带来的影响。

如果您需要独立观测弹窗或页面编辑的效果，不建议将体验重叠，同时也不建议通过高级体验将两个观测目标的实验同时编辑进高级模式。

## 场景案例一：弹窗 A 触发弹窗 B

**1.添加体验，选择【高级】。**

![](https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-e28133dc891420fefd0b899e92b35f012c8b30c2%2Fexperience-advanced-editing-01.jpg?alt=media)

**2.选择编辑器页面（编辑页面并非最终生效页面）。**

![](https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-d86be5f6da931e3d998e8965c391e2d20ace9aa6%2Fexperience-advanced-editing-02.png?alt=media)

**3.在左侧点击添加弹窗 A（可从空白创建、也可以选择灵感库模板或已保存的模板）。**

![](https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-d923c68a6860f2364631f9d5d26ed9355daab7ff%2Fexperience-advanced-editing-03.png?alt=media)

**4.弹窗 A 编辑完毕后，点击上方的【退出弹窗编辑】按钮。**

![](https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-dafb7ea0f571f667fccb7d413b218ff478d1b66e%2Fexperience-advanced-editing-04.png?alt=media)

**5.在左侧添加弹窗 B、开始编辑弹窗 B。**

![](https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-13d120fa5a966b6e033d7b2ab066b60f186f37bf%2Fexperience-advanced-editing-05.png?alt=media)

**6.弹窗 B 编辑完毕后，点击左下方的触发条件按钮，选择【当访客触发特定代码时显示】，点击复制。**

![](https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-9b90830c391316c810a3d8c571074c911870557d%2Fexperience-advanced-editing-06.png?alt=media)

**7.退出弹窗 B 的编辑、回到弹窗 A 的编辑模式。**

![](https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-d341d4b1e7d7745818462e2f386e8784f4a99c22%2Fexperience-advanced-editing-07.png?alt=media)

**8.选择 CTA（本案例以 submit 点击后触发弹窗 B 为例），选择执行 JavaScript 代码。**

![](https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-916352f8923603e43072938930f51a25d9696191%2Fexperience-advanced-editing-08.png?alt=media)

代码：

```javascript
setTimeout(() => {
  // 中间粘贴步骤 6 中复制的内容
}, 500);
```

**9.将上述代码与步骤 6 的代码粘贴进弹窗 A 的触发条件。**

![](https://npstaticprod.ptengine.jp/customer/48nwy0s4/image/ed23c2bb8a4367b6d5ea29a054a424f81750907957917.png)

**10.体验设置完成，点击保存后即可。**

![](https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-1363f8c9fc5d1d6c4c8872d5c68ae73e6553b47a%2Fexperience-advanced-editing-09.png?alt=media)

{% hint style="info" %}
**说明**：此能力仅限付费用户使用，如需开通，请联系对应的客户成功专家。
{% endhint %}

***

## 相关页面 <a href="#related-pages" id="related-pages"></a>

* [编辑器的使用方法](/cn/experience/campaign/create-new/editor-usage.md)
* [代码模式的使用方法](/cn/experience/campaign/code-mode.md)
* [内容移动功能故障对策](/cn/faq/experience-edit/rearrange-bug.md) — 挪动内容后样式乱/交互失效
* [体验预览](/cn/experience/campaign/preview.md)
