In the TINYMCE official website demo, I see it's possible to use a dropdown box with own styles attached to it, for text markup

In my tinyMCE installation this dropdown box is empty, any ideas on how to solve this or configure this? I want to have for example a style "subtitle" and attach a fontsize and spacing to that...

Comments

spekki’s picture

Would be interested about the solution too, anyone able to help with this?

jorre’s picture

at lease ONE person should know how to do this, don't you think? :)

Pakfriet.be
Uzegt.be

ano1’s picture

Hi,

I just did this on my Drupal site. Look in Admin > Settings > tinymce , from there click edit. Under CSS you can select which CSS file should be used by the editor. In my case it was the default: use theme css. Then under CSS Selector you have to define which CSS classes from the css document you specified the editor should use. Then click update profile. Now if you load tinymce the classes you just defined should be in the drop down list.

So for the example you pose:
1. Lets assume you are using your default theme css as I did. Edit the theme css file to have a style class of "subtitle" i.e: .subtitle { font-size:12pt; }
2. Next login to drupal and go to Admin > Settings > tinymce , from there click edit
3. Click CSS and Under CSS Classes put Subtitle=subtitle; (which is saying have a dropdown menu item called Subtitle with a css value of subtitile).
4. Click Update Profile, and load timymce, you should be all set.

Hope this helps you all!

jorre’s picture

That's it :)

easy, but you gotta know where to do it!
thanks a lot ano1, nice clear instructions on how to do it!

I have one new problem though since using the "default theme file" instead of TinyMCE css

-> in my preview window when changing a post, I cannot see if type is bold or not, although the tinymce button "B" is clearly selected.

should I add something to my own style.css to have this feature back?
I can't seem to find where the TinyMCE default CSS file is located...

Pakfriet.be
Uzegt.be

ano1’s picture

Hi,

I did some snooping at the code and found 4 css files, I have included any css comments that came with the files:

/modules/tinymce/tinymce/jscripts/tiny_mce/themes/advanced/css/editor_content.css :
/* This file contains the CSS data for the editable area(iframe) of TinyMCE */
/* You can extend this CSS by adding your own CSS file with the the content_css option */

/modules/tinymce/tinymce/jscripts/tiny_mce/plugins/flash/css/content.css :
/modules/tinymce/tinymce/jscripts/tiny_mce/plugins/contextmenu/css/contextmenu.css

/modules/tinymce/tinymce/jscripts/tiny_mce/themes/advanced/css/editor_ui.css :
/* This file contains the CSS data for the editor UI of TinyMCE instances */

I can't say which one is used in the 'use default css' but you might want to look through these files see if you can find something. I have not been able to reproduce your bold issue with my install and setup. So sadly I can't help you besides sending you to look at these css documents. Anyone else have any ideas? If you find anything out please post your results here.

Best of luck.
Ano1

Noira’s picture

Oh, be praised, wise one... :-)

Ectar’s picture

Works! but setting there any own styles will overwrite standard entries, I need both!

Mobile Modding Drupal Site