Limited range of CSS selectors for the style sheet parser plugin

[Christophe Guillou]

Feature request from WCM around stylesheet parser.

The current implementation of the style sheet parser plugin requires the CSS selectors in the style sheet to have the following format: "<element tag>.<class name>"

Config example:

---

extraPlugins: "stylesheetparser"
contentsCss: '<styleSheetURL>'
stylesSet: []

The stylesheet contains the following CSS styles,

p.ibm
{
 color : red;
 font-size: 200%;
}

.cats
{
 color : purple;
 font-size: 200%;
}

.sydney
{
 color : blue;
 font-size: 200%;
}

The current implementation of the style sheet parser plugin requires the CSS selectors in the style sheet to have the following format: "<element tag>.<class name>". When the style is applied to a text selection, the element tag wraps the text selection and then the class attribute is set. When the above style sheet is passed in, the styles in the dropdown menu only contain "p.ibm".

Is it possible for the style sheet parser to generate style sets for CSS selectors that have the ".<class name>" format and wrap the text selection with "<span>" tags ? The objective is to get "cats" and "sydney" appear in the style sheet drop down menu with proper styling. When either "cats" or "sydney" is applied to a text selection, it should wrap the text selection with "<span>" tags, and set the applicable class attribute (either "cats" or "sydney").

Without modifying the internal Javascript code of the stylesheetparser, the following attributes can be set.

stylesheetParser_validSelectors : /(^\w|\.)/ stylesheetParser_skipSelectors : /^body/i

In this case, all 3 styles will appear in the dropdown menu, along with the styles in stylesheets of other CKeditor plugins. In my case, I also had the styles of "/ckeditor/plugins/codesnippet/lib/highlight/styles/default.css" in the dropdown menu. The class selectors appear in the dropdown menu as "<class='cats'>.cats". The class selectors will not have the styling applied to them in the dropdown menu. But when there are applied to a text selection, the style is applied to the text selection.