Tridion Rich Text Field Add CSS

Question

I have a rich text field, and would like to add CSS class to each underline of the the rich text content. Please suggest

Answer 1

Rich Text styles can be configured in the CMS.

To do this you must

1. edit the FormatAreaStyles.css to add the styles you want.
2. Update the SDL version number.
3. Restart the Tridion CMS services.
4. Flush Browser Cache.
5. Then select the underlined text.
6. You can then select your styles from the Ribbon | Styles.

Answer 2

There are several different concerns at play here.

The first is functional: it's a standard convention on the Web to use an underline to identify a link. If you underline text that isn't a link, you may confuse a proportion of your visitors, so consider whether you actually want to do this at all.

Next is the format area itself. As Chris has said, you can make an underline style available via the Format Area style sheet. Then you'll have two mechanisms for underlining things, so you'll also want to disable the underline button in the toolbar. This is easy enough to do in the Allowed Actions tab of the Formatting features of the RTF in the schema, but then you've removed the obvious way of doing it and replaced it with a less obvious way. Sure - you can fix that too, by creating a GUI extension, but I'd argue that you shouldn't do any of this.

The third concern is what you actually want to have in your web site. There's no earthly reason why the web output needs to be identical with the representation in the Rich Text field itself. A Rich Text field actually represents the data as an XML document. This makes it relatively simple programatically to grab hold of the spans with the relevant style attribute and transform them to spans with a class. Where you do this depends on your architecture. If you're templating on the Content Manager, then you can make a template building block that does this, and in an MVC application you'd take care of this during or prior to rendering the view.

That's how I'd do it; just leave things as they are in the Rich Text field, and transform the data to the required output either in templating or in your application.