Prevent WYSIWYG editor adding unwanted span tags
We have several content editors editing multiple websites and every now and then they will want to set a background colour on a block level element e.g. a paragraph or a header. If they highlight the entire block in design view and set a background colour, it will only set the colour on the text instead of the whole block. This is because the editor is wrapping the text in span tags, which is obviously an inline element, and adding the style to that.
As simple as it may be to fix this in HTML view, the content editors can't be expected to learn how to write HTML. So, is there any way to prevent these span tags from being inserted, as it is immensely annoying?
In order to style the entire block I would suggest you to add a custom class on that Content block and than use CSS Widget on that page instead of inline styles.
A short video demonstration is available here.
Thanks, Svetoslav. So basically there's no easy, non-technical way for Content Editors to be able to style the entire block, as opposed to just the text in the block? They would have to understand how to write HTML & CSS or ask us developers to do it for them?
This is the default behaviour of that background functionality, as this styles the edited line. Page styling is usually made in the external CSS file.
In order to facilitate the editors work, you could add dedicated styles for Footer, Header, etc, in your main.css file and to ask the Editors just to add a specific class in the Content Block. For example cbFooter, cbHeader, etc. Thus the ContentBlock will be styled "automatically".