So is there a way to enable or install the full version of the free and open source CKEditor in CiviCRM 4.6.x ?

Looks like the CKEditor Standard editor (see http://ckeditor.com/demo#standard ) is installed with Civi (see http://d46.demo.civicrm.org/civicrm/a/#/mailing/37 ), but the "full featured" version ( see http://ckeditor.com/demo#full ) has more useful stuff, particularly aligning and centering text.

I've used the full version on the CKEditor demo site just to center text for a CiviMail mailing. That works, but having the full featured version right in CiviMail would be handy.

  • I think you're asking if you can customize the buttons available in the editor. It wouldn't really require a different "version" of CKEditor. Is that right? – Coleman May 2 '15 at 1:50
  • Well, can I customize or add buttons to install other features like text alignment? The CKEditor has two different versions, standard and full. I suppose I can install the full version to my Civi sites, will check that out. The full version could be the default that gets installed along with Civi rather than the standard version, right? – Joe McLaughlin May 2 '15 at 2:07
  • Possibly related wiki page: Configuring CiviCRM to Use the Default Drupal Editor. – choster May 11 '15 at 19:09

That's a good question. In the current version of Civi there is no UI for adding buttons to the CKEditor toolbar. However I think it would be relatively easy, especially since we now have a pluggable interface for wysiwyg editors, to integrate with the new Toolbar Configurator to allow a CiviCRM admin to drag n drop buttons in the toolbar.

Update: I've implemented a GUI for the configurator in CiviCRM 4.7!

  • Coleman, thanks, will check out the Configurator and the issue. – Joe McLaughlin May 2 '15 at 21:37
  • Coleman, thanks for the update! Woo-hoo! – Joe McLaughlin Sep 16 '15 at 21:59

The difference between the "full" and "standard" CKEditor is one of plugins. You can drop additional plugins into the ckeditor plugins folder at: <civicrmroot>/packages/ckeditor/plugins. Depending on the plugin, you may also need to edit the config at <civicrmroot>/packages/ckeditor/config.js. Detailed instructions are available here.

I've had perfectly good success simply dropping in the latest version of CKEditor (https://issues.civicrm.org/jira/browse/CRM-16053).

UPDATE: I found that newer versions of CKEditor strip out the "meta" tags from the templates unless you edit config.js. Also, be sure to clear all caches (including browser caches) or you may find that your CKEditor toolbar button icons are messed up (because of the wrong offset)

  • 1
    +1 for the tip on the newer versions of CKEditor stripping meta tags. I found it was also stripping all of the inline styling from all of my templates. Foudn the answer elsewhere but to put it all in one place... add config.allowedContent = true; to you config.js file to turn off data filtering or the styling may be stripped from your mailing templates as soon as you open them! What a pain! – Eli Lisseck Jul 22 '16 at 16:34

Adding this answer to note that Coleman and others have done a good thing by adding the ability to get all the bells and whistles of CKEditor into Civi 4.7, see Coleman's blog post, Big Changes to WYSIWYG Editing in 4.7


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);
+   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();

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.

  • Ken, thanks so much, will check this out as well. – Joe McLaughlin May 12 '15 at 18:45
  • This got me 95% of the way there but when IMCE loads I'm missing the crucial "Insert File" button that sends the file path back to the main CKEditor window. Any Ideas what's missing for that part? – Pooch Aug 14 '15 at 7:08
  • 1
    Found it... needed to load in the basepath reference <code>drupal_add_js('window.CKEDITOR_BASEPATH = "/sites/all/libraries/ckeditor/"', array('type' => 'inline', 'weight' => -100));</code> and move the js file loads from the page-header to page-footer... this is consistent with how the ckeditor module loads its assets. – Pooch Aug 14 '15 at 8:30
  • I see Pooch has suggested an Edit to your post Ken that inserts his new line of code. Are you happy for his edit to be accepted? – petednz - fuzion Aug 15 '15 at 3:51
  • I think the edit by @Pooch is OK, though I haven't tested it. The BASEPATH error I was getting was the Javascript console said 'TypeError: Drupal.settings.ckeditor is undefined' and I fixed it by editing sites/all/modules/ckeditor/includes/ckeditor.utils.js ... if (typeof window.CKEDITOR_BASEPATH === 'undefined') { - window.CKEDITOR_BASEPATH = Drupal.settings.ckeditor.editor_path; + if (typeof Drupal.settings.ckeditor !== 'undefined') { + window.CKEDITOR_BASEPATH = Drupal.settings.ckeditor.editor_path; + } } – Ken West Aug 24 '15 at 0:32

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.