Adding custom styles to CKEditor

问题

I recently added CKEditor to my app and I would like to include my own CSS stylesheets within the editor so that I can select them within the editor.

How do I accomplish this? My code so far looks like this:

<script type="text/javascript">

    CKEDITOR.replace( 'editor1',{
        uiColor : '#9AB8F3',
    });

</script>

回答1:

Please look at @metavida answer for a better answer than this

<script type="text/javascript">

    CKEDITOR.replace( 'editor1',{

          uiColor : '#9AB8F3',
          stylesSet.add('default', [
               { name: 'My Custom Block', element: 'h3', styles: { color: 'Blue'} },
               { name: 'My Custom inline style', element: 'q'}
          ]);    
    });

</script>

Though if you're using this in more than one place it'd be best to look at putting this into the stylescombo\styles\default.js file and updating your config.js file accordingly as per api.

回答2:

<script type="text/javascript">
  // This code could (may be should) go in your config.js file
  CKEDITOR.stylesSet.add('my_custom_style', [
    { name: 'My Custom Block', element: 'h3', styles: { color: 'blue'} },
    { name: 'My Custom Inline', element: 'span', attributes: {'class': 'mine'} }
  ]);
  // This code is for when you start up a CKEditor instance
  CKEDITOR.replace( 'editor1',{
    uiColor: '#9AB8F3',
    stylesSet: 'my_custom_style'
  });
</script>

You can also read the full documentation of the stylesSet.add syntax:

CKEditor 4 documentation
CKEditor 3 documentation, as Vincent mentioned.
CKEditor 4 How Do I Customize the Styles Drop-Down List?
CKEditor 3 How Do I Customize the Styles Drop-Down List?

回答3:

This works for me

CKEDITOR.addCss('body{background:blue;}');

回答4:

As has already been mentioned, there is a page explaining how to set up a set of custom styles. What the little gem hidden on that page (and not really clear) is that rather than creating a named set of styles, you can define the styles inline in your configuration, like this:

    stylesSet : [
    {
        name : 'Green Title',
        element : 'h3',
        styles :
        {
            'color' : 'Green'
        }
    } ],

回答5:

Little late to the party here, but the default styles are in _source/plugins/styles/styles/default.js. You could use that as your style config and add styles and it would effectively be appending.

回答6:

The best way is to use this plugin: http://ckeditor.com/addon/stylesheetparser

Paste it inside the 'ckeditor/plugins' directory, then include something like this in your 'ckeditor/config.js':

config.extraPlugins = 'stylesheetparser';
config.contentsCss = '/css/inline-text-styles.css';
config.stylesSet = [];

Where '/css/inline-text-styles.css' is a path to your own css folder in your webroot, outside of ckeditor. That saves you having to mix css with javascript.

来源：https://stackoverflow.com/questions/2102797/adding-custom-styles-to-ckeditor

标签

javascript

css

ckeditor