CODEWITHSUNDEEP
javascriptcssstylesckeditor
Jerome Bohg
Jerome Bohg

Reputation: 486

Multiple Instanced CKEditor & CKEDITOR.stylesSet.add

I'm using CKeditor V3.x and I have multiple instances on one page. I had to add custom styles for a client so I used the CKEDITOR.stylesSet.add like this (as mentioned in the documentation http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles):

CKEDITOR.stylesSet.add( 'mystyles',
    [
        { name : 'Quote onderschrift', element : 'p', attributes : { 'class' : 'quote_sub' } },
        { name : 'Inleiding', element : 'p', attributes : { 'class' : 'inleiding' } }
    ]); 
    config.stylesSet = 'mystyles';

This does work when only having one editor on a page. When I have more editors on a single page I get the following error (via Firebug):

uncaught exception: [CKEDITOR.resourceManager.add] The resource name "mystyles" is already registered.

The result is I'm not getting any editors at all. While this error may seems logic I would like to solve it in a good way. For the time being I managed to solve it following this thread Adding custom styles to CKEditor, so I solved the addition of custom styles on the page itself rather that in the config like this:

CKEDITOR.replace('post_description', {
    stylesSet : 
    [
        { name : 'Quote onderschrift', element : 'p', attributes : { 'class' : 'quote_sub' } },
        { name : 'Inleiding', element : 'p', attributes : { 'class' : 'inleiding' } }
    ]
});:

As said, this works for forces me to use this fix on all pages where I want the custom styles. Is there a better solution on how to fix this? I'd prefer to have the styled added in the main config file.

Upvotes: 3

Views: 2002

Answers (1)

Joe C.
Joe C.

Reputation: 1538

I was getting the same bug with only a single editor on the page. I fixed it by setting stylesSet in the main config to be the styles definition I wanted.

config.stylesSet = [
    {
        name: 'Blue Title',
        element: 'h3',
        attributes: { 'class': 'blue-title' },
        styles: { color: 'blue' }
    }, {
        name: 'Red Text',
        element: 'p',
        attributes: { 'class': 'red-text' },
        styles: { color: 'red' }
    }
];

It's not the perfect solution, but it gets the job done.

Upvotes: 4

Related Questions