Creazione di collegamenti di ancoraggio nei campi rich text con SDL Tridion 2011 SP1

Question

Sto tentando di utilizzare il pulsante di ancoraggio in un campo RTF di un componente e ottenere un comportamento imprevisto. Utilizzando il browser Chrome dalla vista di progettazione, seleziono/seleziono la voce (ad esempio <h2>My Heading</h2>) che desidero utilizzare come ancoraggio, quindi preme il pulsante di ancoraggio e inserisco il nome dell'ancora (ad es. My_place).

Il risultato è il seguente codice in fase di visualizzato nella mia scheda fonte:

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

Questo provoca problemi di rendering nella visualizzazione del codice HTML in un browser a causa della chiusura di auto <a/> tag.

mi sarei aspettato uno dei seguenti tre frammenti HTML viene inserito nel codice HTML:

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

o

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

o

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

Qualcun altro ha sperimentato questo ? o conoscere un modo per ottenere ciò che mi aspettavo (senza modificare manualmente l'HTML). O si tratta di un bug nella versione attuale del prodotto.

Answer 1

In allegato è il mio campione modello XSLT:

<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> 

Questo aggiunge un po 'più di strettamente necessario, ma gestisce alcune altre questioni che abbiamo a causa della manipolazione XML sul lato Content Delivery.

Essenzialmente si corrisponde a tutti vuoti a tag con un attributo name, e aggiungere qualcosa tra di loro al fine di impedire loro di chiusura automatica. Nel nostro caso, postiamo tutto il codice XML con XSLT, quindi abbiamo problemi con i tag vuoti che vengono chiusi continuamente. Quindi, come un trucco sporco, stiamo inserendo un tag nascosto span tra tag vuoti per prevenire il problema.

Answer 2

Sembra un bug per me Chris. L'ho appena confermato su Chrome, Firefox e IE. È completamente contro-intuitivo che l'attuale selezione di testo debba essere ignorata. (Sul lato positivo, sembra che tutto si comporti perfettamente nella scheda sorgente.

Ti consiglio di segnalarlo a Tridion, e magari di aggirare il problema modificando il tuo modello o il filtro XSLT.

Answer 3

È un errore in Tridion. Un work-around che consiglio (e hanno messo in atto nel nostro particolare installazione) è quello di effettuare le seguenti operazioni:

1. Modificare il file FormatAreaStyles.css (che si trova nei file di programma Tridion CMS) - così come il vostro file CSS utilizzato dal sito - a includere una classe come questa:

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

1. Pubblica il vostro file CSS (con la nuova classe) in modo che sarà formattare le ancore in modo corretto.

2. E poi nel componente in cui si stanno costruendo le ancore, si dovrà:

   a. digitare una parola o una serie di parole nel componente (dove si desidera che l'obiettivo sia),

   b. seleziona quel testo e applica il tag di ancoraggio ad esso,

   c. quindi applica la nuova classe che hai creato (.hiddenanchor) all'ancora.

Alla fine, la vostra ancora "invisibile" sarebbe simile a questa:

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

E 'un rozzo work-around - pienamente riconosciuto. Ma funziona. Non si finisce con lo stile collegamento ipertestuale/sottolineato fino alla chiusura del prossimo oggetto DOM.

Come spiegazione per il CSS, l'ancoraggio tecnicamente deve essere visibile nel DOM affinché funzioni e sia accessibile tramite il collegamento di ancoraggio. Quindi "display: none" non funzionerà. In alternativa, per adottare l'approccio text-indent, è possibile posizionare il testo sullo schermo anche in posizione assoluta o fissa.

Answer 4

Grazie Chris, ho modificato la tua soluzione per soddisfare le mie esigenze, così ho voluto condividere per chiunque con questo problema in futuro.

Nota: Questo sposta il testo all'interno dell'ancora ed elimina il testo all'esterno. Corregge le ancore che intendevano contenere solo testo, non html. cioè La mia soluzione correzioni questo tag:

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

Per

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

Ma non questa:

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

Ecco il mio xsl. Spero che ti aiuti a darti una base, sono sicuro che potresti facilmente aggiornarlo per cercare un tag successivo (non ho bisogno di questo per la mia soluzione).

<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> 

Ecco la mia prova 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> 

Dopo trasformare:

<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> 

Spero che questo aiuti