Header tag formatting in RTE not rendering in page
I was piloting Umrace CMS (v7.5.6) and has some issues with RichTextEditor. I created new Landing page and tried adding few text contents. I tried to format few text contents as H2 headers but to my surprise, that are not rendered as H2 headers. Instead, it's rendered inside SPAN element with Id=Header2.
Fig: View in RTE, where H2 format is selected
Fig: Text rendered in browser
Fig: HTML view of text rendered in browser
Any idea why the formatting is not working? Do I need to enable any particular settings for this?
Hi, Abhilash, and welcome to the Umbraco community!
You're super-close to getting what you want to happen. The issue is that the style that is showing up in the RTE is using an 'alias' that is the same as the 'name'. Meaning, you called the style 'Heading 2' and by default Umbraco will use that as the alias that should be used under the hood when it is selected in the RTE.
Instead, you want to set the name to something that makes sense for the content editors. Heading 2 makes good sense there. And then over-ride the 'alias' to be H2.
Thanks @Douglas for the reply. Did you meant to say that for options available under Formats in RTE, I need to have styles in my CSS. From a user point of view, I expect if H2 is the format I selected, it should be rendered as H2 tag. Not sure, why that's not the case here.
Also, thanks for the tutorial link. I'll watch and learn for sure.
To set formats for headers just go to settings section then stylesheets then choose rte and under it choose for example h1 and in styles just write h1 and save.
Note : in styles you can put html tag or css formats
Sorry for the late reply guys. It was holiday here.
I made the necessary updates and mapping in stylesheet and it works like a charm. However, one thing still I am not sure is why this was not enabled out-of-the-box because the editor already had few styles under Format and a user expects it to work without doing any mapping. For custom formats, user is expected to make the edits which is expected behavior.
Another interesting thing I noted was, we already had v7.2.4 of Umbraco where the formatting supports out of the box means I can simply type-in the text and select formatting from RTE and it just works. Not sure why this feature was removed in later versions. Either way, the issue is solved now.
Thank you very much for your valuable comments and sharing necessary pointers. Have a great holiday and New Year :).
Header tag formatting in RTE not rendering in page
I was piloting Umrace CMS (v7.5.6) and has some issues with RichTextEditor. I created new Landing page and tried adding few text contents. I tried to format few text contents as H2 headers but to my surprise, that are not rendered as H2 headers. Instead, it's rendered inside SPAN element with Id=Header2.
Fig: View in RTE, where H2 format is selected
Fig: Text rendered in browser
Fig: HTML view of text rendered in browser
Any idea why the formatting is not working? Do I need to enable any particular settings for this?
Any help will be appreciated.
Thanks.
Hi, Abhilash, and welcome to the Umbraco community!
You're super-close to getting what you want to happen. The issue is that the style that is showing up in the RTE is using an 'alias' that is the same as the 'name'. Meaning, you called the style 'Heading 2' and by default Umbraco will use that as the alias that should be used under the hood when it is selected in the RTE.
Instead, you want to set the name to something that makes sense for the content editors. Heading 2 makes good sense there. And then over-ride the 'alias' to be H2.
This free umbraco.tv video shows you exactly what to do. http://umbraco.tv/videos/umbraco-v7/implementor/fundamentals/stylesheets-and-javascript/setting-up-rte-styles/
cheers,
doug.
Thanks @Douglas for the reply. Did you meant to say that for options available under Formats in RTE, I need to have styles in my CSS. From a user point of view, I expect if H2 is the format I selected, it should be rendered as H2 tag. Not sure, why that's not the case here.
Also, thanks for the tutorial link. I'll watch and learn for sure.
Hi,
When you set the style up in the stylesheet, did you give it an alias of h2 rather than .h2?
I have had this problem several times and if you have the . it thinks it's a style rather than an html tag.
Hope this helps. :)
Chris
Hello Abhilash
To set formats for headers just go to settings section then stylesheets then choose rte and under it choose for example h1 and in styles just write h1 and save. Note : in styles you can put html tag or css formats
Sorry for the late reply guys. It was holiday here.
I made the necessary updates and mapping in stylesheet and it works like a charm. However, one thing still I am not sure is why this was not enabled out-of-the-box because the editor already had few styles under Format and a user expects it to work without doing any mapping. For custom formats, user is expected to make the edits which is expected behavior.
Another interesting thing I noted was, we already had v7.2.4 of Umbraco where the formatting supports out of the box means I can simply type-in the text and select formatting from RTE and it just works. Not sure why this feature was removed in later versions. Either way, the issue is solved now.
Thank you very much for your valuable comments and sharing necessary pointers. Have a great holiday and New Year :).
is working on a reply...