14

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.

Improve this question
3
  • 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
    Commented May 2, 2015 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
    Commented May 2, 2015 at 2:07
  • Possibly related wiki page: Configuring CiviCRM to Use the Default Drupal Editor.
    – choster
    Commented May 11, 2015 at 19:09

4 Answers 4

Reset to default
9

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!

Improve this answer
2
  • Coleman, thanks, will check out the Configurator and the issue.
    – Joe McLaughlin
    Commented May 2, 2015 at 21:37
  • Coleman, thanks for the update! Woo-hoo!
    – Joe McLaughlin
    Commented Sep 16, 2015 at 21:59
12

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)

Improve this answer
1
  • 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
    Commented Jul 22, 2016 at 16:34
4

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

Improve this answer
4

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.

Improve this answer
5
  • Ken, thanks so much, will check this out as well.
    – Joe McLaughlin
    Commented May 12, 2015 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
    Commented Aug 14, 2015 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
    Commented Aug 14, 2015 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 ♦
    Commented Aug 15, 2015 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
    Commented Aug 24, 2015 at 0:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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