Vô hiệu hóa các sự kiện nhấp chuột trong chỉnh sửa XPM (Dao cạo)

Question

Tôi đã cố gắng giải quyết vấn đề này một thời gian, nhưng tôi không thể tìm ra thứ gì đó hoạt động tốt.

Bạn thấy đấy, trên trang web của chúng tôi có rất nhiều hình ảnh hoặc div có thể nhấp, được cung cấp với các liên kết thành phần rơi trên toàn bộ hình ảnh. Nếu bạn kích hoạt XPM và cố gắng chọn thành phần, nó sẽ kích hoạt sự kiện liên kết thành phần của nó, và định tuyến bạn đến đúng trang.

Tôi đã tìm kiếm giải pháp nhanh để tắt hành vi này chỉ khi chỉnh sửa và cho đến nay tôi đã đưa ra một vài cách giải quyết hoàn toàn không phải những gì tôi đang tìm kiếm.

Ví dụ: bạn có thể sử dụng điều kiện Dao cạo dao cạo tuyệt vời (IsSiteEditEnabled), chức năng này luôn được giải quyết thành true nếu ấn phẩm/trang/máy chủ bạn hiện đang được kích hoạt để chỉnh sửa trang. Điều này có nghĩa là nếu bạn chèn mã mẫu cụ thể, chẳng hạn như

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

Sẽ không tạo liên kết khi chỉnh sửa trang web (XPM) không được kích hoạt nhưng có thể được kích hoạt. Tóm tắt các máy chủ dàn dựng. Trừ khi không có lựa chọn nào khác, tôi sẽ cần một máy chủ xuất bản Live để làm cho mã hoạt động, nhưng điều này sẽ đặt ra vấn đề mà các biên tập viên sẽ nghĩ rằng các liên kết bị hỏng trên các máy chủ dàn dựng.

Tôi có cảm giác rằng có điều gì đó tôi thiếu ở đây. Tôi tin rằng vấn đề này có thể đã gặp phải một người như bạn :)

này là một trong những khối

<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

Bạn có thể xem xét chỉ cần đặt trong một số hình thức khác như thế này:

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

Điều này ít nhất phải giải thích tại sao các liên kết không hoạt động đối với người chỉnh sửa của bạn. Mặc dù tôi chưa thử nghiệm nếu điều này thực sự giải quyết vấn đề của bạn.

Nó sẽ sạch hơn để chỉ cần thêm một thuộc tính class="NoClickImageLink", và thêm một hành động hoạt Javascript để tất cả các thẻ với lớp đó khi tải trang mà liên kết các sự kiện onclic với thẻ ..

Answer 2

Khi sử dụng JQuery bạn có thể ngăn liên kết anchor để làm việc bằng cách sử dụng mã này:

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

$(this) sẽ tham khảo các yếu tố nhấp chuột mà sau đó bạn có thể xác minh trong trường hợp bạn cần một số liên kết neo để tiếp tục làm việc.

Mã này có thể được tiêm trong trường hợp bạn đang chỉnh sửa bằng XPM và sẽ đơn giản hóa rất nhiều mẫu của bạn.

PS. Tôi đã không kiểm tra gợi ý này.

Answer 3

Vì XPM hoàn toàn là phía khách hàng ... tôi đoán bạn phải làm điều đó bằng cách sử dụng một số mẹo như những gì tôi mô tả tại; http://tcm4lex.wordpress.com/2013/07/04/javascript-detection-of-experience-manager/

Bài viết này được viết từ kinh nghiệm của tôi với XPM trên Tridion 2013 nhưng có thể là điểm khởi đầu tốt. Một khi bạn có cách đó để phát hiện khi trang đang ở chế độ chỉnh sửa, bạn có thể thực hiện một số thủ thuật Javascript giống như cái mà Arjen mô tả ở trên.