为何Salesforce Account Engagement(Pardot)着陆页编辑器会拆分<a>标签内的嵌套元素？

问题描述 #

在Pardot布局模板中使用块级元素嵌套<a>标签的代码，打开WYSIWYG编辑器并保存后，原有结构会被自动拆分：

原输入代码：

<a href="">
<img src="https://placehold.jp/680x440.png">
<h3>title</h3>
<p>paragraph</p>
</a>

编辑器保存后被修改为：

<a href=""> <img src="https://placehold.jp/680x440.png" /></a>
<h3><a href="">title</a></h3>
<a href=""> </a>
<p><a href="">paragraph</a></p>
<a href=""> </a>

即使包裹<div>标签，仅打开编辑器保存也会触发代码篡改。

解决方案 #

方案1：用CSS模拟块级链接（推荐）

放弃块级元素嵌套<a>的写法，改用容器+CSS/JS实现点击跳转效果，规避编辑器的格式化限制：

<div class="block-link" data-href="你的目标链接">
  <img src="https://placehold.jp/680x440.png">
  <h3>title</h3>
  <p>paragraph</p>
</div>

配套CSS样式：

.block-link {
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: inherit;
}

添加JS实现跳转（兼容无JS环境可额外加隐藏<a>标签降级）：

document.querySelectorAll('.block-link').forEach(el => {
  el.addEventListener('click', () => {
    window.location.href = el.getAttribute('data-href');
  });
});

方案2：强制禁用编辑器自动格式化

在代码外层添加特殊注释，阻止编辑器解析修改：

<!-- noformat -->
<a href="">
<img src="https://placehold.jp/680x440.png">
<h3>title</h3>
<p>paragraph</p>
</a>
<!-- /noformat -->

部分Pardot版本在代码编辑界面提供**“禁用自动格式化”**开关，勾选后也可生效。

方案3：使用自定义HTML模块

创建着陆页时，选择自定义HTML模块而非WYSIWYG编辑器，直接插入原始代码，避免编辑器自动处理。

内容的提问来源于stack exchange，提问作者Toru Kawahata