2

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.

3
  • Would using extras.css work? Described here docs.civicrm.org/user/en/latest/initial-set-up/resource-urls
    – Demerit
    Apr 7 '19 at 20:31
  • Thanks for the thought! Nevertheless, as I understand extras.css, it's for the whole of Civicrm, rather than just for CKEditor. When CKEditor loads it displays the field it's showing via an iframe. So the only css that can affect the contents of the iframe is something that has been loaded within the <head> of the doc within the iframe (I hope that's correct! :-) ). So I'm asking if there's a way to tell CKEditor to load in a custom css file, like is possible in Drupal.
    – Andyg8
    Apr 8 '19 at 23:18
2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.