1 Topic by tylerc083

  • tylerc083
  • Member
  • Offline
  • Registered: 2010-03-19
  • Posts: 6

Topic: Style items in the style_formats drop down

Is this possible?

I know it's possible to style items in the format drop down by using the following:
.defaultSkin .mce_h1 span.mceText

It seems the id of the items in the drop down are generated by when they open. For instance, if I am trying to to target the third item in the style drop down, I can target it like so if and only if the style drop down is the first drop down I open:
.defaultSkin .mceMenu #mce_9 .mceText

However, if I also need to use the formats drop down, and I open the formats drop down first, then the third element in the style drop down has an id of mce_19 (as opposed to mce_9 if I open the style drop down first).

Am I missing something?

Perhaps while setting style_formats we can assign a class that will be applied in that drop down? Therefore letting users target how it visually looks in the drop down?

Thanks for any help in advance!

2 Reply by Felix Riesterer

  • Felix Riesterer
  • SPAM hunter
  • Offline
  • From: Germany
  • Registered: 2005-12-30
  • Posts: 6,544

Re: Style items in the style_formats drop down

Not again...

Greetings from Germany,

Felix Riesterer.
(-> about me and this forum <-)

Felix Riesterer's Website

3 Reply by spocke

  • spocke
  • Administrator
  • Offline
  • From: Sweden, Skellefteå
  • Registered: 2004-11-25
  • Posts: 14,347

Re: Style items in the style_formats drop down

Been thinking of adding a live preview for styles. It's pretty easy to do for less complex styles but if you have things like floats etc in your classes it could mess up the rendering of the menu. But I guess a web developer would be able to resolve such a conflict, but we don't want to get blamed for non existing bugs just because the users CSS is odd.

Best regards,
Spocke - Main developer of TinyMCE

spocke's Website

4 Reply by Felix Riesterer

  • Felix Riesterer
  • SPAM hunter
  • Offline
  • From: Germany
  • Registered: 2005-12-30
  • Posts: 6,544

Re: Style items in the style_formats drop down

Hi spocke,

I've made this an FAQ entry in case I do have to answer this again.

Is this "German style" again on my side (as you've once called it)?

Greetings from Germany,

Felix Riesterer.
(-> about me and this forum <-)

Felix Riesterer's Website

5 Reply by tylerc083

  • tylerc083
  • Member
  • Offline
  • Registered: 2010-03-19
  • Posts: 6

Re: Style items in the style_formats drop down

Couldn't we have something similar to the formats dropdown? Developers could then configure the editor_css and customize as need be.

I'm not thinking tons of styles, but at the very least some text styles.

6 Reply by kamelkev

  • kamelkev
  • Member
  • Offline
  • Registered: 2009-01-29
  • Posts: 12

Re: Style items in the style_formats drop down

spocke wrote:

Been thinking of adding a live preview for styles. It's pretty easy to do for less complex styles but if you have things like floats etc in your classes it could mess up the rendering of the menu. But I guess a web developer would be able to resolve such a conflict, but we don't want to get blamed for non existing bugs just because the users CSS is odd.

I'm not sure I understand the rational here as the competitors are already doing this. I'd just make it an option that is disabled by default and then put a warning next to it in the documentation.

How easy are we talking here? I am looking to switch over from CKeditor, but this might be a dealbreaker for me. I already started digging in the code trying to figure out how I'd implement it - so far I haven't found the spot where the styles for that widget are drawn out.

7 Reply by kamelkev

  • kamelkev
  • Member
  • Offline
  • Registered: 2009-01-29
  • Posts: 12

Re: Style items in the style_formats drop down

To be clear the competitors require you to write your own style for each individual element that appears within the styleblock, they are not coupled with any existing stylesheet on the site unless you specify them to do so.

I pursued this same feature about 2 years ago with this project hmm

8 Reply by Felix Riesterer

  • Felix Riesterer
  • SPAM hunter
  • Offline
  • From: Germany
  • Registered: 2005-12-30
  • Posts: 6,544

Re: Style items in the style_formats drop down

spocke wrote:

But I guess a web developer would be able to resolve such a conflict, but we don't want to get blamed for non existing bugs just because the users CSS is odd.

Why can't TinyMCE contain a kind of "killer stylesheet" which resets certain CSS properties which could seriously mess up TinyMCE's GUI? Something along the lines of this article, perhaps? A Killer Collection Of Global CSS Reset Styles

Greetings from Germany,

Felix Riesterer.
(-> about me and this forum <-)

Felix Riesterer's Website

9 Reply by dtbaker

  • dtbaker
  • Member
  • Offline
  • From: Australia
  • Registered: 2007-08-13
  • Posts: 90

Re: Style items in the style_formats drop down

I've styled the style drop down in my cms. It's hacky, but customers like it.

First with some PHP you regex out the content css styles, then choose which styles you want to display in the drop down (I chose border, font color, font size, weight) this way you don't get paddings/margins/floats screwing up the drop down. Then with the PHP you make those trimmed down styles available in a javascript function.

on about line 275 of advanced theme editor_template_src.js you change the code to this:


            //ctrl.add(t.editor.translate(key), name); // original code
            ctrl.add(t.editor.translate(key), name, {style : webitor.get_menu_style(val)}); // new code
       
the webitor.get_menu_style(val); returns a string like "font-size:15px;color:#ff6600;font-weight:bold;" created by php on page load.

dtbaker's Website