CKEditor in Civicrm - Is it possible to have a custom css file?

Question

7 In Civicrm 4.7+ there's a great interface for customising CKEditor, and it allows you to add custom styles to the editor. That's great!

But we would very much like to go further and call a whole new custom css file for CKEditor. Much like you can in Drupal's CKEditor. We use in Civi we use CDEditor for event descriptions and much much more, and we'd like to make the CKEditor interface the same as for our Drupal web pages.

Is this already possible? And if not, any ideas about how to make it possible? Thanks for your help!

Civicrm 5.10.3, Drupal 7 latest.

Answer 1

If you use the great CKEDITOR editor to configure what you can there, then save, you can then edit the file in (typically, for a D7 implementation): sites/default/files/civicrm/persist/crm-ckeditor-default.js

e.g.

CKEDITOR.editorConfig = function( config ) {                                 
  config.allowedContent = true;                                              

  // Added these lines: ↓
  if (typeof config.contentsCss === 'string') {                              
    config.contentsCss = [config.contentsCss];                               
  }                                                                          
  config.contentsCss.push("/sites/all/themes/your-theme/css/ckeditor.css");  
  console.log("I hacked CKEDITOR's CSS :-)", config.contentsCss); 
  // ↑ you don't need that console.log, but it's handy to prove it's working.
};                                                                           

However, do note as it says at the top of that file, Note: This file will be overwritten if settings are modified