Crear enlaces de anclaje en campos de texto enriquecido con SDL Tridion 2011 SP1

Question

Estoy tratando de usar el botón de anclaje en un campo RTF de un Componente y obtener un comportamiento inesperado. Usando el navegador Chrome desde la vista de diseño, destaco/selecciono el encabezado (es decir, <h2>My Heading</h2>) que quiero usar como delimitador, y presiono el botón delimitador e ingreso el nombre del anclaje (es decir, my_place).

Esto da como resultado el siguiente código que se muestra en mi pestaña Origen:

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

Esto hace que rendir problemas cuando se muestra el código HTML en un navegador debido a la <a/> etiqueta de cierre automático.

lo que habría esperado una de las siguientes tres fragmentos de HTML que se inserta en el código 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> 

Alguien más ha experimentado esto ? o saber de una manera de lograr lo que esperaba (sin editar manualmente el HTML). O es un error en la versión actual del producto.

Answer 1

adjunto es mi muestra plantilla 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> 

Esto añade un poco más de lo estrictamente necesario, pero se encarga de algunos otros problemas que tenemos debido a la manipulación de XML en el lado de entrega de contenido.

Básicamente coincide con todas las etiquetas a vacías con un atributo name, y agrega algo entre ellas para evitar que se cierren automáticamente. En nuestro caso, procesamos todo el XML con XSLT, por lo que tenemos problemas con las etiquetas vacías que se cierran todo el tiempo. Entonces, como un truco sucio, ahora estamos insertando una etiqueta oculta span entre las etiquetas vacías para evitar el problema.

Answer 2

Parece un error para mí, Chris. Acabo de confirmarlo en Chrome, Firefox e IE. Es completamente contrario a la intuición que la selección de texto actual se debe ignorar. (En el lado positivo, una vez que lo arregles manualmente en la pestaña de origen, todo parece funcionar perfectamente)

Sugiero que le informes esto a Tridion, y quizás lo soluciones alterando tus plantillas o filtrando XSLT.

Answer 3

Es un error en Tridion. Una solución alternativa que propongo (y han puesto en práctica en nuestra instalación en particular) es hacer lo siguiente:

1. Editar el archivo FormatAreaStyles.css (que se encuentra en los archivos de programa Tridion CMS) -, así como su archivo CSS utilizado por el sitio web - para incluir una clase como esta:

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

1. Publicar un vistazo a su archivo CSS (con la nueva clase) para que se va a dar formato a sus anclajes correctamente.

2. Y luego, en el componente donde se está construyendo a cabo los anclajes, se tendrá que:

   a. escriba una palabra o una serie de palabras en su componente (donde quiere que esté el objetivo),

   b. seleccione ese texto y aplique la etiqueta de anclaje,

   c. luego aplica la nueva clase que has creado (.hiddenanchor) al anclaje.

Al final, su ancla "invisible" se vería así:

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

Es un trabajo en torno crudo - plenamente reconocido. Pero funciona. No termina con el estilo de hiperenlace/subrayado hasta el cierre del siguiente objeto DOM.

Como una explicación para el CSS, el anclaje debe ser visible técnicamente en el DOM para que funcione y para que sea accesible mediante el enlace de anclaje. Entonces "display: none" no funcionará. De forma alternativa a tomar el enfoque de sangría de texto, también puede colocar el texto de forma absoluta o fija fuera de la pantalla.

Answer 4

Gracias Chris, he editado la solución para que se ajuste a mis requisitos, así que quería compartirla con cualquier persona que tenga este problema en el futuro.

Nota: Esto mueve el texto dentro del delimitador y elimina el texto en el exterior. Corrige los anclajes que estaban destinados a contener solo texto, no html. es decir mi solución correcciones de esta etiqueta:

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

Para

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

Pero no esto:

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

Aquí es mi XSL. Espero que te ayude a darte una base, estoy seguro de que podrías actualizarla fácilmente para buscar la siguiente etiqueta (no la necesito para mi solución).

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

Aquí está mi prueba 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> 

Después de transformar:

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

Esperanza esto ayuda