Hey there, I'm new to Umbraco and struggling a bit with the Styles dropdown in the TinyMCE editor.
I've searched the forum for an answer but nothing answers my questions just yet.
I have a project that uses SASS & Foundation to pump out a CSS file with styles used by the site that I want to appear in the editor.
My editor.css file has simple styles like
h1.large{}
.errorText{}
etc
I've set the editor to use editor.css in the Rich Text Editor properties pane. I see the styles in my content, but the styles drop down remains empty.
Adding the styles via Umbraco is insufficient, because it re-writes the editor.css file completely, removing required CSS. Also using the manual method outlined on the TinyMCE site (http://www.tinymce.com/wiki.php/Configuration3x:theme_advanced_styles) doesn't work since Umbraco doesn't seem to have an init function, and it also doesn't work when I add it to tinyMceConfig.config using and is also tedious when you have hundreds of styles that need to be manually mapped and changed often.
I have also tried adding my editor.css file directly with:
However, this still doesn't populate the styles dropdown list, though does show the styles inside the editor window.
So, is it possible to have Umbraco/TinyMCE use the classnames in my editor.css to populate the Styles dropdown on the TinyMCE editor? Basically all I want the editor to do is use the file supplied by my project.
You should add the styles in the settings section in the "stylesheets" folder.
Create a stylesheet called "rte" and then right click it and add the needed styles. Make sure that the alias is either a class name or a html tag like <h1> etc.
Associate the rte.css with your rich text editor.
Don't add any kind of styling to this stylesheet, just let it be used to add the styles and elements to the rich text editor.
Handle the styling in whatever stylesheet you want to - just don't add any styling in the rte.css.
Jan, if you read above, this is what I've tried. It's not suitable due to the fact that my site & content styles are generated with SASS and change often, often out of my control.
This means everytime they change, we have to update umbraco manually. With hundreds of styles, this is not maintainable.
My point is that the rte.css created in Umbraco containing the dropdown styles should not contain any styling of the elements and classes that can be added within the rich text editor.
The styling can be set in another stylesheet, which is included in your master page.
However if you want to make sure that the styles dropdown is populated automatically every time you add some new elements or classes so the dropdown options reflect this stylesheet automatically I'm actually not sure if this works on Umbraco 4.11 / 6 or if you still will need to enter these values manually.
I remember seeing something in V5 (Which was killed during CG12 last year) where you could populate the styles dropdown by adding comments in the css file like
/* Header 1 */
H1{}
/* Header 2 */
H2{}
Etc.
Where the comments would be the name in the styles dropdown. However I'm not sure this feature made it into the continuation of 4.11 and V6. Perhaps it's something we should add as a feature request at http://issues.umbraco.org/dashboard since it would be very nice imho.
Hope the above makes sense and that I have understood you correctly :)
TinyMCE styles, styles dropdown and Umbraco
Hey there, I'm new to Umbraco and struggling a bit with the Styles dropdown in the TinyMCE editor.
I've searched the forum for an answer but nothing answers my questions just yet.
I have a project that uses SASS & Foundation to pump out a CSS file with styles used by the site that I want to appear in the editor.
My editor.css file has simple styles like
h1.large{}.errorText{}I've set the editor to use editor.css in the Rich Text Editor properties pane. I see the styles in my content, but the styles drop down remains empty.
Adding the styles via Umbraco is insufficient, because it re-writes the editor.css file completely, removing required CSS. Also using the manual method outlined on the TinyMCE site (http://www.tinymce.com/wiki.php/Configuration3x:theme_advanced_styles) doesn't work since Umbraco doesn't seem to have an init function, and it also doesn't work when I add it to tinyMceConfig.config using and is also tedious when you have hundreds of styles that need to be manually mapped and changed often.
I have also tried adding my editor.css file directly with:
<customConfig> <config key="content_css">./css/app.css</config> </customConfig>However, this still doesn't populate the styles dropdown list, though does show the styles inside the editor window.
So, is it possible to have Umbraco/TinyMCE use the classnames in my editor.css to populate the Styles dropdown on the TinyMCE editor? Basically all I want the editor to do is use the file supplied by my project.
Hi Mo and welcome to our :)
You should add the styles in the settings section in the "stylesheets" folder.
Create a stylesheet called "rte" and then right click it and add the needed styles. Make sure that the alias is either a class name or a html tag like <h1> etc.
Associate the rte.css with your rich text editor.
Don't add any kind of styling to this stylesheet, just let it be used to add the styles and elements to the rich text editor.
Handle the styling in whatever stylesheet you want to - just don't add any styling in the rte.css.
Hope this makes sense.
/Jan
Jan, if you read above, this is what I've tried. It's not suitable due to the fact that my site & content styles are generated with SASS and change often, often out of my control.
This means everytime they change, we have to update umbraco manually. With hundreds of styles, this is not maintainable.
Hi Mo
I've indeed read what you wrote above.
My point is that the rte.css created in Umbraco containing the dropdown styles should not contain any styling of the elements and classes that can be added within the rich text editor.
The styling can be set in another stylesheet, which is included in your master page.
However if you want to make sure that the styles dropdown is populated automatically every time you add some new elements or classes so the dropdown options reflect this stylesheet automatically I'm actually not sure if this works on Umbraco 4.11 / 6 or if you still will need to enter these values manually.
I remember seeing something in V5 (Which was killed during CG12 last year) where you could populate the styles dropdown by adding comments in the css file like
/* Header 1 */
H1{}
/* Header 2 */
H2{}
Etc.
Where the comments would be the name in the styles dropdown. However I'm not sure this feature made it into the continuation of 4.11 and V6. Perhaps it's something we should add as a feature request at http://issues.umbraco.org/dashboard since it would be very nice imho.
Hope the above makes sense and that I have understood you correctly :)
/Jan
Hey Jan,
Was this ever done? A comment syntax within the style sheet that TinyMCE picks up?
Thanks,
Jay
Hi Jay,
this did make it into umbraco from v7.3+ the format is
/*umb_name:Heading 1/ h1 {}
Kevin
Hey Kevin,
You saved my bacon. ;)
There is an extra * at the beginning though.
/*umb_name:Heading 1/
Thank you so much!
Jay
is working on a reply...