I've had a very frustrating day trying to get the RTE to apply classes to UL's rather than the LI's.
I've resorted to a plugin called liststyle, which while did offer a "class" option in it's pop-up, the style had to be added manually ie title would need to be remembered by the editor and for some reason in Firefox the class box wont display either!
I've read on the older forum's many people struggling with the same issues and having to resort to modifying the TinyMCE JS. This doesnt sound at all like a solution and little is explained in how to get the code in anyway.
I really need a solution to this, to me this is a show stopper because list formating is as important as any other applied styles in our project. For now I can see having to ask our editors to apply the class at HTML level, which isnt nice for non-techies!
Yes, this is a real nuisance. The way it is typically resolved is to apply the styling to the li rather than the ul, since you can highlight the li content and select a style from the dropdown menu in the RTE. Not how we'd like it, but workable in most cases and better than direct editing of the html for the content editors.
Is it a neccesity to set the style directly on the list? I'm thinking if the list style is general isn't i then a matter about how you organize your selectors in your css?
If all the lists need to look the same and they for instance are placed inside the same div you should be able to select the list by writing something like div#wrapper ul{} - I know things can be more complex at times but maybe this is all you really need? If there are different styles dependant on the placement on the list you could just make different id's or classes to the div in, which they are placed of course. Then your editors would not even have to worry about setting the style at all.
Could this be a possible workaround or is your project more complex than that?
I think it's probably best to explain what i'm trying to achieve and maybe people can comment on best working practices in Umbraco.
So to start from the top, we have three main doctypes setup in our project.
Single column layout
Two column layout
Three column layout
These doctypes have been chosen for textual content pages and from the demo's (CWS) we've played with it seems the best way to seperate this level of presentational complexity.
Once you get down to the actual content you're now at Writer/Editor/Contributor level using the RTE or multiple RTE's if the doctype is multi-column. At this point I'm thinking Word documents as the basis of all content provided by our customers, after all it's what holds our organisation together other than PDF!
So in Word we've created a web edition .DOT which offers simple style functionality; 7 Heading styles to cater for up to 2 levels of navigation. e.g. Level 1 header, Level 1 Sub Header, Level 2 Header, Level 2 Sub Header etc etc. Paragraphs, Lists and tables. Our documentation explicity requests any embedded images should be limited to range left or right only.
In terms of workflow, our marketing dept. will collate the documents and work with the client to ensure it's ready for use on the web. Now we're into a copy and paste scenario which in our tests seems to work incredibly well with Umbraco/TinyMCE. We've added in the editor styles to match the Word docs, and it all drops in nice and tidy.
So back to the list issue, What i'm looking to provide is LIMITED RTE level presentational functionality at class level. Our marketing dept. WILL want some presentational flexibility within agreed boundaries. They're not strictly creative people, much as they like to think they are! But we do need to provide a little gloss to appease them!
In our current corp site custom style is appled to multiple lists on a single page as this has proven to be the most semantic and appropriate way to do it. So I need to be able to apply this in umbraco. Please bear in mind this is not intended to become a runaway 'feature' it will be managed and monitored by us (the designers/developers).
I hope this makes things clearer, because for my money it should be pretty standard in a CMS and whilst I accept it's more a third party issue with tinyMCE, it surprises me there hasnt been a move to fix this either in Umbraco as a plugin or by the developers at tinyMCE.
Umbraco doesn't support importing/copying from Word. In fact I'm surprised to hear that your copy-paste approach is working, usually in this scenario the paste inserts lots of redundant markup and class declarations.
There is integration with Live Writer that may suit your purposes better.
I think you're fighting a losing battle with this one. I would ideally go with Jan's approach and style the ul at the container level, or worst case my template injection approach.
I don't think there's a need to allow a marketing dept control at this level. The style of ul/li within an RTE, usually this styling is controlled site-wide to assure style consistency and (in most cases) usabililty.
I tried your suggestion with enabling the templates plugin and it works really well so thanks for that, It will of course need to be managed with care!
Your comments on Word confuse me, we're using the latest Umbraco build (4.0.x) which uses TinyMCE 3.x as the RTE. By default the plugin pasteFromWord is enabled. So as long as you have the same basic styles defined in the editor CSS as you do in your Word document, it pastes in beautifully with all basic markup intact eg. h1, h2 p ul/li table etc etc....But NO nasty Word markup.
As for our relationship with Marketing and what we're aiming to provide for them...Well you could argue the 'fors' and 'againsts' but the reality here is we need to give them 'some' flexibility in basic layout. Going forward they will become the content owners acting as more than just copywriters (not that they do much copywirting, they're mostly paper shufflers!). Currently Marketing act as middle men between the web devs (us) and the client, so hopefully when we've proven Umbraco they'll take responsibility for the content and we can return to what we do best....Design and develop!
Thanks again for the template plugin suggestion, i'm surprised this isnt enabled out of the box because it's a very powerful presentation feature. Although I do understand it kind of competes with umbraco templates.
tinyMCE RTE and applying classes to lists (UL/OL)
I've had a very frustrating day trying to get the RTE to apply classes to UL's rather than the LI's.
I've resorted to a plugin called liststyle, which while did offer a "class" option in it's pop-up, the style had to be added manually ie title would need to be remembered by the editor and for some reason in Firefox the class box wont display either!
I've read on the older forum's many people struggling with the same issues and having to resort to modifying the TinyMCE JS. This doesnt sound at all like a solution and little is explained in how to get the code in anyway.
I really need a solution to this, to me this is a show stopper because list formating is as important as any other applied styles in our project. For now I can see having to ask our editors to apply the class at HTML level, which isnt nice for non-techies!
Anyone please, please help on this!
Thanks
Martin
Yes, this is a real nuisance. The way it is typically resolved is to apply the styling to the li rather than the ul, since you can highlight the li content and select a style from the dropdown menu in the RTE. Not how we'd like it, but workable in most cases and better than direct editing of the html for the content editors.
cheers,
doug.
Hi Martin
Is it a neccesity to set the style directly on the list? I'm thinking if the list style is general isn't i then a matter about how you organize your selectors in your css?
If all the lists need to look the same and they for instance are placed inside the same div you should be able to select the list by writing something like div#wrapper ul{} - I know things can be more complex at times but maybe this is all you really need? If there are different styles dependant on the placement on the list you could just make different id's or classes to the div in, which they are placed of course. Then your editors would not even have to worry about setting the style at all.
Could this be a possible workaround or is your project more complex than that?
/Jan
I agree with Doug. It's really just not possible without code changes.
If you can get away with Jan's solution and move the css declarations then this is usually the best solution.
However if you need to have two <ul/> in the same RTE with different styles then you could always try allowing the editor to insert the ul via a tempalte http://our.umbraco.org/wiki/how-tos/enabling-the-%27template%27-plugin-for-tinymce
You could create templates such as
As long as you style the ul.option1 in the admin css then the editors should be able to know the correct style has been applied.
Not ideal, it's better to try and avoid the problem than implement a fix for it.
Thanks very much for such quick responses.
I think it's probably best to explain what i'm trying to achieve and maybe people can comment on best working practices in Umbraco.
So to start from the top, we have three main doctypes setup in our project.
These doctypes have been chosen for textual content pages and from the demo's (CWS) we've played with it seems the best way to seperate this level of presentational complexity.
Once you get down to the actual content you're now at Writer/Editor/Contributor level using the RTE or multiple RTE's if the doctype is multi-column. At this point I'm thinking Word documents as the basis of all content provided by our customers, after all it's what holds our organisation together other than PDF!
So in Word we've created a web edition .DOT which offers simple style functionality; 7 Heading styles to cater for up to 2 levels of navigation. e.g. Level 1 header, Level 1 Sub Header, Level 2 Header, Level 2 Sub Header etc etc. Paragraphs, Lists and tables. Our documentation explicity requests any embedded images should be limited to range left or right only.
In terms of workflow, our marketing dept. will collate the documents and work with the client to ensure it's ready for use on the web. Now we're into a copy and paste scenario which in our tests seems to work incredibly well with Umbraco/TinyMCE. We've added in the editor styles to match the Word docs, and it all drops in nice and tidy.
So back to the list issue, What i'm looking to provide is LIMITED RTE level presentational functionality at class level. Our marketing dept. WILL want some presentational flexibility within agreed boundaries. They're not strictly creative people, much as they like to think they are! But we do need to provide a little gloss to appease them!
In our current corp site custom style is appled to multiple lists on a single page as this has proven to be the most semantic and appropriate way to do it. So I need to be able to apply this in umbraco. Please bear in mind this is not intended to become a runaway 'feature' it will be managed and monitored by us (the designers/developers).
I hope this makes things clearer, because for my money it should be pretty standard in a CMS and whilst I accept it's more a third party issue with tinyMCE, it surprises me there hasnt been a move to fix this either in Umbraco as a plugin or by the developers at tinyMCE.
Any comments, help much appreciated.
Martin
Umbraco doesn't support importing/copying from Word. In fact I'm surprised to hear that your copy-paste approach is working, usually in this scenario the paste inserts lots of redundant markup and class declarations.
There is integration with Live Writer that may suit your purposes better.
I think you're fighting a losing battle with this one. I would ideally go with Jan's approach and style the ul at the container level, or worst case my template injection approach.
I don't think there's a need to allow a marketing dept control at this level. The style of ul/li within an RTE, usually this styling is controlled site-wide to assure style consistency and (in most cases) usabililty.
Cheers,
Chrs
Hi Chris
I tried your suggestion with enabling the templates plugin and it works really well so thanks for that, It will of course need to be managed with care!
Your comments on Word confuse me, we're using the latest Umbraco build (4.0.x) which uses TinyMCE 3.x as the RTE. By default the plugin pasteFromWord is enabled. So as long as you have the same basic styles defined in the editor CSS as you do in your Word document, it pastes in beautifully with all basic markup intact eg. h1, h2 p ul/li table etc etc....But NO nasty Word markup.
As for our relationship with Marketing and what we're aiming to provide for them...Well you could argue the 'fors' and 'againsts' but the reality here is we need to give them 'some' flexibility in basic layout. Going forward they will become the content owners acting as more than just copywriters (not that they do much copywirting, they're mostly paper shufflers!). Currently Marketing act as middle men between the web devs (us) and the client, so hopefully when we've proven Umbraco they'll take responsibility for the content and we can return to what we do best....Design and develop!
Thanks again for the template plugin suggestion, i'm surprised this isnt enabled out of the box because it's a very powerful presentation feature. Although I do understand it kind of competes with umbraco templates.
Martin
I've not used Paste From Word in v3 of TinyMCE. I hit these problems back in Umbraco 2/3 and the versions of TinyMCE at that time.
I'll need to have a play around with what you're suggesting and see what's possible in current versions.
Remember you can mark answers as solutions if you feel they solved your issue.
is working on a reply...