All geek questions in one place

Create anchor links in text fields supporting SDL Tridion 2011 SP1

I am trying to use the snap button in the RTF field of a component and get unexpected behavior. Using the Chrome Browser from the project view, I select / select the title (i.e. <h2>My Heading</h2> ) that I want to use as the anchor, and click the anchor button and enter the anchor name (i.e. my_place).

This will display the following code on my source tab:

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

This leads to problems when displaying HTML in the browser due to the closing <a/> tag.

I would expect one of the following three HTML snippets to be added to the HTML:

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

or

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

or

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

Has anyone else experienced this? or you know a way to achieve what I expected (without manually editing HTML). Or is this a bug in the current version of the product.

+6
source share
4 answers

Attached sample XSLT template:

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

This adds a little more than necessary, but handles some other problems that we have due to XML manipulation on the content delivery side.

Essentially, it matches all empty a tags with the name attribute and adds something in between to stop them closing. In our case, we send the whole XML process using XSLT, so we have problems closing closed tags. So, as a dirty hack, we now insert a hidden span tag between empty tags to prevent the problem.

+6
source

Thanks Chris, I edited your solution according to my requirements, so I would like to share this problem with everyone in the future.

Note. . This moves the text inside the anchor and removes the text outside. Fixes anchors that should contain only text, not html. those. My solution fixes this tag:

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

For

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

But not this:

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

Here is my xsl. Hope this helps you get the database, I'm sure you can easily update it to find the next tag (I don't require this for my solution).

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

Here is my test 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>

After conversion:

 <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

+6
source

Sounds like a mistake to me, Chris. I just confirmed this in Chrome, Firefox and IE. It is completely counter-intuitive that the current text selection should be ignored. (On the plus side, once you fix it manually on the source tab, everything looks great.)

I suggest you tell Tridion about this and possibly get around it by changing the XSLT template or filter.

+4
source

This is a bug in Tridion. One work task that I propose (and implemented in our specific installation) is as follows:

  • Edit the FormatAreaStyles.css file (found in the Trimion CMS files) as well as your CSS file used by the website to include this class:

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

  • Publish your CSS file (with a new class) so that it properly formats your anchors.

  • And then in the component where you build the anchors, you need:

    a. enter a word or a series of words in your component (where you want the goal to be),

    b. select this text and apply an anchor tag to it,

    from. then apply the new class you created (.hiddenanchor) to the anchor.

In the end, your โ€œinvisibleโ€ anchor will look like this:

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

This is crude work - fully recognized. But it does work. You do not end the hyperlink / underline style until the next DOM is closed.

As an explanation of CSS, the anchor must technically be visible in the DOM for it to work and be accessible by binding. So "display: none" will not work. As an alternative to indented text, you can also capture or capture text from the screen.

+2
source

Source: https://habr.com/ru/post/915416/

More articles:


All Articles