在 XPM 编辑中禁用点击事件 (Razor)

Question

我已经尝试解决这个问题一段时间了，但我想不出可以正常工作的东西。

您会看到，在我们的网站上有很多可点击的图像或 div，并提供了覆盖整个图像的组件链接。如果您激活 XPM 并尝试选择组件，它将触发其组件链接单击事件，并将您引导到正确的页面。

我一直在寻找一种仅在编辑时禁用此行为的快速解决方案，到目前为止，我已经想出了一些解决方法，坦率地说，这不是我想要的。

例如，您可以使用出色的 Razor 中介条件 (IsSiteEditEnabled)，但是，如果您当前所在的出版物/页面/服务器已启用站点编辑，则此函数始终解析为 true。这意味着如果您插入特定于模板的代码，例如

@if(!IsSiteEditEnabled){
<a tridion:href="#"> other code, ending in closing of </a>...
}

站点编辑 (XPM) 未激活时不会输出链接，但可以激活。简而言之，暂存服务器。

除非没有其他选择，否则我将需要一个 Live 发布服务器来使代码正常工作，但这会造成编辑者认为暂存服务器上的链接已损坏的问题。

我感觉这里缺少一些东西。我相信像你这样的人可能已经遇到过这个问题:)

这是块之一

<article class="block-2x2 banner">
    <tcdl:ComponentField name="component_link"></tcdl:ComponentField>
    @if(!IsSiteEditEnabled){
        @:<a tridion:href="@Fields.component_link">
        }
        <div class="image-container">
            <tcdl:ComponentField name="image"><img src="@Fields.image" alt="@Fields.image.altText"></tcdl:ComponentField>
        </div>
        <div class="hgroup">
            <h4 class="primary-title">@RenderComponentField("header", 0)</h4>
            <h5 class="secondary-title">@RenderComponentField("title", 0)</h5>
        </div>
    @if(!IsSiteEditEnabled){</a>}
</article>

Answer 1

由于 XPM 是纯粹的客户端......我想你必须使用我所描述的一些技巧来做到这一点； http://tcm4lex.wordpress.com/2013/07/04/javascript-detection-of-experience-manager/

这篇文章是根据我在 Tridion 2013 上使用 XPM 的经验编写的，但无论如何都是一个很好的起点。一旦你有了这种方法来检测页面何时处于编辑模式，你就可以像上面 Arjen 描述的那样做一些 Javascript 技巧。

Answer 2

使用 JQuery 时，您可以使用以下代码阻止锚链接工作：

$('a').click(function(event) {
    event.preventDefault();
});

$(this) 将引用单击的元素，然后您可以在需要一些锚链接才能继续工作的情况下对其进行验证。

在您使用 XPM 编辑的情况下，可以注入此代码，这将大大简化您的模板。

PS。我没有测试这个建议。

Answer 3

您可能会考虑只输入某种形式的 else 像这样：

@if(!IsSiteEditEnabled){
   <a tridion:href="#"> other code, ending in closing of </a>...
}else{
   <a href="#" onclick="alert('Image links not supported in XPM');"></a>
}

这至少应该解释为什么这些链接不适合您的编辑。虽然我没有测试这是否真的解决了你的问题。

添加class="NoClickImageLink" 属性会更简洁，并在页面加载时将 JavaScript 操作添加到具有该类的所有标签，从而将 onclic 事件与标签相关联..