How to add a highlight color option to TinyMCE?

[MarcC]

I have a client who requested the ability to highlight text (basically change the CSS background color between a few options).

Looking at the TinyMCE documentation, I tried adding this to the field's advanced TinyMCE options, but it didn't seem to take effect. Any tips?

hilitecolor : {inline : 'span', classes : 'hilitecolor'},

[ryan]

In your field settings, for your TinyMCE advanced settings under "theme_advanced_buttons1" you currently have this:

formatselect,|,bold,italic,|,bullist,numlist,|,link,unlink,|,image,|,code,|,fullscreen

Try changing it to this:

formatselect,|,bold,italic,|,bullist,numlist,|,forecolorpicker,forecolor,|,link,unlink,|,image,|,code,|,fullscreen

Note I added "forecolorpicker" and "forecolor". They are two versions of the same thing, so you'd probably remove one or the other after trying them out. Also google them and it should bring up something at the TinyMCE site for other color picker options, like one that would handle background colors. These are just the two that I know off the top of my head.

Next in your "valid_elements" setting, you'll want to enable use of the "style" attribute. I won't post the full valid_elements because it's quite long, but here is just the first part as it would appear currently:

@[id|class]

You'll want to change it to this:

@[id|class|style]

[MarcC]

Nice, thanks Ryan. I tried 'backcolor' and that works, too. My only concern is that this client pastes almost everything from Word. Will this allow Word's crazy style stuff through, too? If so, is there some way to just assign a class the client can select such as "yellow_highlight"?

[MarcC]

Answer to my own question: Define the style in a custom editor.css file, then give TinyMCE configuration the path to that CSS. Example entry would be "span.Highlight_Yellow". Then use theme_advanced_styles similar to Ryan's example in the TinyMCE configuration area, to give the entry a proper name such as "Yellow Highlight." Finally add a "styleselect" entry to theme_advanced_buttons_1.

[Soma]

For this particular reason I pushed TinyMCE field so we can implement custom plugins. Using bramus_cssextras I wrote a tutorial here:

[Joss]

Sorry to drag up an old topic.

In a TinyMCE field I had added this to valid elements:

,font[size|color|style]

And the buttons to the tool bar:

forecolor,fontselctsize

The buttons work, but it is not saving.

Anything I am missing?

Joss

[ryan]

Use of font tags seems kind of rare these days. I'm thinking that something like forecolor or fontselectsize would use span tags with inline styles rather than <font> tags. Though not positive. But you might try adding a span[style].

[Joss]

Very clever Ryan!

I had tried just about everything else, including adding them to P - span I had not thought of, however. Mostly because reading the TinyMCE docs and their default valid_elements they have them associated with font and not span.

Another one for your wiki at some point.

Thanks loads

Joss

[larrybotha]

For those who may have struggled to get TinyMCE to save colours, make sure to add `span` to valid_elements, in addition to the style attribute.

valid_elements should look like the following to enable users to set their own colours (in addition to adding `forecolorpicker` or 'forecolor' to theme_advanced_button[n]):

@[id|class|style],a[href|target|name],strong/b,em/i,span,br,img[src|id|class|width|height|alt],ul,ol,li,p[class],h2,h3,h4,blockquote,-p,-table[border=0|cellspacing|cellpadding|width|frame|rules|height|align|summary|bgcolor|background|bordercolor],-tr[rowspan|width|height|align|valign|bgcolor|background|bordercolor],tbody,thead,tfoot,#td[colspan|rowspan|width|height|align|valign|bgcolor|background|bordercolor|scope],#th[colspan|rowspan|width|height|align|valign|scope],code,pre

[ryan]

Just watch out for TinyMCE adding all sorts of other spans with style attributes for various things.