Ckeditor - Stylesheet Parser - Valid Selectors

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 defini

Solution 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.