添加 data-* 属性以链接到 html 元素

Question

当尝试在错字链接上添加带有 HTML 元素的 data-* 属性时，解析 htmlspecialchars 中的某些内容会影响整个链接。

起初我认为 COA 是问题所在（这似乎很奇怪，因为代码到现在都可以使用），然后我转而使用 TEXT 元素，甚至撕掉了我所有的包装，以便尝试控制如何呈现的内容但没有用。我也尝试用 FLUIDTEMPLATE 替换它，但它没有任何改变。

使用 COA

lib.contentElement.settings.media.popup.linkParams.ATagParams.postCObject = COA
lib.contentElement.settings.media.popup.linkParams.ATagParams.postCObject {

    10 = TEXT
    10 {
        field = uid
        noTrimWrap = | data-gallery="ce|" data-toggle="lightbox"|
    }
    20 = COA
    20 {
        stdWrap.noTrimWrap = | data-footer="|"|

        10 = TEXT
        10 {
            data = file:current:publicUrl
            wrap = <a class='downloadlink' href='|' target='_blank'>Download</a>
            if.isFalse.field = tx_emboss_lightbox_hidedownload
            if.isTrue.data = file:current:publicUrl
        }

        20 = TEXT
        20 {
            data = file:current:description
            wrap = <p class='caption'>|</p>
            if.isFalse.field = tx_emboss_lightbox_hidecaption
            if.isTrue.data = file:current:description
        }

        30 = TEXT
        30 {
            data = file:current:creator
            wrap = <p class='author'>|</p>
            if.isFalse.field = tx_emboss_lightbox_hideauthor
            if.isTrue.data = file:current:creator
        }
    }
    30 = TEXT
    30 {
        data = file:current:title
        noTrimWrap = | data-title="|"|
        if.isTrue >
        if.isTrue.data = file:current:title
        if.isFalse.field = tx_emboss_lightbox_hidetitle
    }
    40 = TEXT
    40 {
        value = true
        noTrimWrap = | data-showcount="|"|
        if.isFalse.field = tx_emboss_lightbox_hideimagecount
    }
}

没有 COA

lib.contentElement.settings.media.popup.linkParams.ATagParams.postCObject {

    10 = TEXT
    10 {
        field = uid
        noTrimWrap = | data-gallery="ce|" data-toggle="lightbox" |
    }

    11 = TEXT
    11.value = data-footer="

    12 = TEXT
    12 {
        data = file:current:publicUrl
        wrap = <a class='downloadlink' href='|' target='_blank'>Download</a>
        if.isFalse.field = tx_emboss_lightbox_hidedownload
        if.isTrue.data = file:current:publicUrl
    }

    13 = TEXT
    13 {
        data = file:current:description
        wrap = <p class='caption'>|</p>
        if.isFalse.field = tx_emboss_lightbox_hidecaption
        if.isTrue.data = file:current:description
    }

    14 = TEXT
    14 {
        data = file:current:creator
        wrap = <p class='author'>|</p>
        if.isFalse.field = tx_emboss_lightbox_hideauthor
        if.isTrue.data = file:current:creator
    }

    15 = TEXT
    15.value = "

    30 = TEXT
    30 {
        data = file:current:title
        noTrimWrap = | data-title="|"|
        if.isTrue >
        if.isTrue.data = file:current:title
        if.isFalse.field = tx_emboss_lightbox_hidetitle
    }
    40 = TEXT
    40 {
        value = true
        noTrimWrap = | data-showcount="|"|
        if.isFalse.field = tx_emboss_lightbox_hideimagecount
    }
}

使用流体模板

lib.contentElement.settings.media.popup.linkParams.ATagParams.postCObject = FLUIDTEMPLATE
lib.contentElement.settings.media.popup.linkParams.ATagParams.postCObject {
    file = EXT:emboss_lightbox/Resources/Private/Standalone/GalleryImage.html
    dataProcessing.10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
    dataProcessing.10 {
        # the field name where relations are set
        # + stdWrap
        files.data = file:current:uid

        # The target variable to be handed to the ContentObject again, can be used
        # in Fluid e.g. to iterate over the objects. defaults to "files" when not defined
        # + stdWrap
        as = images
    }
}

流体

<f:spaceless>data-gallery="ce{field:uid}" data-toggle="lightbox" data-footer="<f:if condition="{data.tx_emboss_lightbox_hidedownload} != true"><f:if condition="{images.0.publicUrl}"><a href='{images.0.publicUrl}' target='_blank'>Download</a></f:if></f:if><f:if condition="{data.tx_emboss_lightbox_hidecaption} != true"><f:if condition="{images.0.description}"><p class='caption'>{images.0.description}</p></f:if></f:if><f:if condition="{data.tx_emboss_lightbox_hideauthor} != true"><f:if condition="{images.0.creator}"><p class='author'>{images.0.creator}</p></f:if></f:if>" data-title="{images.0.title}" data-showcount="true"</f:spaceless>

流畅（可读） 这个版本让我很反感，因为我所有的换行符都变成了<p>&nbps;</p>

    <f:spaceless>
        data-gallery="ce{field:uid}" data-toggle="lightbox" data-footer="
        <f:if condition="{data.tx_emboss_lightbox_hidedownload} != true">
            <f:if condition="{images.0.publicUrl}">
                <a href='{images.0.publicUrl}' target='_blank'>Download</a>
            </f:if>
        </f:if>
        <f:if condition="{data.tx_emboss_lightbox_hidecaption} != true">
            <f:if condition="{images.0.description}">
                <p class='caption'>{images.0.description}</p>
            </f:if>
        </f:if>
        <f:if condition="{data.tx_emboss_lightbox_hideauthor} != true">
            <f:if condition="{images.0.creator}">
                <p class='author'>{images.0.creator}</p>
            </f:if>
        </f:if>" data-title="{images.0.title}" data-showcount="true"</f:spaceless>

预期的输出是这样的：

    <a href="link to image" title="image title" data-gallery="cexyz" data-toggle="lightbox" data-footer="<a href='path to publicUrl'>Download</a><p class='caption'>Some description with possible html in it too</p><p class='author'>Some author</p>" data-title="image title" data-showcount="true"><img src="Someimage.jpg"></a>

相反，我得到了这个：

    &lt;a href=&quot;link to image&quot; title=&quot;image title&quot; data-gallery=&quot;cexyz&quot; data-toggle=&quot;lightbox&quot; data-footer=&quot;&lt;a href='path to publicUrl'&gt;Download&lt;/a&gt;&lt;p class='caption'&gt;Some description with possible html in it too&lt;/p&gt;&lt;p class='author'&gt;Some author&lt;/p&gt;&quot; data-title=&quot;image title&quot; data-showcount=&quot;true&quot;&gt;<img src="Someimage.jpg">&lt;/a&gt;

Answer 1

正如您在最后展示的那样，您的问题不是数据属性，而是整个链接。您包含的代码未涵盖该部分。我假设您只需要在链接周围添加一个<f:format.raw> 标签。

也许你的整个 CE 都受到了影响，而你还没有注意到，因为文本中没有其他特殊字符。