Remove item from style list

[nickashton]

How do I remove unwanted items from the styles list?

[dtleahy]

You can read more about it here: Developers Guide: Styles

One simple answer would be to edit your plugins/stylescombos/styles/default.js file, and comment out the ones you don't want, and add any new ones that you need. I don't think that is a good solution, however, because when you update the CKEditor, you'll have to recreate your work. Also it is sort of a 'hardcoded' solution, and makes it more difficult to use a variety of your external stylesheets.

External Styles Definition File method:
There may be times when you want to load an external file (for example, if you create a styles dropdown list you want to use on several sites or even pages, and would prefer to paste less code.) To do this, you need to first create your own version of the particular default.js file (found in ckeditor/_source/plugins/stylescombo/styles/default.js). Make a copy of that file, and call it your own name, for example mystylesdropdownlist.js, then modify that file to include (or exclude) whatever items you want on the styles dropdown list. Save it somewhere on your server, and remember the location, for example, let's say you made a folder right off your site's root folder and called that folder "myCKEditorMods", and copy your new mystylesdropdownlist.js file into that new folder.

Now, to have the CKEditor widget on your web page find and use that file, you would create the instance of the CKEditor something like this:

Code: Select all

<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>

Note that if you did not make a new folder for your new js file, and simply left it in the same folder that you started from, you'll need to provide a full URL to the file:

Code: Select all

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

Internal Styles Definition File method:
You can also create the style list and attach it right at the point where you are creating an instance of the CKEditor widget on the page.

for example:

Code: Select all

<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>


Notice that I call a specific CSS file to use with the editor contents:

Code: Select all

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

Notice that I then define a (small) set of styles for the dropdown, including one style ("readMore") that is a CSS class that I had defined in my main.CSS file:

Code: Select all

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

Notice that after creating the dropdown style list, you then need to call it:

Code: Select all

CKEDITOR.config.stylesCombo_stylesSet = 'mystyleslist';

HTH,

Dennis
p.s. I know this was really verbose, but I just spent a bunch of time going through this for my own use, and it is fresh in my mind. I thought I might be able to explain it, or provide a couple of examples, that were different than the developer documentation and hopefully helpful.

[stylo~]

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?

[djhojd]

VERY VERY helpful !!!!

THANK YOU

[raystrach]

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

a great reply!

[MelRBM]

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.