TinyMCE custom styles not applying in 5.4
Permalink 5 users found helpful
Reposting after no response in the Editing forum...
Not sure if I've loused this up somehow or if there is a deeper problem.
I have my custom styles appearing in TinyMCE but when I highlight some text and choose a style nothing happens. The styles pull-down shows that the style is selected, but if I select somewhere else then go back to the first bit of text, the style drop-down is back to its default state. The class name never appears in the code view.
Has anyone gotten custom styles to work in 5.4?
Any pointers on what might be wrong?
Notes: the custom styles are being read automatically from typography.css. I'm using a custom toolbar set for TinyMCE (set in Sitewide Settings). I also tried the Simple set to no avail.
Thanks for your help!
Not sure if I've loused this up somehow or if there is a deeper problem.
I have my custom styles appearing in TinyMCE but when I highlight some text and choose a style nothing happens. The styles pull-down shows that the style is selected, but if I select somewhere else then go back to the first bit of text, the style drop-down is back to its default state. The class name never appears in the code view.
Has anyone gotten custom styles to work in 5.4?
Any pointers on what might be wrong?
Notes: the custom styles are being read automatically from typography.css. I'm using a custom toolbar set for TinyMCE (set in Sitewide Settings). I also tried the Simple set to no avail.
Thanks for your help!
STILL cannot get this to work, and am afraid I'm going to have to revert back to 5.3.3.1, which I'm sure is a manual and painful affair.
I'm also a little sad no one has replied in my hour of need... <sniff>
Hoping I'm wrong but this is heading toward a bug report.
I'm also a little sad no one has replied in my hour of need... <sniff>
Hoping I'm wrong but this is heading toward a bug report.
What type of style?
Our new version of tinymce, while it's fixed a number of irritations I've had with the editor for awhile, I have noticed this intermittently in TinyMCE under 5.4 (since we upgraded tinymce). It's not always noticeable, however. Is this a block level style? What element does it apply to?
Our new version of tinymce, while it's fixed a number of irritations I've had with the editor for awhile, I have noticed this intermittently in TinyMCE under 5.4 (since we upgraded tinymce). It's not always noticeable, however. Is this a block level style? What element does it apply to?
Thanks for your reply!
It's a simple open-ended style (eg .the-style).
I've also tried using it like p.the-style or li.the-style (the elements I'm currently trying to style).
In my tests the only attributes used are color and background-color, if that makes any difference.
Nothing has worked yet :-(
Any ideas?
It's a simple open-ended style (eg .the-style).
I've also tried using it like p.the-style or li.the-style (the elements I'm currently trying to style).
In my tests the only attributes used are color and background-color, if that makes any difference.
Nothing has worked yet :-(
Any ideas?
try referencing it within an id
like
#myContainer p.the-style {
some-property:12px;
}
of course, you'll need to wrap it with an ID.
then, test it on another computer that hasn't edited that page. I've found that tinyMCE has some odd caching issue. (could be my imagination)
like
#myContainer p.the-style {
some-property:12px;
}
of course, you'll need to wrap it with an ID.
then, test it on another computer that hasn't edited that page. I've found that tinyMCE has some odd caching issue. (could be my imagination)
I'm using the editor_config hack (adding a timestamp) to foil the cache. So the styles are showing up fine in the drop-down menu (so it's unlikely it's a cache issue).
Mario, I tried what I think you're describing, with no luck. Not sure about using a computer that hasn't edited the page... because once you're trying to change a style you're already in edit mode. Even if that worked then you'd have to use a different computer every time you update the site? Maybe I misunderstood what you were explaining?
Mario, I tried what I think you're describing, with no luck. Not sure about using a computer that hasn't edited the page... because once you're trying to change a style you're already in edit mode. Even if that worked then you'd have to use a different computer every time you update the site? Maybe I misunderstood what you were explaining?
it just happens occasionally when adding new styles for me. not working with 5.4 yet, so maybe i'll run into your issue too. :(
Yeah, I knew I was taking a chance when I went with 5.4 (then still a RC) for a new project.
Major bummer. I may be starting a new thread to find out about how to revert from 5.4 to 5.3.3.1 :-(
Major bummer. I may be starting a new thread to find out about how to revert from 5.4 to 5.3.3.1 :-(
Cool. will check this out.
Have the same problem, so you're not alone.
I think I have a fix for this. Our custom concrete tinymce theme was not fully updated in every place necessary for the new version of tinymce. Please see the attached file which hopefully should fix a number of tinymce related issues.
To apply:
1. Rename concrete/js/tiny_mce/themes/concrete/editor_template.js to something like editor_template_bak.js
2. Place this file in its place.
3. Delete your browsers cache fully, and restart browser
(note: Firefox doesn't require a browser restart but Safari 4 would NOT relinquish the old copy of the JS until I did so.)
This should fix custom styles and custom font sizes. Sorry about this. Let me know if it doesn't work (and please ensure that your browser is fully cache-free/reset before mentioning whether it works or not.)
To apply:
1. Rename concrete/js/tiny_mce/themes/concrete/editor_template.js to something like editor_template_bak.js
2. Place this file in its place.
3. Delete your browsers cache fully, and restart browser
(note: Firefox doesn't require a browser restart but Safari 4 would NOT relinquish the old copy of the JS until I did so.)
This should fix custom styles and custom font sizes. Sorry about this. Let me know if it doesn't work (and please ensure that your browser is fully cache-free/reset before mentioning whether it works or not.)
Forgot to attach the file. Sigh. Here it is.
Wow, I'm so glad you're on this!
What I'm seeing is now I can select a span of text and then a custom style and TinyMCE adds a span and the appropriate class. Huzzah!
But if I just put my cursor in some text and select a custom style nothing happens. In c5.3 that would put the class name in the enclosing tag (eg p or li).
Unfortunately it's really the second behavior I'm looking for.
Thanks so much for your help!
What I'm seeing is now I can select a span of text and then a custom style and TinyMCE adds a span and the appropriate class. Huzzah!
But if I just put my cursor in some text and select a custom style nothing happens. In c5.3 that would put the class name in the enclosing tag (eg p or li).
Unfortunately it's really the second behavior I'm looking for.
Thanks so much for your help!
are you highlighting all the text? I believe it needs to be highlighted (if it's inline-level, as opposed to one of the block-level elements like the header tags.)
No matter how much text I highlight a span tag is added, even if I highlight all the text within a block level tag.
eg
<p>text</p>
becomes
<p><span class="classname">text</span></p>
In 5.3.3.1 if you highlighted all the text the class would be inserted in the enclosing tag and a span tag would NOT be created. Or you could just insert the cursor and the enclosing tag would get the class.
eg
<p>text</p>
becomes
<p><span class="classname">text</span></p>
In 5.3.3.1 if you highlighted all the text the class would be inserted in the enclosing tag and a span tag would NOT be created. Or you could just insert the cursor and the enclosing tag would get the class.
Ah I see. Unfortunately I believe this is the default behavior of TinyMCE at this point. Part of the problem that we had was that we didn't migrate all of their new custom style behaviors from their built-in themes to our custom concrete theme.
There may be a way to undo this behavior using some custom configurations ,however.
There may be a way to undo this behavior using some custom configurations ,however.
I'm not quite sure where you're standing now... are you wanting to reenable the old behavior? Or leaving that up to the individual?
Can you clarify what your intentions are?
Thanks for all your help thus far!
Can you clarify what your intentions are?
Thanks for all your help thus far!
I don't believe we're going to enable the 5.3.3.1 behavior, as I'm assuming TinyMCE made this change for a reason. I imagine creating the span with the class makes it much less likely that the classes on elements get mangled through removal/reapplying of styles.
We are, however, going to try and make sure that custom styles are functional in some form (which they aren't currently in 5.4 - but hopefully this patch addresses that!)
We are, however, going to try and make sure that custom styles are functional in some form (which they aren't currently in 5.4 - but hopefully this patch addresses that!)
Okay, thanks Andrew!
Knowledge is power.
Again, I really appreciate your help on this.
Knowledge is power.
Again, I really appreciate your help on this.
No problem! Thanks for patience on this while we get things like this sorted out.
I'm having the same issue (wanting classes applied to pre-existing elements, and not just to superfluous span elements), your answer might be here:http://tinymce.moxiecode.com/punbb/viewtopic.php?id=20010...
I assume you are already using a custom tinymce editor config in your Sitewide Settings? It looks like the key to controlling how classes are applied are in the example. At least, I'm gonna give it a try with fingers crossed. :) I just hope it is compatible with the concrete theme.
[Some time later...]
Indeed, if you use the more complex listing for your style formats you can control how your styles are applied, even to what.
For example:
I assume you are already using a custom tinymce editor config in your Sitewide Settings? It looks like the key to controlling how classes are applied are in the example. At least, I'm gonna give it a try with fingers crossed. :) I just hope it is compatible with the concrete theme.
[Some time later...]
Indeed, if you use the more complex listing for your style formats you can control how your styles are applied, even to what.
For example:
theme : "concrete", fix_table_elements : true, //Moves tables out of other block elements, like paragraphs. Splits containing element into two block elements. extended_valid_elements : "div[class|id],table[class|id|summary],tr[class|id|valign],th[class|id|align|scope|abbr|colspan|rowspan],td[class|id|align|abbr|colspan|rowspan]", plugins: "paste,searchreplace,inlinepopups,spellchecker,safari,advlink,table,layer", editor_selector : "ccm-advanced-editor", spellchecker_languages : "+English=en", theme_concrete_buttons1 : "pasteword,cut,copy,paste,|,undo,redo,|,search,replace,|,formatselect,styleselect,|,charmap,removeformat,cleanup,help,code,|,link,unlink", theme_concrete_buttons2 : "bold,italic,|,justifyleft,justifycenter,justifyright,hr,|,bullist,numlist,blockquote,image,anchor,|,table,cell_props,delete_row,delete_col,col_after,col_before,row_after,row_before", theme_concrete_blockformats : "p,h2,h3,h4,blockquote", theme_concrete_toolbar_align : "left", style_formats: [ {title:"Intro Paragraph", selector:"p", classes:"intro"}, {title:"External Link", selector:"a", classes:"external"}, {title:"Fine Print", selector:"p", classes:"fineprint"}, {title:"Clear", selector:"p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img", classes:"clear"},
Viewing 15 lines of 20 lines. View entire code block.
I don't have time to test this right now, but thank you so much abberdab for posting your find and results!
I'm feeling optimistic all of a sudden :-)
I'm feeling optimistic all of a sudden :-)
I am a happy man right now. It totally works!
AND, I had no idea the "paste from word" button existed! No more having to tell the client how to convert to plain text. The clouds are parting, sun is streaming down... I'm doing a dance of joy right now.
Thanks, abberdab!
AND, I had no idea the "paste from word" button existed! No more having to tell the client how to convert to plain text. The clouds are parting, sun is streaming down... I'm doing a dance of joy right now.
Thanks, abberdab!
Being able to bend TinyMCE to one's will is a good feeling, indeed. :) I've been enjoying even more of the new customization possibilities myself (making both a block and inline version of the same css class - nice). :)
Note that *I think* you could lose your customization settings if for whatever reason you toggle between Advanced/Office/Simple and Custom in your General Settings. I'm not sure if they are saved. Best to keep a copy of your custom TinyMCE settings in a document elsewhere once you have 'em as you want'em.
Note that *I think* you could lose your customization settings if for whatever reason you toggle between Advanced/Office/Simple and Custom in your General Settings. I'm not sure if they are saved. Best to keep a copy of your custom TinyMCE settings in a document elsewhere once you have 'em as you want'em.
I've got this exact same problem in 5.4.0.5, and I have to say I don't understand the 'fix'.
Do I just need to replace abberdab's custom code with mine? Not sure what bit I need to fix it...
Do I just need to replace abberdab's custom code with mine? Not sure what bit I need to fix it...
In dashboard > sitewide settings under "rich text editor" you can choose "custom" and paste in the code abberdab supplied.
You can edit the code to have whichever TinyMCE controls you want, and add in your own styles.
I recommend starting with abberdab's code and adding your own in bit by bit to make sure it's working.
You can edit the code to have whichever TinyMCE controls you want, and add in your own styles.
I recommend starting with abberdab's code and adding your own in bit by bit to make sure it's working.
Thank you abberdab for potential hours of frustration gone! This worked right away and I couldn't be happier.
You are very welcome! I've been very pleased with the new tinymce way of doing things. I particularly love that I can define whether a style is applied to an inline element or block element, and then define precisely what element that would be. Super cool!
Hi guys,
Can anyone tell me why randomly when using the custom setup i get nothing aside from a small menu with the content in html format? See the pic.
I'm using the following code
UPDATE - seems like copying and pasting back and forth from the custom window and notepad can break things somehow.. if you have this issue try manually typing in your code.
Can anyone tell me why randomly when using the custom setup i get nothing aside from a small menu with the content in html format? See the pic.
I'm using the following code
theme : "concrete", fix_table_elements : true, //Moves tables out of other block elements, like paragraphs. Splits containing element into two block elements. extended_valid_elements : "div[class|id],table[class|id|summary],tr[class|id|valign],th[class|id|align|scope|abbr|colspan|rowspan],td[class|id|align|abbr| colspan|rowspan]", plugins: "paste,searchreplace,inlinepopups,spellchecker,safari,advlink,table,layer", editor_selector : "ccm-advanced-editor", spellchecker_languages : "+English=en", theme_concrete_buttons1 : "pasteword,cut,copy,paste,|,undo,redo,|,search,replace,|,formatselect,styleselect,|,charmap,removeformat,cleanup,help,code,|,link,unlink", theme_concrete_buttons2 : "bold,italic,|,justifyleft,justifycenter,justifyright,hr,|,bullist,numlist,blockquote,image,anchor,|,table,cell_props,delete_row,delete_col,col_after,col_bef ore,row_after,row_before", theme_concrete_blockformats : "p,h1,h2,h3,h4,blockquote", theme_concrete_toolbar_align : "left", style_formats: [
Viewing 15 lines of 25 lines. View entire code block.
UPDATE - seems like copying and pasting back and forth from the custom window and notepad can break things somehow.. if you have this issue try manually typing in your code.
Almost everytime the Content block editor loads I see the tiny window with HTML and then the wysiwyg pops in after a second or two. No problem.
You might check to see if Notepad is converting your quotes or something (ie making them "smart"). I've had that issue with copying and pasting from websites before.
You might check to see if Notepad is converting your quotes or something (ie making them "smart"). I've had that issue with copying and pasting from websites before.
I am still getting the same issue now, I have used the custom code and am editing that to suite.
We do have an old config we used to use before C5 but it no longer works with the new tinyMCE and this gives me everything I want within the tinymce box.
Thanks Again +Helpful Thread
We do have an old config we used to use before C5 but it no longer works with the new tinyMCE and this gives me everything I want within the tinymce box.
Thanks Again +Helpful Thread
Sorry for dragging up an old thread but this one seems to address problems I've been having with my editor (http://www.concrete5.org/community/forums/customizing_c5/typography-problems/).
Basically, it wont accept certain styles and copying text into the editor causes all matter of problems.
One question about the fix mentioned here. I'm a bit confused about the css file mentioned in the code by abberdab.
I have two css files /main.css and /typography.css
Should my file extension be?
main site -http://www.tirzah.ie/concrete5
Basically, it wont accept certain styles and copying text into the editor causes all matter of problems.
One question about the fix mentioned here. I'm a bit confused about the css file mentioned in the code by abberdab.
content_css : "/css/tinymce.css"
I have two css files /main.css and /typography.css
Should my file extension be
content_css : "/main.css"
main site -http://www.tirzah.ie/concrete5
Hello!
It's a little extra work, but I like to keep a separate, simplified css file for tinymce. For one thing, it means that I'm able to override some stubborn tinymce defaults (like link color) by prefacing my css selectors with #tinymce. Also, my main css file is usually too complicated/hierarchical to work in tinymce without modifications.
In the past, I've kept tinymce.css at the root of my site, Now, since the tinymce css is directly related to my theme, I think it is a better idea to keep it in my theme css directory,
Hope this helps!
- Abby
It's a little extra work, but I like to keep a separate, simplified css file for tinymce. For one thing, it means that I'm able to override some stubborn tinymce defaults (like link color) by prefacing my css selectors with #tinymce. Also, my main css file is usually too complicated/hierarchical to work in tinymce without modifications.
In the past, I've kept tinymce.css at the root of my site,
content_css: "/css/tinymce.css"
content_css: "/themes/[my-theme-directory]/css/tinymce.css"
Hope this helps!
- Abby
Used a clean 5.3.3.1 install and styles apply just fine, as expected.
It would be nice to know if anyone is applying custom styles through the Content block & TinyMCE with 5.4.
Then at least I'll know it's something I did, or if it just takes some fiddling to make it work properly. Usually I can muddle through this stuff, but this time I'm stuck.
Please take a minute to let me know. Thanks!