can you help with STYLES dropdown list ?

Hello,

Does anyone have a code example to create "styles" in a dropdown list?

I would appreciate it!

Dennis

====================================
Here is what I have tried so far:

1.) made a copy of default.js ( as was found in /ckeditor/_source/plugins/stylescombo/styles )

2.) saved it as dnocdefault.js, in a js folder off my root ( /js/dnocdefault.js )

3.) edited the new dnocdefault.js file, creating a few styles. I saw that we are also able to create styles for elements like "h1", and they are supposed to come up in the same list. I tried that too. My dnocdefault.js file is as follows:

/*
Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.addStylesSet( 'dnocdefault',
[
   /* Block Styles */

   // These styles are already available in the "Format" combo, so they are
   // not needed here by default. You may enable them to avoid placing the
   // "Format" combo in the toolbar, maintaining the same features.
   
   { name : 'Paragraph'      , element : 'p',
      attributes:
      {
         'line-height' :   '16px',
         'margin-bottom' :   '8px',
         'text-align' :      'justify',
         'font-size' :      '100%'
      }
   },
   { name : 'Heading 1'      , element : 'h1', 
      attributes:
      {
         'font-family' :   'Georgia, "Times New Roman", Times, serif',
         'font-size' :      '240%',
         'color' :         '#738028',
         'margin' :         '5px 0px 10px 0px'
      }
   },
   { name : 'Heading 2'      , element : 'h2', 
      attributes:
      {
         'font-family' :   'Georgia, "Times New Roman", Times, serif',
         'font-size' :      '180%',
         'color' :         '#738028'
      }
   },
   { name : 'Heading 3'      , element : 'h3', 
      attributes:
      {
         'font-family' :   'Georgia, "Times New Roman", Times, serif',
         'font-size' :      '140%',
         'color' :         '#738028'
      }
   },
   /*{ name : 'Heading 2'      , element : 'h2' },
   { name : 'Heading 3'      , element : 'h3' },
   { name : 'Heading 4'      , element : 'h4' },
   { name : 'Heading 5'      , element : 'h5' },
   { name : 'Heading 6'      , element : 'h6' },
   { name : 'Preformatted Text', element : 'pre' },
   { name : 'Address'         , element : 'address' },
   */

   { name : 'Blue Title'      , element : 'h3', styles : { 'color' : 'Blue' } },
   { name : 'Red Title'      , element : 'h3', styles : { 'color' : 'Red' } },

   /* Inline Styles */

   // These are core styles available as toolbar buttons. You may opt enabling
   // some of them in the Styles combo, removing them from the toolbar.
   /*
   { name : 'Strong'         , element : 'strong', overrides : 'b' },
   { name : 'Emphasis'         , element : 'em'   , overrides : 'i' },
   { name : 'Underline'      , element : 'u' },
   { name : 'Strikethrough'   , element : 'strike' },
   { name : 'Subscript'      , element : 'sub' },
   { name : 'Superscript'      , element : 'sup' },
   */
   { name : 'readMore' , element : 'span', styles:
      {
         'font-weight' :   'bold',
         'margin' :         '10px 0px 10px 0px'
      }
   },
   { name : 'Marker: Yellow'   , element : 'span', styles : { 'background-color' : 'Yellow' } },
   { name : 'Marker: Green'   , element : 'span', styles : { 'background-color' : 'Lime' } },

   { name : 'Big'            , element : 'big' },
   { name : 'Small'         , element : 'small' },
   { name : 'Typewriter'      , element : 'tt' },

   { name : 'Computer Code'   , element : 'code' },
   { name : 'Keyboard Phrase'   , element : 'kbd' },
   { name : 'Sample Text'      , element : 'samp' },
   { name : 'Variable'         , element : 'var' },

   { name : 'Deleted Text'      , element : 'del' },
   { name : 'Inserted Text'   , element : 'ins' },

   { name : 'Cited Work'      , element : 'cite' },
   { name : 'Inline Quotation'   , element : 'q' },

   { name : 'Language: RTL'   , element : 'span', attributes : { 'dir' : 'rtl' } },
   { name : 'Language: LTR'   , element : 'span', attributes : { 'dir' : 'ltr' } },

   /* Object Styles */

   {
      name : 'Image on Left',
      element : 'img',
      attributes :
      {
         'style' : 'padding: 5px; margin-right: 5px',
         'border' : '2',
         'align' : 'left'
      }
   },

   {
      name : 'Image on Right',
      element : 'img',
      attributes :
      {
         'style' : 'padding: 5px; margin-left: 5px',
         'border' : '2',
         'align' : 'right'
      }
   }
]);

4.) once it was edited, and saved to my js folder, I also edited the file stylescombo/plugin.js as follows:

CKEDITOR.config.stylesCombo_stylesSet = 'dnocdefault:/js/dnocdefault.js';

The new files were uploaded to my server.

So far, it does not work, and I'm not sure if I misunderstood the documentation, or if I edited incorrectly, or missed something. It looks like there are several ways to add my own styles (attach a CSS file, edit a copy of the default.js file as I have tried, or else add the code sort of in-line at the time the control is instantiated. The documentation made it seem like I was doing it the preferred way.

Can someone help me sort this out? I will be happy to type-up some step-by-step examples, and upload them here, once I have a good understanding of how to do this.

Thanks!

Dennis

==========================================================
OK, part of the problem was in not following directions:

The final line needs to be added to config.js:

/*
Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.editorConfig = function( config )
{
   // Define changes to default configuration here. For example:
   // config.language = 'fr';
   // config.uiColor = '#AADC6E';
   //config.stylesCombo_stylesSet = 'dnocdefault';
   config.stylesCombo_stylesSet = 'dnocdefault:/js/dnocdefault.js';


};

With that in place, I do get a dropdown styles menu.

However, I am not getting the style attributes applied properly. For instance the h1 header tag, in my CSS file is defined like this:

h1 {
   font-family:   Georgia, "Times New Roman", Times, serif;
   font-size:      240%;
   color:         #738028;
   margin:         5px 0px 10px 0px;
}

CKEditor does not seem to like the way I defined those attributes:

{ name : 'Heading 1'      , element : 'h1', 
      attributes:
      {
         'font-family' :   'Georgia, "Times New Roman", Times, serif',
         'font-size' :      '240%',
         'color' :         '#738028',
         'margin' :         '5px 0px 10px 0px'
      }
   },

I also tried the color line above as:

'color' :         'rgb(115,128,40)',

When I try to apply the style (contained in the h1 tag) from the dropdown menu, the source reveals that the opening and closing tags are applied, but applying the wrong formatting, apparently inheriting it from the <body> tag. Seems like I am going to need to attach an entire CSS style sheet to the CKeditor instances. One big problem with that will be that the CSS may define an artsy-fartsy background image, and the web designer is using DIV tags to avoid portions of the background graphic. I foresee that will be a problem within the CKEditor instance, because the background graphic will start a 0,0 and the text will start at 0,0 rather than wherever they would actually be on a page.

So, I played around with trying to use the editor to apply the correct style to a section of text, and was surprised at seeing nested span tags, each defining one attribute.

Like I said before, it sure would be good to see some code examples of others facing this same type of scenario - and how you accomplished it.

Dennis