How can I change the ckeditor iframe CSS styling

Question

I'm unable to figure out how to modify the CKeditor iframe's body CSS styling. I've tried a bunch of options based on various potential solutions around the web, but I'm not very familiar with CKeditor's API which is making things rather difficult. This is (specifically) CKeditor 4.4.3.

You can see the various attempts (commented) at the following JSfiddle:

http://jsfiddle.net/KS3p4/1/

CKEDITOR.stylesSet.add( 'style_updates', [
    // ATTEMPT 1
    // Block-level styles...this is for the dropdown menu (not shown in current config)
    { name: 'Body Margin Fix', element: 'body', styles: { margin: '10px' } }
]);

editor = $('textarea').ckeditor( function(editor){
    // ATTEMPT 2
    //callback `this` refers to CKEDITOR.editor
    this.ckeditorGet().addCss('body { margin:10px; }')
}, {
    // ATTEMTP 3
    addCss: 'body { margin:10px; }',
    stylesSet: 'styles_updates',
    uiColor: '#FFFFFF',
    scayt_autoStartup: true,
    autoGrow_onStartup: true,
    enterMode: CKEDITOR.ENTER_BR,
    removePlugins: 'elementspath, resize',
    toolbar: [
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline' ] },
        { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'PasteFromWord', 'Undo', 'Redo' ] },
        { name: 'links', items: [ 'Link', 'Unlink' ] },
        { name: 'editing', groups: [ 'spellchecker' ], items: [ 'Scayt' ] },
        { name: 'tools', items: [ 'Maximize' ] }
    ]
// ATTEMPT 4
}).ckeditorGet().addCss('body { margin:10px; }');

Solution 1

Edit the contents.css file that's located in the main CKEditor directory or use the config.contentsCss setting to load a different file.

I see that you confused the styles system settings with content styling. These are two totally different things - styles system is responsible for applying and removing "styles" to selected content - it's used e.g. by styles and format drop downs as well as bold or italic buttons - all of them are "styles".

As for CKEDITOR.addCss() - this method is to be used by plugins mostly and it has to be used before editor is created. Actually, its doc says exactly this and mentions that you should use contents.css ;).

Solution 2

Confirm that in CKEditor 4.5.9 I was able to simply add a few needed custom override CSS styles via config.js (so less likely to be accidentally overwritten by updating CKEdtor versions in the future)

I added:

// Add override CSS styles for inside editable contents area.
CKEDITOR.addCss( '.cke_editable { font-size: 14px; } @media screen and (max-device-width: 767px) and (-webkit-min-device-pixel-ratio:0) { .cke_editable { font-size: 16px !important; } }' );

within existing CKEDITOR.editorConfig = function( config ) { ... } section to:

1. Override CKEditor's default .cke_editable content area body font size from 13px to 14px - to match the font size of my other Bootstrap form fields.
2. To specify that when viewed on an iPhone the .cke_editable font size should be increased to 16px to prevent iOS zooming into more than 100% of my already mobile optimised page layout.

That meant that I didn't have to edit CKEditor's content.css from the default for just 2x simple CSS overrides.

CKEditor's .addCss method reference http://docs.ckeditor.com/#!/api/CKEDITOR-method-addCss

If you do want to do more than a few CSS overrides you should instead look to use config.contentsCss = '/css/mysitestyles.css'; to repoint to your own customised version of CKEditor's default content.css. Or you could point at their default CSS then your own additional file with config.contentsCss = [ 'content.css', '/css/anotherfile.css' ];

CKEditor's .contentsCSS method reference http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-contentsCss

Comments

[BrendonKoz]

I was hoping there was a way to target the CSS inline within the JS instantiation of the editor as opposed to targeting an external CSS file. It seemed extraneous for just adding body{margin:0};. Oh well. Thank you! This was the same result someone else mentioned, so it must really be the only way. I didn't want to edit the contents.css file in case I ever upgraded the script, it would have overwritten my changes.

[Reinmar]

In such simple case you can use CKEDITOR.addCss(), but you would need to do that before creating editor instance.

[Reinmar]

BTW. As for upgrading, I understand this problem. We would remove the default config.js and contents.css files long ago, but they simplify setup for real beginners. However, you can simply use config.contentsCss and config.customConfig and keep these files outside of CKEditor directory. Then upgrading will be easy. We recommend this way for example on the CKEditor CDN page.

[BrendonKoz]

I wish I could give you additional points for that comment. Dang, thank you for the extra information!

[Santanu Nandi]

I am using #fullPage full page mode, so this solution is not working, do you know any other way to do the same while using the same full page mode?