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

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"属性，然后在页面加载时向具有该类的所有标签添加 JavaScript 操作（将 onclic 事件与标签关联起来）会更简洁。