Question

I am transitioning my CMS to use CKEditor. I am currently trying to make use of the Stylesheet Parser. I have a large number of sites with editor styles already defined. The definitions are made with simple class declarations: .[class]. By default the selector finds [element].[class] declarations.

I tried setting for stylesheetParser_validSelectors:

config.stylesheetParser_validSelectors = /\.\w+/;

…but the styles selection is empty.

I am using Firebug, and I don’t see any errors in the console.

---

My Solution

I ended up using the stylesSet configuration option for two reasons:

1. It gives me control over the name that shows for a style selection
2. I can set a default, but allow for overrides

Code:

if ((typeof EditorStyleSet === 'undefined')
        || (typeof EditorStyleSet !== 'object')
        || !(EditorStyleSet instanceof Array)) {
    // Allow this variable to be set at the site level
    EditorStyleSet = [
        {name:'Title', element:'span', attributes:{'class':'title'}},
        {name:'Subtitle', element:'span', attributes:{'class':'subTitle'}},
        {name:'Header Text', element:'span', attributes:{'class':'headerText'}},
        {name:'Red', element:'span', attributes:{'class':'red'}},
        {name:'Small', element:'span', attributes:{'class':'small'}},
        {name:'Hi-Lite', element:'span', attributes:{'class':'hi-lite'}}
    ];
}
config.stylesSet = EditorStyleSet;

Answer 1

Your selectors are blocked by default skipSelectors (^\.):

config.stylesheetParser_skipSelectors = /(^body\.|^\.)/i

This is because stylesheetparser plugin wasn’t designed to deal with such cases. You can, however, override it:

config.stylesheetParser_skipSelectors: /^body\./i

Your styles will be visible on the list, but it will be visually broken. Now look at the code of stylesheedparser plugin (also log aClasses variable):

for ( i = 0; i < aClasses.length; i++ ) {
    var oElement = aClasses[ i ].split( '.' ),
        element = oElement[ 0 ].toLowerCase(),
        sClassName = oElement[ 1 ];

    styles.push({
        name: element + '.' + sClassName,
        element: element,
        attributes: { 'class': sClassName }
    });
}

Patch it a little bit:

for ( i = 0; i < aClasses.length; i++ ) {
    var oElement = aClasses[ i ].split( '.' ),
        element, sClassName;

    if ( !oElement.length ) {
        element = '',
        sClassName = oElement;
    } else {
        element = oElement[ 0 ].toLowerCase(),
        sClassName = oElement[ 1 ];
    }

    styles.push({
        name: element + '.' + sClassName,
        element: !element.length ? 'span' : element,
        attributes: { 'class': sClassName }
    });
}

And this is it!

---

Edit: Created a ticket for this issue.