Press Ctrl / CMD + C to copy this to your clipboard.
This post will be reported to the moderators as potential spam to be looked at
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
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.
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, 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.
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 */
/* Header 2 */
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 :)
Was this ever done? A comment syntax within the style sheet that TinyMCE picks up?
this did make it into umbraco from v7.3+ the format is
You saved my bacon. ;)
There is an extra * at the beginning though.
Thank you so much!
is working on a reply...
Write your reply to:
Image will be uploaded when post is submitted