I have and issue with the styling of rich text elements. I've searched the forums and haven't found a solution that could fix the issue for me. Writing a forum post is always my last stretch if I can't fix an issue by research, and I'm afraid I've come to that point.
As you can see the styling does not apply in the formats tab. It worked for a brief moment and then suddenly not. I managed to apply one style but after adding more it stopped working again.
You can see and example of the styling here. I add them using Umbraco's backoffice, to make sure Umbraco recognizes them.
Here you can see what it looks like in the CSS file which is located at /css/rte.css
Things seem to be looking good.
I have also made sure that the CSS file is loaded in the HTML document
And made sure that the right MCE uses the right stylesheet
That's all I can think of. I've done hard refresh, tried multiple browsers etc. and it just won't work.
Welcome to my world! I had the same issue a while ago and was complaining on the forums about it. RTE is wonky and what I've done is just a workaround that works pretty well overall.
Instead of relying on the css it produces on its own, what I did was move the css into an actual css file. So, I made empty classes in the rte and then wrote in my actual css file something like
.rteClassIMade {
//your style here
}
What rte does is creates classes and p and li tags indefinitely and in a really weird way. So, something important is to have a 'reset text' format, that will just remove all the previous classes.
If you don't do that, it will just keep adding classes on its own. The client I built it for has to
Select the text he wants to edit,
Hit reset text,
Then select the style he wants.
That's the only consistent way I have as a workaround to the wonky rte Umbraco has.
edit: Now that I'm reading again what you've done, maybe you only need to have a reset text format. To just remove the previous class before it adds a new one. Every time you select text it will do:
<p class="class1 class2 class3"></p>
Instead of removing the first class and adding the second.
At first I wasn't sure what you meant but your fix applies to the problem that came after I got the styles showing.
So I checked the HTML tags to see what it did with classes and noticed that it added class="text h4" which wouldn't work in HTML the way it does in CSS if you write .text h4 {...
This means that RTE will not allow to mix classes and tags so I have to use either formatting tags OR classes. This seemed to fix the problem and then I got to the issue you mentioned. How it just adds new classes.
Using the Clear Formatting feature in the RTE seems to work by resetting it to a
tag. So what I've done is style the body text with just p {... in CSS and everything else gets a dedicated class.
Oh boy this one had me pull out hairs but seems that it's just a simple misunderstood functionality from my side and then some wonky class adding as you mentioned.
Thank you a ton for your help!! It was just what I needed!! I'll mark your answer as the solution.
I didn't get as far as to try the edit you suggested cause it seemed that the Clear Formatting feature took care of removing the unwanted classes, so you were absolutely right that some kind of reset format feature is needed but I'm not quite sure I understand how your edit would work.
So you create empty classes in the rte.css with the names and then in your primary css file you add in the styles with the class names? So say if I were to write .text h4, that would be the name in the rte.css and then in your main css file you'd write .text .h4 {...
Or am I getting it completely wrong?
I can see how that'd work though, it's just applying two classes instead of making a h4 tag in the html.
Rich Text editor styles doesn't apply
Hello lovely Umbraco people!
I have and issue with the styling of rich text elements. I've searched the forums and haven't found a solution that could fix the issue for me. Writing a forum post is always my last stretch if I can't fix an issue by research, and I'm afraid I've come to that point.
As you can see the styling does not apply in the formats tab. It worked for a brief moment and then suddenly not. I managed to apply one style but after adding more it stopped working again.
You can see and example of the styling here. I add them using Umbraco's backoffice, to make sure Umbraco recognizes them.
Here you can see what it looks like in the CSS file which is located at /css/rte.css Things seem to be looking good.
I have also made sure that the CSS file is loaded in the HTML document
And made sure that the right MCE uses the right stylesheet
That's all I can think of. I've done hard refresh, tried multiple browsers etc. and it just won't work.
I'm using Umbraco 7.10.0
I'm looking forward to hear from you. :)
//Peter
Welcome to my world! I had the same issue a while ago and was complaining on the forums about it. RTE is wonky and what I've done is just a workaround that works pretty well overall.
Instead of relying on the css it produces on its own, what I did was move the css into an actual css file. So, I made empty classes in the rte and then wrote in my actual css file something like
What rte does is creates classes and p and li tags indefinitely and in a really weird way. So, something important is to have a 'reset text' format, that will just remove all the previous classes.
If you don't do that, it will just keep adding classes on its own. The client I built it for has to
Select the text he wants to edit, Hit reset text, Then select the style he wants.
That's the only consistent way I have as a workaround to the wonky rte Umbraco has.
edit: Now that I'm reading again what you've done, maybe you only need to have a reset text format. To just remove the previous class before it adds a new one. Every time you select text it will do:
Instead of removing the first class and adding the second.
At first I wasn't sure what you meant but your fix applies to the problem that came after I got the styles showing.
So I checked the HTML tags to see what it did with classes and noticed that it added class="text h4" which wouldn't work in HTML the way it does in CSS if you write .text h4 {...
This means that RTE will not allow to mix classes and tags so I have to use either formatting tags OR classes. This seemed to fix the problem and then I got to the issue you mentioned. How it just adds new classes.
Using the Clear Formatting feature in the RTE seems to work by resetting it to a
tag. So what I've done is style the body text with just p {... in CSS and everything else gets a dedicated class.
Oh boy this one had me pull out hairs but seems that it's just a simple misunderstood functionality from my side and then some wonky class adding as you mentioned.
Thank you a ton for your help!! It was just what I needed!! I'll mark your answer as the solution.
//Peter
Glad I could help. So, the rte.css works properly if you follow my edit?
That's a question for future reference for me. I was panicking back then because I'd miss the deadline so I didn't test it.
However, even if it does, from a speed perspective, I'd still keep it the main css file to save the roundtrip.
I didn't get as far as to try the edit you suggested cause it seemed that the Clear Formatting feature took care of removing the unwanted classes, so you were absolutely right that some kind of reset format feature is needed but I'm not quite sure I understand how your edit would work.
So you create empty classes in the rte.css with the names and then in your primary css file you add in the styles with the class names? So say if I were to write .text h4, that would be the name in the rte.css and then in your main css file you'd write .text .h4 {... Or am I getting it completely wrong? I can see how that'd work though, it's just applying two classes instead of making a h4 tag in the html.
Hi Peter
I dont think you can get the RTE to make two elements from the styles dropdown. But If you need to have
h2,h3etc. you can use tinyMceConfig.config.Check out this blog post, explaining how to do more complex styles: https://www.justnik.me/blog/umbraco-rte-styles-another-way
Hi Søren
This is indeed a very helpful resource! It looks like something I can definitely use!
Thank you for sharing! :)
is working on a reply...