Rich Text editor always adds SPAN with Custom Styles - no likey

CM1
1

For example I want to style some text as h1, then choose “Box 1” from the Format > Custom Styles menu. I end up with an h1 tag with a SPAN tag inside it that gets the perc-box-1 class assigned to it.

Why can’t it assign the class to the h1 tag? This happens with all Custom Styles and it also happens if the text is paragraph.

The only workaround it to go into code view and edit. Thats fine for me but our non-html savvy editors shouldn’t have to do this.

2

Shouldn’t the logic for the Custom Styles search backwards from the selected text, find the fist tag it comes to and add the class to that tag? That way it would work for paragraph, h1 thru h6, divs etc?

3

Hi Conan.

The default function of the Custom styles is to add the class to a Span tag that it wraps around the selected text. This is designed this way to make this feature more flexible. This way you can apply the custom styles to a single word or a section of content.

  • Armani
4

Thanks Armani,

It makes sense to wrap a single word or section of content in a span tag _ when _ that content is inline with other content _ and unstyled _, but it seems to me that if the highlighted text is already surrounded by a tag, like div, strong, em, h1 etc, that the class would get applied to that tag instead. That would add a bit of extra intelligence.

Basically when I highlight some text, select h1, then Box 1, I end up with:


# Headline

Where my desired result would be:

# Headline

Just sayin’

5

Touche! I can understand where your coming from. That would be an improvement. You should post this as an Idea.

Just curious, is there a reason why you would like to see this changed? For example are you having an issue with css because of this behavior that I can help you with? Or is this causing any other issues?

6

Thanks Armani, I think I will.

This is something that can easily corrected by switching into code view, but as I mentioned in my first post, that’s fine for me, but our non-html fluent editors, it’s not. And in my opinion, they should never have to switch to code view. That defeats the purpose of having a good rich text editor. At the moment, the scenario I wrote above - applying the class to the h1 - is impossible to accomplish without using the code view.

7

Thanks for thinking of us non-coding webmasters, Conan!

8

Hello everyone.

I’m brand new around here, but thought I’d add the CSS selector method to target those span elements within the h1 mentioned above - just in case anyone was wondering.

h1 span.perc-box-1 { /*css code*/ }

The extra span element doesn’t necessarily hurt anything, but it does add unneeded complexity to the HTML markup. In either case, if most users are staying within the comfort of a WYSIWYG rich text editor, then I doubt they’ll ever notice the difference of having an extra span element. Or am I missing something?

9

Welcome to the community Ricardo.

My issue was that the code could be a little smarter and search outward from the selected text and apply the class to the immediately found tag (if there is one) versus just adding a span no matter what. For one thing an h1 is a block level element and a span is inline.

I realize that one could just add display:block to the css to solve that issue, but as you said, it adds unneeded complexity to the markup.

10