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!

kirkroberts
View Replies: View Best Answer
kirkroberts replied on at Permalink Reply
kirkroberts
Tried using a clean install of the new 5.4 with no luck.
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!
kirkroberts replied on at Permalink Reply
kirkroberts
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.
andrew replied on at Permalink Reply
andrew
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?
kirkroberts replied on at Permalink Reply
kirkroberts
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?
mario replied on at Permalink Reply
mario
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)
kirkroberts replied on at Permalink Reply
kirkroberts
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 replied on at Permalink Reply
mario
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. :(
kirkroberts replied on at Permalink Reply
kirkroberts
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 :-(
andrew replied on at Permalink Reply
andrew
Cool. will check this out.
glockops replied on at Permalink Reply
glockops
Have the same problem, so you're not alone.
andrew replied on at Permalink Reply
andrew
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.)
andrew replied on at Permalink Reply 1 Attachment
andrew
Forgot to attach the file. Sigh. Here it is.
kirkroberts replied on at Permalink Reply
kirkroberts
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!
andrew replied on at Permalink Reply
andrew
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.)
kirkroberts replied on at Permalink Reply
kirkroberts
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.
andrew replied on at Permalink Reply
andrew
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.
kirkroberts replied on at Permalink Reply
kirkroberts
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!
andrew replied on at Permalink Reply
andrew
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!)
kirkroberts replied on at Permalink Reply
kirkroberts
Okay, thanks Andrew!
Knowledge is power.
Again, I really appreciate your help on this.
andrew replied on at Permalink Reply
andrew
No problem! Thanks for patience on this while we get things like this sorted out.
abberdab replied on at Permalink Best Answer Reply
abberdab
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:

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"},
kirkroberts replied on at Permalink Reply
kirkroberts
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 :-)
kirkroberts replied on at Permalink Reply
kirkroberts
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!
abberdab replied on at Permalink Reply
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.
moth replied on at Permalink Reply
moth
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...
kirkroberts replied on at Permalink Reply
kirkroberts
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.
AriVelazquez replied on at Permalink Reply
Thank you abberdab for potential hours of frustration gone! This worked right away and I couldn't be happier.
abberdab replied on at Permalink Reply
abberdab
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!
richardacherki replied on at Permalink Reply 1 Attachment
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
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: [


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.
kirkroberts replied on at Permalink Reply
kirkroberts
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.
TheRealSean replied on at Permalink Reply
TheRealSean
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
Squibs replied on at Permalink Reply
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.

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
abberdab replied on at Permalink Reply
abberdab
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,
content_css: "/css/tinymce.css"
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,
content_css: "/themes/[my-theme-directory]/css/tinymce.css"


Hope this helps!

- Abby