Replace styles in CKEditor

Question

I'm building out a simple site building tool using CKEditor. The tool has the ability to choose from and set palettes, which should be reflected in the styles drop down of CKEditor. However, it seems to me that styles cannot be overwritten in CKEditor. The code I have at the moment is:

CKEDITOR.stylesSet.add( 'styles', [
  // Block-level styles
  { name: 'blah 1', element: 'h2', styles: { 'color': '#xxxxxx' } },
  { name: 'blah 2', element: 'h3', styles: { 'color': '#xxxxxx' } },
  { name: 'blah 3' , element: 'h4', styles: { 'color': '#xxxxxx' } },
  { name: 'blah 4' , element: 'h5', styles: { 'color': '#xxxxxx' } },
] );
CKEDITOR.config.stylesSet = 'styles';

Now, if I repeat this with new styles, I get:

ckeditor.js:232 Uncaught Error: [CKEDITOR.resourceManager.add] The resource name "styles" is already registered.

I've tried using CKEDITOR.replace, but this doesn't fix the issue. I guess, the obvious solution is to iterate the style name with each use; style1, style2, style3... but that's not very resource friendly. Does anyone have an actual solution for this?

Thanks, Lee

Answer 1

have you tried renaming styles to default?

I use this and it works, mine loads an external style file. But same array structure.

CKEDITOR.config.stylesSet = 'default:http://' + window.location.host + '/folder/fckeditor.styles.js';

Answer 2

So, I figured out a solution by always destroying the panel, if it exists, before re-creating it. For instance:

if (CKEDITOR.instances['footer-' + i]) {
  CKEDITOR.instances['footer-' + i].destroy(true);
}
var editor = CKEDITOR.inline('footer-' + i, {
  stylesSet: [
    // Block-level styles
    { name: 'Blue Title', element: 'h2', styles: { 'color': 'Blue' } },
    { name: 'Red Title' , element: 'h3', styles: { 'color': 'Red' } },
    { name: 'Brown Title' , element: 'h4', styles: { 'color': 'Red' } },
    { name: 'Purple Title' , element: 'h5', styles: { 'color': 'Red' } }
  ]
});

Now, this does throw up a warning each time, saying:

[CKEDITOR] For more information about this error go to http://docs.ckeditor.com/#!/guide/dev_errors-section-editor-incorrect-destroy

However, theres no clean way to do this otherwise with the CKEditor API, so since it works, I'm marking it as the answer.