使用 SDL Tridion 2011 SP1 在富文本字段中创建锚链接答案

【问题标题】：Creating anchor links in rich text fields with SDL Tridion 2011 SP1使用 SDL Tridion 2011 SP1 在富文本字段中创建锚链接
【发布时间】：2012-05-19 05:47:33
【问题描述】：

我试图在组件的 RTF 字段中使用锚按钮，但出现意外行为。使用设计视图中的 Chrome 浏览器，我突出显示/选择要用作锚点的标题（即<h2>My Heading</h2>），然后按锚点按钮并输入锚点名称（即 my_place）。

这导致以下代码显示在我的源选项卡中：

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

这会导致在浏览器中显示 HTML 时出现渲染问题，因为 <a/> 标签会自动关闭。

我希望以下三个 HTML 片段之一被插入到 HTML 源代码中：

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

或

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

或

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

有其他人经历过吗？或知道实现我所期望的方法（无需手动编辑 HTML）。或者这是当前产品版本中的错误。

【问题讨论】：

标签： tridion tridion-2011

【解决方案1】：

感谢 Chris，我已根据我的要求编辑了您的解决方案，因此希望与将来遇到此问题的任何人分享。

注意：这会移动锚点内的文本并删除锚点外的文本。修复了仅包含文本而非 html 的锚点。 IE 我的解决方案修复了这个标签：

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

到

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

但不是这个：

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

这是我的 xsl。希望它可以帮助您提供基础，我相信您可以轻松更新它以查找以下标签（我的解决方案不需要这个）。

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

这是我的测试 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>

改造后：

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

希望对你有帮助

【讨论】：

您好 Jonathan，很高兴这对您有所帮助 - 请考虑使用您的 SO ID 参与我们的 SDL Tridion Area 51 提案，以便我们可以获得 Tridion 的专用问答区：area51.stackexchange.com/proposals/38335/…

【解决方案2】：

这是 Tridion 中的一个错误。我建议（并已在我们的特定安装中实施）的一种解决方法是执行以下操作：

编辑 FormatAreaStyles.css 文件（可在 Tridion CMS 程序文件中找到）以及网站使用的 CSS 文件，以包含这样的类：

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

发布您的 CSS 文件（使用新类），以便正确格式化您的锚点。
然后在构建锚点的组件中，您必须：

一个。在您的组件（您希望目标所在的位置）中键入一个单词或一系列单词，

b.选择该文本，并将锚标记应用于它，

c。然后将您创建的新类 (.hiddenanchor) 应用到锚点。

最后，您的“隐形”锚点将如下所示：

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

这是一个粗略的解决方法——完全承认。但它有效。在下一个 DOM 对象关闭之前，您不会得到超链接/下划线样式。

作为对 CSS 的解释，从技术上讲，锚点必须在 DOM 中可见，它才能工作并且可以通过锚点链接访问。所以“显示：无”将不起作用。除了采用文本缩进方法之外，您还可以将文本绝对或固定在屏幕之外。

【讨论】：

在这种情况下这可能是一种解决方法，但不一定是粗略的。 +1 作为一种快速而有用的替代技术，用于将“合并”字段类型信息（也称为数据标签）添加到富文本格式区域。 hiddenanchor 在这里工作，但我们可以将业务友好名称“模板化”到演示服务器需要的任何内容中。或者，您可以保持某些项目可见，但根据需要采用不同的样式。
可能值得注意的是，更新 FormatAreaStyles.css 后无需重新启动 Tridion 服务器上的 COM+ 或 IIS。您可能需要清除浏览器缓存以使新样式在组件的格式工具栏中可用。另请注意，任何空的 CSS 元素（例如 a.ReadMore{/**/}）也不会显示 - 它们必须具有格式设置才能显示。

【解决方案3】：

附件是我的示例 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>

这增加了一些超出严格要求的内容，但处理了我们在内容交付端进行 XML 操作时遇到的一些其他问题。

本质上它匹配所有带有name属性的空a标签，并在它们之间添加一些东西以阻止它们自动关闭。在我们的例子中，我们使用 XSLT 对所有 XML 进行后期处理，因此我们面临着空标签一直被关闭的挑战。所以作为一个肮脏的黑客，我们现在在空标签之间插入一个隐藏的span标签来防止这个问题。

【讨论】：

【解决方案4】：

在我看来，克里斯是一个错误。我刚刚在 Chrome、Firefox 和 IE 上确认了这一点。应该忽略当前的文本选择是完全违反直觉的。（从好的方面来说，一旦你在源选项卡中手动修复它，一切似乎都表现得很完美。）

我建议您将此报告给 Tridion，并可能通过更改您的模板或过滤器 XSLT 来解决它。

【讨论】：

我认为你是正确的@Dom - 我已经修改了我的 XSLT 过滤器，以按照你的建议处理这个问题。我在下面添加了我的 XSLT，以便其他人可以看到