Question

我一直试图解决这个问题已有一段时间了，但是我无法想出一些正常运作的东西。

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

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

例如，您可以使用精彩的Razor Mediator条件（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

你可能会考虑加入某种形式的其他形式：

@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"属性会更简洁，并在页面加载时将该操作添加到该类的所有标记，这会将onclic事件与标记相关联。

Answer 2

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

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

$(this)会引用点击的元素，然后您可以在需要一些锚链接以保持工作的情况下进行验证。

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

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

Answer 3

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

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

在XPM编辑中禁用单击事件（Razor）

3 个答案: