Remove item from style list

Developers Guide: Styles



External Styles Definition File method:

<textarea name="editor1">initial content text</textarea>
         <script type="text/javascript">
            CKEDITOR.replace( 'editor1' );
            CKEDITOR.add
            //the following is an example of attaching my own CSS stylesheet, "main.css" 
            CKEDITOR.config.contentsCss = '/css/main.css' ;    
            CKEDITOR.config.stylesCombo_stylesSet = '/myCKEditorMods/mystylesdropdownlist.js';
         </script>

CKEDITOR.config.stylesCombo_stylesSet = 'mystylesdropdownlist:http://www.mywebdomain.com/ckeditor/_source/plugins/stylescombo/styles/mystylesdropdownlist.js';

Internal Styles Definition File method:

<textarea name="editor1">initial content text</textarea>
         <script type="text/javascript">
            CKEDITOR.replace( 'editor1' );
            CKEDITOR.add
            CKEDITOR.config.contentsCss = '/css/main.css' ;            
            CKEDITOR.addStylesSet( 'mystyleslist',
               [
                   /* Inline Styles */
                  
                  { name : 'readMore', element : 'span', attributes : { 'class' : 'readMore' } },
                  { name : 'BoldItal' , element : 'span', styles:
                     {
                     'font-weight' :   'bold',
                     'font-style' :      'italic'
                     }
                  },
                  
                  /* 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'
                     }
                  }
               ]);
            
            CKEDITOR.config.stylesCombo_stylesSet = 'mystyleslist';

         </script>

CKEDITOR.config.contentsCss = '/css/main.css' ;   

{ name : 'readMore', element : 'span', attributes : { 'class' : 'readMore' } },

CKEDITOR.config.stylesCombo_stylesSet = 'mystyleslist';

Wow, that explanation should be in the docs! Clearest I've ever found in endless searching.

>>you would create the instance of the CKEditor something like this

I'm just using a class name to init the editor a couple times on a page, so how can I apply my own css sheet and custom styles dialog to them?

While I'm here, any way to get relative images to show up in the editor? And best way to apply a class - my "highlight" class - to a selected element like a p or div or span?

VERY VERY helpful !!!!

THANK YOU

thanks for the specific advice on loading a custom style sheet (.css file)

a great reply!

many thanks.. this was very useful.

However, I can call in my .css file and control what options are shown in the stylescombo dropdown. The css is controling things like background colour (changing the colour of the editor background), however, it is ignoring my link colour?? I have set a:link colour in the css file, but it is showing as default blue in the editor and have tried everything to fix this but no joy???

Any help greatly appreciated.