I have created styles to be used in the text editor for TInyMCE. When I got to apply a class to some text, it creates a span tag all of a sudden. Any way around this?
Name: Page Title Alias: .pageTitle Styles: font-size:2em;
I type "Our Products" into TinyMCE, highlight it, go to the dropdown and select "Page Title." The style is applied, rendered like this:
I originally had a margin-bottom on the style as well, but deleted that thinking it was somehow creating that span. Thanks in advance for help and suggestions!
As far as I remember this <span> stuff has been going on always when defining classes to be used in the RTE, unless it's elements you're trying to style, like heading elements for instance.
I must admit that I have not investigated the issue further to see if there is a way around this so that the class is just applied to the element instead of the insertion of the extranous <span> element.
So actually I'm also interested to hear if there are some out there who has a great workaround for this. :-)
No I don't think that it's something to do with particular class names. I think it's a bit random what happens when you're trying to apply a class to an element, like the ones you have shown above.
However something in my backhead is telling me that it's actually possible to pass the class name to an <img> element without the <span> being added. Maybe because the <img> element is selfclosed...I can't remember exactly. Have not really been dealing with this issue since v3 a couple of years ago :-)
But surely some others people in here have spent more time dealing with it and have some advise for your :-)
You are absolutely right - if it's headings that needs to be marked up h1,h2 etc IS the way to go. No doubt about that.
And if it this Phillip is trying to achieve it's a matter of defining it as
Name: Heading 1 Alias: h1 Styles: color: Green;
etc.
Then the chosen text in the RTE field, will be wrapped inside a <h1> element instead of a <span>.
But if it's to be able to make some paragraphs a different color than the others the other approach is the way to go, unless it's safe to use som advanced CSS selector to be able to target different paragraphs based on their position etc.
Applying styles in TinyMCE creates spans
Hi
I have created styles to be used in the text editor for TInyMCE. When I got to apply a class to some text, it creates a span tag all of a sudden. Any way around this?
Name: Page Title
Alias: .pageTitle
Styles: font-size:2em;
I type "Our Products" into TinyMCE, highlight it, go to the dropdown and select "Page Title." The style is applied, rendered like this:
<p><span class="pageTitle">Our Products</span></p>
I originally had a margin-bottom on the style as well, but deleted that thinking it was somehow creating that span. Thanks in advance for help and suggestions!
Hi Phillip
As far as I remember this <span> stuff has been going on always when defining classes to be used in the RTE, unless it's elements you're trying to style, like heading elements for instance.
I must admit that I have not investigated the issue further to see if there is a way around this so that the class is just applied to the element instead of the insertion of the extranous <span> element.
So actually I'm also interested to hear if there are some out there who has a great workaround for this. :-)
/Jan
Thanks for your quick response! There is another style in the css
Name: Green Text
Alias: .greenText
Styles: color: Green;
When I select this in the rte, the class is applied directly to the element, without creating the extra span. Might this depend on the type of style?
Hi Phillip
No I don't think that it's something to do with particular class names. I think it's a bit random what happens when you're trying to apply a class to an element, like the ones you have shown above.
However something in my backhead is telling me that it's actually possible to pass the class name to an <img> element without the <span> being added. Maybe because the <img> element is selfclosed...I can't remember exactly. Have not really been dealing with this issue since v3 a couple of years ago :-)
But surely some others people in here have spent more time dealing with it and have some advise for your :-)
/Jan
I know this does not answer your question, but maybe it would be more appropriate to use a H1 for this purpose.
Hi Christer
You are absolutely right - if it's headings that needs to be marked up h1,h2 etc IS the way to go. No doubt about that.
And if it this Phillip is trying to achieve it's a matter of defining it as
Name: Heading 1
Alias: h1
Styles: color: Green;
etc.
Then the chosen text in the RTE field, will be wrapped inside a <h1> element instead of a <span>.
But if it's to be able to make some paragraphs a different color than the others the other approach is the way to go, unless it's safe to use som advanced CSS selector to be able to target different paragraphs based on their position etc.
/Jan
is working on a reply...