Lower case css class names in Table/Cell properties in Rich Text Editor
Heyo.
I try to use my css-defined classes for tables and cells. Unfortunately it doesn't work since for some reason the dialogs add them with all lower case letters.
I could solve this by just using lower case letters but that would be inconsequent with my naming conventions...
It works perfectly in the main TinyMCE window. The css classes even get properly assigned. But breaks if I look at the page published.
I always thought css classes weren't case sensitive? I think it's generally good practice to make sure all your css classes are lowercase too (although I realise this doesn't help your current predicament!)
Fuji I think he's written his classes in the editor like this: "MyClass". But when the content's saved and rendered on the front-end, it renders as: "myclass". At least I think that's what the issue is..
There's something wrong, however - I've checked it for curioucity's sake and found that the value of a "class" attribute inside RTE content is saved, published and rendered as-is - i.e. if I have a class named "TEST" in RTE-associated stylesheet it renders after all exactly as class="TEST", not "test". Could be there any non-default TinyMCE settings that make it to lowercase the class attribute?
could it be that tidyHtml is the culprit here? There is by deafult a second level of html cleaning by default in umbraco... you can turn it off in the /config/UmbracoSettings.config file.
<!-- clean editor content with use of tidy --> <TidyEditorContent>false</TidyEditorContent>
We use camel casing for class names and they are indeed case sensitive in some browsers when using the xhtml doctype.
Only difference i can think of from the standard umbraco install that we change that might effect this is the tidyHtml setting.
That means tidy is enabled! try turning off by setting to false? (don't forget to touch the web.config or recycle the app pool to make config settings take effect.)
Turning off tidy doesnt seem to have an effect :/ I think Tidy happens after saving so, shouldn't really have an effect on this as they are already wrong in TinyMCE before saving. I guess it works in the editor since umbraco uses another html declaration...
The dialog even lists them in lowercase. Guess that says something about it.
I spent a little time looking into this and it looks as though it might be a TinyMCE issue. It seems that other users are experiencing similar effects with other elements:
Yep, I use chrome as my working browser but stick to FireFox for development (I find FireBug more convenient for development purposes). I've just tried things in Chrome and everything is still ok - no character case changing all the way.
Have you tried to track down on what stage class names go lowercased? There're several palced worth to look into:
Lower case css class names in Table/Cell properties in Rich Text Editor
Heyo.
I try to use my css-defined classes for tables and cells.
Unfortunately it doesn't work since for some reason the dialogs add them with all lower case letters.
I could solve this by just using lower case letters but that would be inconsequent with my naming conventions...
It works perfectly in the main TinyMCE window. The css classes even get properly assigned. But breaks if I look at the page published.
Any ideas?
/Hannes
Tried to edit my post to add umbraco version, but get an xslt error?
Anyway: umbraco v 4.7.1.1 (Assembly version: 1.0.4393.24044)
I always thought css classes weren't case sensitive? I think it's generally good practice to make sure all your css classes are lowercase too (although I realise this doesn't help your current predicament!)
HI Hannes,
Am not sure......do you want your text to be in UpperCase in your TinyMce??
//fuji
Fuji I think he's written his classes in the editor like this: "MyClass". But when the content's saved and rendered on the front-end, it renders as: "myclass". At least I think that's what the issue is..
Css class names are case sensitive in some browsers.
Example of what happens:
Left Content (.leftContent) is defined in my css.
I add it to a table cell and it looks fine in TinyMCE.
I then save and check the outputted html to find <td style="leftcontent">...</td>
Which doesn't work in chrome.
Still looks fine in TinyMCE if I reload.
Wierd right?
/Hannes
But in anycase, class is not case-sensitive.
Left Content and LeftContent is not the same since you have a space in between for the first class!!
In the css class you could write something like.
.LeftContent { font:normal 12px/14px arial;}
.LeftContent td{ font:normal; text-transform:lowercase;}
//fuji
There's something wrong, however - I've checked it for curioucity's sake and found that the value of a "class" attribute inside RTE content is saved, published and rendered as-is - i.e. if I have a class named "TEST" in RTE-associated stylesheet it renders after all exactly as class="TEST", not "test". Could be there any non-default TinyMCE settings that make it to lowercase the class attribute?
could it be that tidyHtml is the culprit here? There is by deafult a second level of html cleaning by default in umbraco... you can turn it off in the /config/UmbracoSettings.config file.
<!-- clean editor content with use of tidy -->
<TidyEditorContent>false</TidyEditorContent>
We use camel casing for class names and they are indeed case sensitive in some browsers when using the xhtml doctype.
Only difference i can think of from the standard umbraco install that we change that might effect this is the tidyHtml setting.
I have TidyEditorContent = true, so that it's unlikely the reason.
That means tidy is enabled! try turning off by setting to false? (don't forget to touch the web.config or recycle the app pool to make config settings take effect.)
No, I've tried to set it to false and nothing happens. The class="..." remains as-is without any changes to character cases.
Hmmm, Hannes, a silly question of mine - haven't you occasionally forgotten to include this TinyMCE-associated CSS file in your template?
Turning off tidy doesnt seem to have an effect :/
I think Tidy happens after saving so, shouldn't really have an effect on this as they are already wrong in TinyMCE before saving.
I guess it works in the editor since umbraco uses another html declaration...
The dialog even lists them in lowercase. Guess that says something about it.
/Hannes
Rodion: Sure, I have, occasionaly, but not this time ;)
/Hannes
OMG, I've expressed myself wrong - of course I meant "accidentally" - not my mother tongue is English :-)
The dialog even lists them in lowercase. Guess that says something about it.
Do you mean this dialog?
I've just got an idea. Could you look into the dbo.cmsStylesheetProperty table in the database?
I start to suspect that for some reason you have "stylesheetPropertyAlias" written there in lowercase.
I spent a little time looking into this and it looks as though it might be a TinyMCE issue. It seems that other users are experiencing similar effects with other elements:
http://www.tinymce.com/forum/viewtopic.php?id=26880
http://www.silverstripe.org/general-questions/show/18516
I'm just wondering if maybe removing the table plugin will make any difference?
The DB reflects the changes correctly.
Seems like it might be a google chrome + tinymce problem actually.
I tried a bit firefox and things seemed to work better.
Anyone else here who use chrome?
/Hannes
Yep, I use chrome as my working browser but stick to FireFox for development (I find FireBug more convenient for development purposes). I've just tried things in Chrome and everything is still ok - no character case changing all the way.
Have you tried to track down on what stage class names go lowercased? There're several palced worth to look into:
1) dbo.cmsPropertyData;
2) dbo.cmsContentXml;
3) ~/App_Data/umbraco.config.
is working on a reply...