Modify the WYSIWYG editor

Question

When using the WYSIWYG editor there a <p> tags created on certain places. We want to create a list <li></li> but the styling defines it in a specific way while the Tridion WYSIWYG editor does not generate this kind of HTML (placing

tags in between).

Is there any possible solution to avoid this kind of behaviour and make a list object in the editor the same as it's defined in the slicing?

I'm thinking about extending the editor or writing a custom one.

Note: I'm using Tridion 2011

Answer 1

If I get your question correctly, you are trying to have custom HTML for unordered lists:

Something like (or any other html variation):

<ul>
  <li>
  <span class="something">My Text</span>
 </li>
</ul>

To modify the default HTML that is created, there is a feature called "Filtering XSLT", you can find it on the Schema definition, select your RTF and the button "Formatting Features".

This XSLT will be applied to your RTF on save, or when you change tabs: design/source, and can perform any changes that you need to the RTF markup.

Some details can be found on the Live Content Documentation: Creating a Format Area Fields (requires login)

Answer 2

Voted up Punteros answer, but I've also had success with adding custom styles in the editor drop-down via the Format Area style-sheet and then picking this out in TBB or in my case (DD4T) Html Helper code and adjusting the physical Html structure accordingly.

Answer 3

I actually don't see additional tags in author-created lists. At least in 2011 SP1, authors using the bullet option in a rich text format area creates unordered lists.

For example:

<p>As an author, I want to create a list:</p>
<ul>
<li>This is the first item in my list</li>
<li>And this is my second list item</li>
</ul>

Earlier versions of SDL Tridion 2011 had different markup behavior based on browser, specifically on paragraphs. The fix was indeed through an update to the default XSLT filter. Contact Support if you're experiencing unexpected behavior, especially across different browsers.

How to Manually Adjust

When authors have unwanted <p> tags within lists, they can change Section Type to Body Text. They don't need to know markup; they just be able to know when selecting a List Item, they may or may not want Paragraphs inside them.

Neil's approach with custom styles is a nice way to add different "types" of lists, especially if slicing refers to the desired HTML markup. Do consider "templating" the markup based on component presentation (changing components or fields based on a given schema and/or template).

How to Choose an Approach

Be careful with changing the stored CMS-side content. I prefer RTF Filters when the markup is "wrong", but templating options when you know it will change in the next site design change.

RTF Filter Consider a Rich Text Format Area XSLT Filter to restrict or clean up classes, styles, and markup (even when authors have access to a field's source). I would consider these semantic changes and fixes. Follow up on Puntero's answer, especially if the "something" CSS class is a non-changing, functional feature of the lists in a given field.

Templates Consider template code to add site-specific classes, styles, and markup to match design choices that may likely change.

As much as possible, avoid baking in style-specific requirements into rich text fields. Though we might use styles (css classes), it's still a semantic selection to authors, meaning it has some business meaning.