Is there a way to add a class to an element using the RTE without adding a span tag. (or editing code)
Hi Guys,
I've seen posts about this issue from as far back as 2010 but I've not found a solution. Plenty of work arounds for those particular issues (some good, some not so good) but hardly a solution despite many of these posts being marked as resolved.
Trying to add a class to an element via the Ricth Text Editor always (in my experience) wraps the particular element in a span tag and adds the class to the span tag rather than adding the class to the element in question.
e.g., If I click an image and select a class from the formats dropdown in RTE, rather than add the class to the image tag it will wrap the whole thing with a span tag and add the class to the span.
If I select a UL it will wrap each of the LI with a span and add the class to each of those span tags or wrap the complete UL in a span and add to it. I guess it depends on how the element is selected in the RTE prior to selecting the class from the formats dropdown.
Is this still an issue with Umbraco after all this time? I can't expect the end user to edit code to add a class, and the results of wrapping an element with a span and adding the class that way doesn't always provide the desired results.
Is this a known issue or part of the design? If part of the design is there a certain way I should be putting the CSS together to make the wrapped span work?
I was trying to do something as simple as change a background color to a h1 tag added through the RTE. If the h1 was multiline, the nested span with background color looked different, than if it was on the h1 tag itself.
I tried a few things, and what turned out to work was quite simple. If its something new, added (to Umbraco/TinyMCE since the OP posted the question I don't know. But for anyone having the same problem:
Try adding the to the css for the rte with "tag.className"-notation.
When having text selected in the RTE, this turned out to both add the tag and the css class to that tag. Exactly what I wanted. Not adding that redundant/bloating span.
Is there a way to add a class to an element using the RTE without adding a span tag. (or editing code)
Hi Guys,
I've seen posts about this issue from as far back as 2010 but I've not found a solution. Plenty of work arounds for those particular issues (some good, some not so good) but hardly a solution despite many of these posts being marked as resolved.
Trying to add a class to an element via the Ricth Text Editor always (in my experience) wraps the particular element in a span tag and adds the class to the span tag rather than adding the class to the element in question.
e.g., If I click an image and select a class from the formats dropdown in RTE, rather than add the class to the image tag it will wrap the whole thing with a span tag and add the class to the span.
If I select a UL it will wrap each of the LI with a span and add the class to each of those span tags or wrap the complete UL in a span and add to it. I guess it depends on how the element is selected in the RTE prior to selecting the class from the formats dropdown.
Is this still an issue with Umbraco after all this time? I can't expect the end user to edit code to add a class, and the results of wrapping an element with a span and adding the class that way doesn't always provide the desired results.
Is this a known issue or part of the design? If part of the design is there a certain way I should be putting the CSS together to make the wrapped span work?
Anyone?
I'm assuming, by the lack of people answering, that this is not possible.
You can have a look on the below link : It is not umbraco specific though...
https://sitecore.stackexchange.com/questions/4940/apply-css-class-around-p-rich-text-editor-sitecore-8-2u2
My solution:
https://www.justnik.me/blog/umbraco-rte-styles-another-way is everything you need.
Short story - updating the tinymce.config file lets you do all sorts of magical things, and results in clean, cruft-free HTML.
I was trying to do something as simple as change a background color to a h1 tag added through the RTE. If the h1 was multiline, the nested span with background color looked different, than if it was on the h1 tag itself.
I tried a few things, and what turned out to work was quite simple. If its something new, added (to Umbraco/TinyMCE since the OP posted the question I don't know. But for anyone having the same problem:
Try adding the to the css for the rte with "tag.className"-notation.
/**umb_name:Kampagne titel*/ h1.campaignHeader { color: #F00; background-color: #0F0; }When having text selected in the RTE, this turned out to both add the tag and the css class to that tag. Exactly what I wanted. Not adding that redundant/bloating span.
is working on a reply...