Extra divs appearing in rich text editor

Question

We're using the HTML Styles menu to give our content editors predefined headers to use when creating pages.

In order to allow them to remove formatting they have added, I've created a paragraph option.

p.custom-stylesElement-P {
  -ms-name:"Paragraph";
}

Great in theory, in practice though it causes problems. If an editor for example has a page where the markup looks like:

<p>First paragraph</p>
<p>More text</p>

If they select all that and select the paragraph style (if they added headings or other body style they no longer want), the RTE gets a bit confused about how to handle style multiple paragraphs and decides we need some extra markup. We end up with:

<p>First paragraph</p>
<div>&#160;</div>
<p>More text</p>
<div>&#160;</div>

After a few iteration of this, our editors are ending up with rather a lot of white space they're not expecting.

I've asked editors to just select one element at a time when making changes but this isn't ideal - is there a better way of users stripping formatting in the RTE?

Answer 1

This is a common issue with all wysiwyg editors.

The Telerik version also has this issue but with Spans.

The issue is due to validation rules. When the HTML doesn't validate it attempts to fix the HTML by adding in code that "Should" validate the HTML. But it rarely works and every time you edit you get an extra set of tags.

So the only real solution is to make an event receiver to strip them out.

Sorry you can't turn off validation.