Tạo liên kết anchor trong các trường văn bản có định dạng với SDL Tridion 2011 SP1

Question

Tôi đang cố gắng sử dụng nút neo trong trường RTF của một Thành phần và nhận được hành vi không mong muốn. Sử dụng Trình duyệt Chrome từ chế độ xem thiết kế, tôi đánh dấu/chọn tiêu đề (ví dụ: <h2>My Heading</h2>) Tôi muốn sử dụng làm neo và nhấn nút neo và nhập tên neo (ví dụ: my_place).

Điều này dẫn đến đoạn mã sau được hiển thị trong tab nguồn của tôi:

<a name="my_place" id="myplace"/><h2>My Heading</h2> 

Điều này gây ra làm cho các vấn đề khi hiển thị HTML trong trình duyệt do tự đóng <a/> thẻ.

tôi dự kiến ​​sẽ có một trong ba mảnh HTML sau được chèn vào nguồn HTML:

<a name="my_place" id="myplace"><h2>My Heading</h2></a> 

hoặc

<h2><a name="my_place" id="myplace">My Heading</a></h2> 

hoặc

<a name="my_place" id="myplace"><a><h2>My Heading</h2> 

Có ai khác có kinh nghiệm này ? hoặc biết cách để đạt được những gì tôi đã mong đợi (không cần chỉnh sửa HTML theo cách thủ công). Hay đây là lỗi trong phiên bản hiện tại của sản phẩm.

Answer 1

Kèm theo là mẫu XSLT mẫu của tôi:

<template match="a[(@name) and (count(node()) = 0)]"> 
    <copy> 
     <apply-templates select="@*"/> 
     <xhtml:span xmlns:xhtml="http://www.w3.org/1999/xhtml" class="hidden"> </xhtml:span> 
    </copy> 
</template> 

này cho biết thêm nhiều hơn một chút so với cần thiết đúng, nhưng xử lý một số vấn đề khác mà chúng tôi có do thao tác XML ở phía Cung cấp nội dung.

Về cơ bản, nó khớp với tất cả các thẻ trống a với thuộc tính name và thêm một số thứ giữa chúng để ngăn chúng tự đóng. Trong trường hợp của chúng tôi, chúng tôi đăng tất cả XML bằng XSLT, vì vậy, chúng tôi có những thách thức với các thẻ trống bị đóng mọi lúc. Vì vậy, như một hack bẩn, chúng tôi hiện đang chèn một thẻ ẩn span giữa các thẻ trống để ngăn chặn vấn đề.

Answer 2

Dường như một lỗi đối với tôi Chris. Tôi vừa xác nhận nó trên Chrome, Firefox và IE. Nó hoàn toàn phản trực giác rằng việc lựa chọn văn bản hiện tại nên được bỏ qua. (Mặt khác, khi bạn sửa nó theo cách thủ công trong tab nguồn, mọi thứ dường như hoạt động hoàn hảo.)

Tôi khuyên bạn nên báo cáo điều này với Tridion, và có thể làm việc xung quanh nó bằng cách thay đổi khuôn mẫu của bạn hoặc XSLT lọc.

Answer 3

Đó là lỗi trong Tridion. Một công việc mà tôi đề xuất (và đã thực hiện trong cài đặt cụ thể của chúng tôi) là làm như sau:

1. Chỉnh sửa tệp FormatAreaStyles.css (được tìm thấy trong tệp chương trình Tridion CMS) - cũng như tệp CSS của bạn sử dụng bởi các trang web - bao gồm một lớp như thế này:

.hiddenanchor { width:1px; height: 1px; display: block; text-indent:-50000px; }

1. Xuất bản ra file CSS của bạn (với lớp mới) để nó sẽ định dạng neo của bạn đúng cách.

2. Và sau đó trong thành phần mà bạn đang xây dựng ra neo, bạn sẽ phải:

   a. nhập một từ hoặc một chuỗi từ trong thành phần của bạn (nơi bạn muốn mục tiêu),

   b. chọn văn bản đó và áp dụng thẻ neo vào đó,

   c. sau đó áp dụng lớp mới mà bạn đã tạo (.hiddenanchor) vào neo.

Cuối cùng, bạn "vô hình" neo sẽ trông như thế này:

<a name="anchorname" id="anchorname" class="hiddenanchor">Anchor Name</a> 

