This project is read-only.

Changing available styles in tinyMCE Format dropdown

Topics: Controls
Jan 2, 2010 at 2:21 AM

Can anyone point me in the right direction on how to configure the styles that appear in the tinyMCE editor's Format dropdown?:

Jan 2, 2010 at 3:42 AM

There's a lot that can be customized.  For the Formats dropdown list, check out:

These settings you find in the documentation would be modified in the tinyMCE.ascx file in the ADMIN folder of BlogEngine.  The settings go in the "tinyMCE.init()" section where there's already a bunch of settings being set (mode, elements ..... tab_focus).

Jan 2, 2010 at 3:30 PM

OK, I added a theme_advanced_blockformats: "p,div,pre,h1,h2,h3,h4,p.scripture",  line to the timMCE.aspx page. Now the Format dropdown has a new entry on the bottom, but it's blank.  Where does it get the descriptions for the dropdown (which has Paragraph, Address, Preformatted, Heading1, Heading2, Heading3, Heading4,<blank>)?

In my theme stylesheet I added a line .text p.scripture { .... style info .... }

If I know my CSS correctly, that means in the div class="post", in a sub-div class="text", the p element with class="scripture".   I used the raw html editor to add some <p class="scripture">Jn 3:16 For God so loved....</p> into a post, and it does render the style correctly.  But If I apply the blank Format (which should be the "scripture" class, it only applies a plain <p>, not <p class="scripture">.

Jan 2, 2010 at 6:50 PM

I tested it out a bit, and it looks like the Format dropdown list is designed to contain (a) simple tag names (not p.scripture), and (b) they have to be known tag names.  For example, if I enter just "scripture" without the "p" or if I enter "test", a blank entry appears in the dropdown list.  But if I enter "h5" (which wasn't in there), then in the dropdown list, it appears as "Heading 5".

What will be better for you to use is the "Styles" dropdown list.  Here's how to do it.

1.  In the existing "theme_advanced_buttons1" setting, at the end of the list of items (the last item is probably "fontsizeselect"), add "styleselect".

2.  Add a new setting called "content_css".  It's a setting just like the theme_advanced_blockformats.  The documentation on it is here.

In the stylesheet you specify in the content_css property, you can add classes like "p.scripture".  "scripture" will appear as a choice in the new Styles dropdown list.

One tip I can give you having used this before, is if you modify the contents of the CSS file, tinyMCE tends to cache this CSS file very "strongly".  You'll tend to see the old contents of the CSS file.  An easy workaround for this is when specifying the CSS file in the content_css setting, append a dummy query string value -- for versioning purposes.  So if your content_css setting is:

content_css : "/mycontent.css"

Then instead make it like:

content_css : "/mycontent.css?v=1"

If you change the content of the CSS file and are getting the old styles, just change that v=1 to v=2, and so on.  This will prevent (or stop) the old styles from showing up.