Adding custom styles to CKEditor

ckeditor, css, javascript

Solution

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.

Problem

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

Original source