Skip to main content
Added basepath info and moved the JS loads to the footer so that the "Insert File" link shows up properly in the IMCE window.
Source Link
diff -ur ./Civi/Angular/Page/Main.php /var/www/drupal/sites/all/modules/civicrm/Civi/Angular/Page/Main.php
--- ./Civi/Angular/Page/Main.php    2015-04-16 09:24:10.000000000 +1000
+++ /var/www/drupal/sites/all/modules/civicrm/Civi/Angular/Page/Main.php    2015-05-10 19:23:42.101009438 +1000
@@ -80,7 +80,8 @@
     $this->res->addScriptFile('civicrm', 'bower_components/angular/angular.min.js', 100, 'html-header', FALSE);
 
     // FIXME: crmUi depends on loading ckeditor, but ckeditor doesn't work with this aggregation.
-    $this->res->addScriptFile('civicrm', 'packages/ckeditor/ckeditor.js', 100, 'page-header', FALSE);
+   drupal_add_js('window.CKEDITOR_BASEPATH = "/sites/all/libraries/ckeditor/"', array('type' => 'inline', 'weight' => -100));
+    $this->res->addScriptFile('civicrm', '../ckeditor/includes/ckeditor.utils.js?', 100, 'page-header''footer', FALSE);
+    $this->res->addScriptFile('civicrm', '../../libraries/ckeditor/ckeditor.js?', 100, 'page-header''footer', FALSE);
 
     $headOffset = 0;
     $config = \CRM_Core_Config::singleton();
diff -ur ./Civi/Angular/Page/Main.php /var/www/drupal/sites/all/modules/civicrm/Civi/Angular/Page/Main.php
--- ./Civi/Angular/Page/Main.php    2015-04-16 09:24:10.000000000 +1000
+++ /var/www/drupal/sites/all/modules/civicrm/Civi/Angular/Page/Main.php    2015-05-10 19:23:42.101009438 +1000
@@ -80,7 +80,8 @@
     $this->res->addScriptFile('civicrm', 'bower_components/angular/angular.min.js', 100, 'html-header', FALSE);
 
     // FIXME: crmUi depends on loading ckeditor, but ckeditor doesn't work with this aggregation.
-    $this->res->addScriptFile('civicrm', 'packages/ckeditor/ckeditor.js', 100, 'page-header', FALSE);
+    $this->res->addScriptFile('civicrm', '../ckeditor/includes/ckeditor.utils.js?', 100, 'page-header', FALSE);
+    $this->res->addScriptFile('civicrm', '../../libraries/ckeditor/ckeditor.js?', 100, 'page-header', FALSE);
 
     $headOffset = 0;
     $config = \CRM_Core_Config::singleton();
diff -ur ./Civi/Angular/Page/Main.php /var/www/drupal/sites/all/modules/civicrm/Civi/Angular/Page/Main.php
--- ./Civi/Angular/Page/Main.php    2015-04-16 09:24:10.000000000 +1000
+++ /var/www/drupal/sites/all/modules/civicrm/Civi/Angular/Page/Main.php    2015-05-10 19:23:42.101009438 +1000
@@ -80,7 +80,8 @@
     $this->res->addScriptFile('civicrm', 'bower_components/angular/angular.min.js', 100, 'html-header', FALSE);
 
     // FIXME: crmUi depends on loading ckeditor, but ckeditor doesn't work with this aggregation.
-    $this->res->addScriptFile('civicrm', 'packages/ckeditor/ckeditor.js', 100, 'page-header', FALSE);
+   drupal_add_js('window.CKEDITOR_BASEPATH = "/sites/all/libraries/ckeditor/"', array('type' => 'inline', 'weight' => -100));
+    $this->res->addScriptFile('civicrm', '../ckeditor/includes/ckeditor.utils.js?', 100, 'footer', FALSE);
+    $this->res->addScriptFile('civicrm', '../../libraries/ckeditor/ckeditor.js?', 100, 'footer', FALSE);
 
     $headOffset = 0;
     $config = \CRM_Core_Config::singleton();
Source Link
Ken West
  • 1.1k
  • 6
  • 12

My answer to this question assumes you are using Drupal, the Drupal CkEditor module, have installed CkEditor as a Drupal library, and want to use ICME as your file browser. Also, I'm limiting my answer to the Angular code (eg, New CiviMail). Hopefully it's still useful even if you have a different setup.

