Tips on using TinyMCE and CSS Style Sheets

[Ned Nowotny]

I have been experimenting with TinyMCE in CMSMS 1.0.4 and have finally figured out how to get it working with my CSS style sheets.  I thought it might be helpful to provide a summary of what I have learned:

• For TinyMCE to process your CSS style sheet, the "Media type" must be specified as "screen".  It will not be processed if only "all" is checked and apparently will not be processed if anything is checked in addition to "screen"--at least, the combination of "screen" and "all" prevented TinyMCE from populating the "Styles" menu in my experience.
• The TinyMCE module will populate the "Styles" menu only with CSS class selectors, not "id" selectors.  No surprise, but you will need to edit the HTML directly If you want to use an "id" selector in the content you are editing.
• TinyMCE does not recognize any styles or classes below the "body" tag that are not explicitly referenced within the content being edited.  By this, I mean that things like background and text color, font size, etc. appear to be determined strictly by reference to the processed style sheets and without regard to any styles specified on enclosing elements in an associated template.  As a result, you will want an outer element--typically a "div"--included in the content you are editing if your content area is styled differently than the page body as a whole.
  
  An easy way to ensure that you have this element included every time you create new content is to specify "Default Page Content" in the "Global Settings" (new beginning with CMSMS 1.0.3, but broken unless you are using your own CMSMS build pulled from the SVN repository or you edit line 306--in CMSMS 1.0.4--of "admin/siteprefs.php" to change the value of the "textarea" element's "name" attribute from "defaulpagecontent" to "defaultpagecontent").
  
  Trivial default page content could be:
  
     
        Edit this...
     
  
  Of course, it is not necessary to do this if you are not that concerned with how TinyMCE presents your content while editing.  After all, the "Preview" button will let you check your results within the context of any associated template.  However, your editing will be somewhat less WYSIWYG in that case.

 

[groinko]

ok it works...BUT
having a look at the html source code :

Code: Select all

<span class="teststyle" class="teststyle">Hello world</span>

the class is wrritten twice !?!?