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