In this article, I will explain a little bit about Rich Text Fields in SDL Tridion CMS and how to customize and restrict the usage of styling to some extent with a basic example.
Introduction to RTF fields in Tridion
Tridion supports Rich Text Fields for allowing content managers to create better-looking content. All kinds of HTML elements are supported like the typical Italic, Bold and Underline. By default when enabling RTF features for a text field in your schema design all common tags are allowed:
- Editing (or copy/paste) as HTML
- Possible to select some text and apply a style via the buttons in the ribbon bar:
Customization options in Tridion
All this freedom for a content manager may drive front-end developers insane since they need to support all of it with their CSS. Luckily, there are 3 customization options within Schema design to limit the RTF features:
- Disable buttons in the ribbon bar
- Configure custom styles (matching the class names in CSS)
- Filter unwanted HTML (with help of XSLT)
These can be configured per schema content field:
Example case - Transforming HTML
XSLT is a complex but powerful language for transforming XML from one format to another. HTML is just a form of XML and thus XSLT can be used to free RTF content from unwanted tags.
Here, I want to demonstrate how to implement the following requirements:
- Make sure all bold texts are using <strong> tag element (and not <b> tag, which is default). This mechanism can later also be applied for converting italic <i> tag to <em> tag, etc.
- Only paragraphs, breaks and bold should be allowed in the HTML. This results in the following HTML tags: <p>, <br /> and <strong>
Converting from one HTML tag to another
The 1st requirement can be implemented by inserting the following fragment into the default XSLT:
<xsl:template match="b">
<xsl:element name="strong">
<xsl:apply-templates select="node()"></xsl:apply-templates>
</xsl:element>
</xsl:template>
What it does is: when a tag is <b> found, replace it with a <strong> tag and continue XSLT rendering for the inner value of the node.
Filtering unwanted tags
For filtering you basically have two approaches:
- Black-listing: unwanted tag elements. Use when you want to allow all tags, and exclude a few unwanted tags.
- White-listing: specify the tag elements you want to keep. Use when the set of allowed tags is known.
In general (as in security), white-listing is the preferred method. Explicitly allowing specific tags gives you the most control over the output and rule out any 'forgotten' tags to appear in the HTML.
The 2nd requirement can be implemented by using the following fragment in XSLT:
<xsl:template match="/ | node() | @*">
<xsl:copy>
<xsl:apply-templates select="/ | p | b | br"></xsl:apply-templates>
</xsl:copy>
</xsl:template>
This fragment is basically processing all X(HT)ML elements and it copies only the allowed tags to the output to be processed further.
Complete XSLT solution
Below the complete file, including a conversion for <i> to <em>.
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output omit-xml-declaration="yes" method="xml" cdata-section-elements="script"></xsl:output>
<xsl:template match="*[ (self::br or self::p or self::div) and normalize-space(translate(., ' ', '')) = '' and not(@*) and not(processing-instruction()) and not(comment()) and not(*[not(self::br) or @* or * or node()]) and not(following::node()[not( (self::text() or self::br or self::p or self::div) and normalize-space(translate(., ' ', '')) = '' and not(@*) and not(processing-instruction()) and not(comment()) and not(*[not(self::br) or @* or * or node()]) )]) ]">
<!-- ignore all paragraphs and line-breaks at the end that have nothing but (non-breaking) spaces and line breaks -->
</xsl:template>
<xsl:template match="br[parent::div and not(preceding-sibling::node()) and not(following-sibling::node())]">
<!-- Chrome generates <div><br /></div>. Renders differently in different browsers. Replace it with a non-breaking space -->
<xsl:text> </xsl:text>
</xsl:template>
<!-- added bold to strong conversion -->
<xsl:template match="b">
<xsl:element name="strong">
<xsl:apply-templates select="node()"></xsl:apply-templates>
</xsl:element>
</xsl:template>
<!-- added italic to em converter -->
<xsl:template match="i">
<xsl:element name="em">
<xsl:apply-templates select="node()"></xsl:apply-templates>
</xsl:element>
</xsl:template>
<xsl:template match="/ | node() | @*">
<xsl:copy>
<xsl:apply-templates select="/ | p | b | i | br"></xsl:apply-templates>
</xsl:copy>
</xsl:template>
</xsl:stylesheet>