Adding custom styles to CKEditor 4.x

Checkout the crazy awesome step by step guide by andrew mallis to wysiwyg config. It documents the process of WYSIWYG setup very well.

http://bit.ly/ideograph-wysiwyg (Check out the "Set some Custom styles Section").

But I can say you should do this is 2 steps. Turn off wysiwyg filter, get those block/inline styles working, then turn back on the wysiwyg filter and make sure you add in the required classes for the filter so they don't get trimmed.

Nothing in the text format configuration currently affects CKEditor via Wysiwyg so that part is not relevant here.
Wysiwyg Filter currently only auto-configures TinyMCE's content output filter based on the format settings (through hook_wysiwyg_editor_settings_alter()). It won't actually change the UI. I don't think it interacts with CKEditor at all either.

You can't change which style goes into which box. Wysiwyg just sets the stylesSet setting and the editor determines which style to place where based on the elements they apply to.
P are block elements, and they can normally only get block styles.

I'm not sure why blockquotes went into inline styles, but there's nothing I can do about it, sorry.

I'm also struggling to load custom styles in CKEditor 4.5.3 using wysiywg 7.x-2.2+63-dev ... my styles just won't append/override the ones defined in my WYSIWYG profile!

I've got a custom ckeditor.config.js correctly loading (tested by changing editor color) and added the following:

CKEDITOR.stylesSet.add('drupal', [
    { name : 'Red', element : 'p', styles : {'color' : 'red' } }
]);

CKEDITOR.editorConfig = function( config ) {
    config.stylesSet = 'drupal';
};

But it doesn't add/replace Red to the block format list.

Anybody got this to work in a custom module?

Hello,
1. I'm copy file sites/all/modules/ckeditor/ckeditor.styles.js in my theme folder sites/all/themes/NAME_THEME
2. after go admin/config/content/ckeditor and edit Profile - for example: Full
3. scroll to advanced options and select yes option for "Load ckeditor.config.js from the theme path" (admin/config/content/ckeditor/edit/Full)

4. after you can change sites/all/themes/NAME_THEME/ckeditor.styles.js For example I added next line:

if(typeof(CKEDITOR) !== 'undefined') {
CKEDITOR.addStylesSet( 'drupal',
[
/* Block Styles */

// These styles are already available in the "Format" drop-down list, so they are
// not needed here by default. You may enable them to avoid placing the
// "Format" drop-down list in the toolbar, maintaining the same features.
/*
{ name : 'Paragraph' , element : 'p' },
{ name : 'Heading 1' , element : 'h1' },
{ name : 'Heading 2' , element : 'h2' },
{ name : 'Heading 3' , element : 'h3' },
{ name : 'Heading 4' , element : 'h4' },
{ name : 'Heading 5' , element : 'h5' },
{ name : 'Heading 6' , element : 'h6' },
{ name : 'Preformatted Text', element : 'pre' },
{ name : 'Address' , element : 'address' },
*/
+ { name: 'Blue link', element: 'p' , attributes: { 'class': 'link_dark_blue' } },
{ name : 'Blue Title' , element : 'h3', styles : { 'color' : 'Blue' } },

After in ckeditor in styles option I see my line (see screenshot)

mozh92: You instructions seem to be for the ckeditor module. Do they work for this module?