CKE Styles Combo

Beta Download

CKE Styles Combo 1.0b2

for Typesetter CMS ver. 5 and newer

Installation:
Unpack the ZIP into your /addons directory and install it via
Admin Toolbox → Plugins → Manage → Available → Install


This Admin UI plugin activates CKEditor’s Styles Combo dropdown and comes with an Admin page to define which element.classes will be listed.
Warning – this addon is more for designers/developers and requires at least basic CSS and RegExp knowledge (or curiosity ;-)

Screenshot
WYSIWYG editor (CKEditor) with activated Styles dropdown, showing some custom element classes.

 

Screenshot 2
The plugin’s Admin page. In order to get your CSS element classes listed in CKEditor’s Styles dropdown, we need a Regular Expression pattern here to match them.

 

The plugin’s default pattern is ‘c-k-e’.
To get started, add some CSS classes, like …

div.redBox-c-k-e { background:red; } 
p.paraBlue-c-k-e { color:blue; } 
span.greenSpan-c-k-e { color:lime; background:green; }

… to your theme stylesheet (or Layout using Layout Editor) and check back to CKEditor.
In practice, you might eventually use a custom class naming scheme and applicable RegExp pattern.

Regular Expressions are not exactly intuitive.
Unless you’re using them on a daily basis, you’ll hate them.
But, once you learned them, you love them … have lots of coding fun … and then … you’ll forget them again—immediately.
Then, you hate them … till you learned them again ;-) and again … and again.
My 5¢ about Regular Expressions

 

Screenshot 3
Position of the Styles dropdown in CKEditor: By default the plugin will append a new toolbar to the editor area. If you like to have the Styles dropdown elsewhere, such as a replacement for the Font and Size dropdowns, you can insert it manually in CKEditor Configuration—e.g.  next to "Format", replacing "Font" and "Size", as seen above.  Use double quotes, we’re JSON here. The plugin will detect and use your custom toolbar position.


For questions, bug reports, feature requests and general discussion please post to the Typesetter Plugins Forum.

Thanks for testing and stay tuned!