English English Spanish EspañolKorea한국어
Straker»Company»Blog»2007» TinyMCE Stylesheet + Style Dropdown explained

TinyMCE Stylesheet + Style Dropdown explained

In TinyMCE there are 2 dropdowns, one is the Format dropdown which includes H1, paragraph tags and the like, the other is the Styles dropdown (also known previously as the class dropdown).

 Now there is also a button for viewing the current available styles, this popup was previously incorrect, it used to point to  /shadozoomdemo/app_templates/coretemplates/stylesheets/styles.css whereas the style dropdown gets its information from /shadozoomdemo/app_templates/coretemplates/stylesheets/editor.css, for Shado 8.0 onwards this is corrected.

The Style Dropdown picks up all css tags with the "." notation, for example it will pick up:

  • table.bob
  • em.StrongStyle
  • .Style

These will show in order in the dropdown as: "bob" "StrongStyle" and "Style". Currently there is no filtering on what is before the "." in the css tag.

When you edit a stylesheet it will not show up in TinyMCE until you clear your browser cache, ctrl+shift+delete in FF and Tools > Internet Options in IE.

Also for your styles to show up in the "Style Sheet Viewer" they must be included at the bottom of the page under section 7 - Page Specific Styles.

For those who still have this issue it can be easily fixed by opening  "/[your-site]/app_config/util/editor/stylesheetviewer.cfm" and changing the line which reads:

<cfset variables.styleSheetPath = "/#request.siteContext.dsn#/app_templates/#request.stylesheet#">

To:

<cfset variables.styleSheetPath = "/#request.siteContext.dsn#/app_templates/coretemplates/stylesheets/editor.css">


Comments

There are no comments for this page as yet.

Add a comment