Đó là một công việc xung quanh thô - thừa nhận đầy đủ. Nhưng nó đã có tác dụng. Bạn không kết thúc với kiểu siêu liên kết/gạch dưới cho đến khi đóng đối tượng DOM tiếp theo.

Như một lời giải thích cho CSS, neo về mặt kỹ thuật phải được hiển thị trong DOM để nó hoạt động và có thể truy cập được bằng liên kết anchor. Vì vậy, "display: none" sẽ không hoạt động. Ngoài cách sử dụng phương pháp thụt lề văn bản, bạn cũng có thể định vị tuyệt đối hoặc cố định văn bản khỏi màn hình.

Answer 4

Cảm ơn Chris, tôi đã chỉnh sửa giải pháp của bạn để phù hợp với yêu cầu của tôi vì vậy muốn chia sẻ cho bất kỳ ai có vấn đề này trong tương lai.

Lưu ý: Điều này di chuyển văn bản bên trong liên kết và xóa văn bản bên ngoài. Sửa các neo chỉ nhằm chứa văn bản, chứ không phải html. tức là giải pháp sửa chữa của tôi thẻ này:

<p><a name="anchor1" id="anchor1"></a>Anchor text</p> 

Để

<p><a name="anchor1" id="anchor1">Anchor text</a></p> 

Nhưng không này:

<p><a name="anchor1" id="anchor1"></a><h1>Anchor text</h1></p> 

Dưới đây là xsl tôi. Hy vọng rằng nó sẽ giúp cung cấp cho bạn một cơ sở, tôi chắc rằng bạn có thể dễ dàng cập nhật nó để tìm một thẻ sau đây (tôi không yêu cầu điều này cho giải pháp của tôi).

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
    <xsl:output omit-xml-declaration="yes" method="html" cdata-section-elements="script"/> 
    <xsl:template match="/ | node() | @*"> 
     <xsl:copy> 
      <xsl:apply-templates select="node() | @*"/> 
     </xsl:copy> 
    </xsl:template> 

    <!-- fixes Tridion bug when using interface button to insert anchor in rich text field --> 
    <!-- gets all empty anchor tags with an id and takes any following text and copies it inside anchor --> 
    <xsl:template match="a[(@id) and (count(node()) = 0)]"> 
     <xsl:copy> 
      <xsl:for-each select="@*"> 
       <xsl:attribute name="{name(.)}"> 
        <xsl:value-of select="."/>      
       </xsl:attribute> 
      </xsl:for-each> 
      <xsl:value-of select="normalize-space(following-sibling::text())"/> 
     </xsl:copy> 
    </xsl:template> 
    <!-- delete any text after an empty anchor (template above has already copied this text inside the anchor) --> 
    <xsl:template match="text()[preceding-sibling::a[(@id) and (count(node()) = 0)]]" ></xsl:template> 
</xsl:stylesheet> 

Dưới đây là thử nghiệm của tôi XML

<?xml version ="1.0"?> 
<?xml-stylesheet type="text/xsl" href="tridionhtmlfield.xsl"?> 
<html> 
    <head></head> 
    <body> 
     <p><a id="anchorlink" name="anchorlink" title="Anchor link" href="#Anchor">Anchor link</a>Some text after</p> 
     <p><a name="broken-with-html-name" id="broken-with-html-id"></a><h1>Anchor - broken with html</h1></p> 
     <p><a name="broken-text-only-name" id="broken-text-only-id"></a>Anchor - broken text only</p> 
     <p><a name="broken-notext-name" id="broken-notext-id"></a></p> 
     <p><a name="correct-name" id="correct-id">Anchor - correctly rendered</a> Some text after</p> 
    </body> 
</html> 

Sau khi chuyển đổi:

<html> 
    <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head> 
    <body> 
     <p><a id="anchorlink" name="anchorlink" title="Anchor link" href="#Anchor">Anchor link</a>Some text after</p> 
     <p><a name="broken-with-html-name" id="broken-with-html-id"></a><h1>Anchor - broken with html</h1></p> 
     <p><a name="broken-text-only-name" id="broken-text-only-id">Anchor - broken text only</a></p> 
     <p><a name="broken-notext-name" id="broken-notext-id"></a></p> 
     <p><a name="correct-name" id="correct-id">Anchor - correctly rendered</a> Some text after</p> 
    </body> 
</html> 

Hope this helps