The changes that are required are ...

  1. alter which CkEditor JS is invoked
  2. include another CkEditor JS file so you have a callback for IMCE to hook into
  3. alter the file browser so IMCE is invoked rather than CkFinder
  4. alter any other CkEditor configuration as required

You can ignore 2), 3), and 4) if ICME or other configuration changes are not needed.

The following patch to 4.6.2 implements 1) and 2). If you don't want to use IMCE then don't add the line referring to 'ckeditor.utils.js'.

diff -ur ./Civi/Angular/Page/Main.php /var/www/drupal/sites/all/modules/civicrm/Civi/Angular/Page/Main.php
--- ./Civi/Angular/Page/Main.php    2015-04-16 09:24:10.000000000 +1000
+++ /var/www/drupal/sites/all/modules/civicrm/Civi/Angular/Page/Main.php    2015-05-10 19:23:42.101009438 +1000
@@ -80,7 +80,8 @@
     $this->res->addScriptFile('civicrm', 'bower_components/angular/angular.min.js', 100, 'html-header', FALSE);
 
     // FIXME: crmUi depends on loading ckeditor, but ckeditor doesn't work with this aggregation.
-    $this->res->addScriptFile('civicrm', 'packages/ckeditor/ckeditor.js', 100, 'page-header', FALSE);
+    $this->res->addScriptFile('civicrm', '../ckeditor/includes/ckeditor.utils.js?', 100, 'page-header', FALSE);
+    $this->res->addScriptFile('civicrm', '../../libraries/ckeditor/ckeditor.js?', 100, 'page-header', FALSE);
 
     $headOffset = 0;
     $config = \CRM_Core_Config::singleton();

The following patch implements 3) and 4). If you only want to use IMCE, change the 'filebrowser' lines. The other changes are illustrative. Note that my configuration is that uploads are only done via IMCE so the Upload URLs are empty.

diff -ur ./ang/crmUi.js /var/www/drupal/sites/all/modules/civicrm/ang/crmUi.js
--- ./ang/crmUi.js  2015-04-16 09:24:10.000000000 +1000
+++ /var/www/drupal/sites/all/modules/civicrm/ang/crmUi.js  2015-05-11 10:38:38.106365505 +1000
@@ -397,12 +397,31 @@
             _.extend(ck.config, {
               width: '94%',
               height: '400',
-              filebrowserBrowseUrl: CRM.crmUi.browseUrl + '?cms=civicrm&type=files',
-              filebrowserImageBrowseUrl: CRM.crmUi.browseUrl + '?cms=civicrm&type=images',
-              filebrowserFlashBrowseUrl: CRM.crmUi.browseUrl + '?cms=civicrm&type=flash',
-              filebrowserUploadUrl: CRM.crmUi.uploadUrl + '?cms=civicrm&type=files',
-              filebrowserImageUploadUrl: CRM.crmUi.uploadUrl + '?cms=civicrm&type=images',
-              filebrowserFlashUploadUrl: CRM.crmUi.uploadUrl + '?cms=civicrm&type=flash',
+              filebrowserBrowseUrl      : '/imce?app=ckeditor|sendto%40ckeditor_imceSendTo|',
+              filebrowserImageBrowseUrl : '/imce?app=ckeditor|sendto%40ckeditor_imceSendTo|',
+              filebrowserFlashBrowseUrl : '/imce?app=ckeditor|sendto%40ckeditor_imceSendTo|',
+              filebrowserUploadUrl      : '',
+              filebrowserImageUploadUrl : '',
+              filebrowserFlashUploadUrl : '',
+              bodyClass                 : 'cke_editable',
+              contentsCss               : '/sites/all/themes/cbootf/css/editor.css',
+              scayt_autoStartup         : true,
+              scayt_sLang               : 'en_GB',
+              forcePasteAsPlainText     : true,
+              toolbar : [
+                 ['Source'],
+                 ['Cut','Copy','PasteText','-','SpellChecker', 'Scayt'],
+                 ['Undo','Redo','Find','Replace','-','SelectAll','RemoveFormat'],
+                 ['Image','Table','HorizontalRule','SpecialChar'],
+                 '/',
+                 ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
+                 ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
+                 ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
+                 ['Link','Unlink','Anchor','Linkit','LinkToNode', 'LinkToMenu'],
+                 '/',
+                 ['TextColor','BGColor'],
+                 ['Maximize', 'ShowBlocks']
+              ],
             });
           }
 

Note that if you want to change the CkEditor for the non-Angular code, you need to make analogous changes to templates/CRM/common/wysiwyg.tpl and packages/HTML/QuickForm/ckeditor.php.