Question

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

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

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

由于自我关闭<a/>标记，这会导致在浏览器中显示HTML时出现渲染问题。

我原本期望将以下三个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）。或者这是当前版本产品中的错误。

Answer 1

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

这增加了一些比严格需要的更多，但处理了由于Content Delivery方面的XML操作而导致的一些其他问题。

基本上它匹配所有带有a属性的空name标记，并在它们之间添加一些内容以阻止它们自行关闭。在我们的例子中，我们使用XSLT发布处理所有XML，因此我们遇到了空标记一直关闭的挑战。因此，作为一个肮脏的黑客，我们现在在空标记之间插入一个隐藏的span标记，以防止出现问题。

Answer 2

谢谢Chris，我已经编辑了您的解决方案以满足我的要求，因此希望将来能够与任何有此问题的人分享。

注意：这会移动锚内的文本并删除外面的文本。修复了仅包含文本的锚点，而不是html。即我的解决方案修复了此标记：

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

希望这有帮助

Answer 3

看起来像克里斯的一个错误。我刚刚在Chrome，Firefox和IE上证实了这一点。完全违反直觉的是应忽略当前的文本选择。（从好的方面来说，一旦你在源标签中手动修复它，一切看起来都很完美。）

我建议您向Tridion报告此问题，也许可以通过更改模板或过滤XSLT来解决这个问题。

Answer 4

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

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

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

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

一个。在组件中键入一个单词或一系列单词（您希望目标在哪里），

湾选择该文本，并将锚标记应用于其中，

℃。然后将您已创建的新课程（.hiddenanchor）应用于主播。

最后，你的＆＃34;隐形＆＃34;锚看起来像这样：

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

这是一个粗略的解决方案 - 完全承认。但它的确有效。在最后一个DOM对象关闭之前，您不会以超链接/下划线样式结束。

作为对CSS的解释，锚在技术上必须在DOM中可见，以使其工作并可由锚链接访问。所以＆＃34;显示：无＆＃34;不会工作。除了采用文本缩进方法之外，您还可以将文本绝对或固定在屏幕上。

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

4 个答案: