Adding custom styles to ckeditor

Question

I recently added CKEditor to my app, I'm new to CKEditor and I would like to include my own css style sheets within the editor so that I can select them within the editor.

Ho do I accomplish this my code sofar looks like this

<script type="text/javascript">

    CKEDITOR.replace( 'editor1',{

          uiColor : '#9AB8F3',





        });

</script>

Answer 1

You can add custom styles to an editor quite easily. This page shows how.

Answer 2

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

Answer 3

This replaces the standard styles. How do I append additional styles to the default set?