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

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.