Allowing HTML 5 Attributes in Tridion Rich Text Fields

I have recently ran into a dilemma where if an HTML 5 data attribute (any attribute in the form of data-*) was added to an anchor tag within a Rich Text Field, the Tridion GUI would strip it out.  There are a couple of solutions to this problem… 

One of the ways to tell the Tridion GUI to allow various attribute tags is via the TcmXHTML.config file.  This file is located in Tridion\web\WebUI\Core\Controls\FormatArea\TcmXhtml and contains the following by default:

numeric-entities: true
drop-empty-paras: true
drop-proprietary-attributes: true
break-before-br: true
word-2000: false
wrap: 0
tidy-mark: false
uppercase-tags: false
uppercase-attributes: false
output-xml:true
logical-emphasis: true
fix-backslash: false
char-encoding: utf8
input-encoding: utf8
output-encoding: utf8
fix-uri: true
indent-cdata: false
//indent: auto
new-blocklevel-tags: article aside canvas details figcaption figure footer header hgroup nav output progress section video
new-inline-tags: audio datalist mark meter summary time
new-empty-tags: command source track

The “drop-proprietary-attributes” is the parameter of interest in this case.  If we set its value to “false”, then the Tridion GUI will allow any attributes on the XHTML elements within an RTF. 

The pro for the above solution is that it’s a very easy change.  The attributes get passed down into Dynamic Linking embedded within a linkAttributes element, so that’s not a worry.  

The con is that the content editor can put whatever attributes they like with disregard whether it’s valid HTML 5 or not.  A thank you goes out to Mark Saunders for showing this to me.  Nuno also makes a good argument regarding the use of this config file in his answer to this SO question: How to add custom tags to rich text field in SDL Tridion?

Another way of achieving the same result is to use the class attribute in conjunction with some JQuery logic on the front-end.  This solution is explained in the following Stack Overflow post: how to add the custom elements in the RTF field of a component in SDL Tridion 2011 Sp1 

I should also point to a nice article posted by Alvin discussing a similar topic: http://www.tridiondeveloper.com/rich-text-format-area-css-classes-vs-custom-xml-nodes.  It provides other techniques on how to style elements within a Rich Text Field.

4 thoughts on “Allowing HTML 5 Attributes in Tridion Rich Text Fields

  1. Also note that the additions/updates to the TcmXhtml should be noted as updates to this file may not be supported by SDL Tridion Support and could be overwritten in future Hotfixes/udpates.

  2. Pingback: Rich Text Format Area CSS Classes vs. Custom XML Nodes | SDL Tridion Developer

  3. HTML Attributes are property of the elements which may have values and these attribute values are always enclosed in quotes. It’s providing to the browser with some additional information about an elements how the elements should appear or behave. HTML elements can contain one or more attributes, attribute names and attribute values are case-insensitive and separated by an equals (=) sign.

    [HTML Attributes](http://www.willvick.com/HTML/HTMLAttribute.aspx)

    [HTML Attributes Examples](http://www.willvick.com/HTML/HTMLExampleAttribute.aspx)

    [Youtube – HTML Tutorial – Attributes](http://www.youtube.com/watch?v=ucOXvaCEZgg)

  4. Pingback: Customizing An Existing Tridion Popup Dialog | Coded Weapon

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>