Adding custom styles to CKEditor

Question

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>

Answer 1

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