Answers.Body: <p>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): <code>sites/default/files/civicrm/persist/crm-ckeditor-default.js</code></p>
  <p>e.g.</p>
  <pre><code>CKEDITOR.editorConfig = function( config ) {                                 
    config.allowedContent = true;                                              
  
    // Added these lines: ↓
    if (typeof config.contentsCss === 'string') {                              
      config.contentsCss = [config.contentsCss];                               
    }                                                                          
    config.contentsCss.push(&quot;/sites/all/themes/your-theme/css/ckeditor.css&quot;);  
    console.log(&quot;I hacked CKEDITOR's CSS :-)&quot;, config.contentsCss); 
    // ↑ you don't need that console.log, but it's handy to prove it's working.
  };                                                                           
  </code></pre>
  <p>However, do note as it says at the top of that file, <em>Note: This file will be overwritten if settings are modified</em></p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-05-18T17:07:42.407Z
Answers.LastActivityDate: 2021-05-18T17:07:42.407Z
Answers.UserDisplayName: artfulrobot
Body: <p>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!</p>
  
  <p>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.</p>
  
  <p>Is this already possible? And if not, any ideas about how to make it possible? Thanks for your help!</p>
  
  <p>Civicrm 5.10.3, Drupal 7 latest.</p>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2019-04-07T20:31:43.707Z
Comments.Text: Would using extras.css work? Described here https://docs.civicrm.org/user/en/latest/initial-set-up/resource-urls/
Comments.UserDisplayName: Demerit
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2019-04-08T23:18:10.660Z
Comments.Text: 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.
Comments.UserDisplayName: Andyg8
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2021-05-18T17:09:49.950Z
Comments.Text: Linking https://civicrm.stackexchange.com/questions/16750/how-to-change-ckeditors-config-colorbutton-colors
Comments.UserDisplayName: artfulrobot
Tags: <civievent><ckeditor>
Title: CKEditor in Civicrm - Is it possible to have a custom css file?
ThreadText: # CKEditor in Civicrm - Is it possible to have a custom css file?
  
  (Asked by: username_0 on 2019-04-07)
  
  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.
  
  **Tags:** civievent, ckeditor
  
  > **Comments:**
  > **username_1**: Would using extras.css work? Described here https://docs.civicrm.org/user/en/latest/initial-set-up/resource-urls/  
  > **username_0**: 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.  
  > **username_2**: Linking https://civicrm.stackexchange.com/questions/16750/how-to-change-ckeditors-config-colorbutton-colors  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_2 on 2021-05-18. Score: 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*
  
  
  ---
  
  