WYSIWYG with CKEditor in Drupal

Posted on by

It appears that CKEditor is the most advance and aesthetic WYSIWYG editor available for Drupal. As of February 2014, we run into issues installing the CKEditor as regular way WYSIWYG editors are installed in Drupal. In Part I, we summarize it. In the second part, we cover alternative integration of CKEditor as a stand alone editor

Install CKEditor Part of DRUPAL WYSIWYG

1. Enable WYSIWYG [wysiwyg] editors

To enable WYSIWYG editors in Drupal, install and enable wysiwyg module
With drush:

drush dl wysiwyg
drush en wysiwyg
2. Install Editor of your choice

Once module wysiwyg installed, then got to ‘admin/config/content/wysiwyg’ to see all the available wysiwyg editors with instructions how to install and enable any from the list.

We follow instruction and download the CKEditor library(in our case 4.3.2) from their site and extract it into the ‘site/all/libraries’ so that ‘ckeditor/ckeditor.js’ is as specified in the WYSIWYG configuration page.

After doing all this, the CKEDitor is not working and we have error:

The version of CKEditor could not be detected.

An alternative approach to install CKEditor as a separate module not part of WYSIWYG setup

Install CKEditor As Separate Module

Before continuing with this approach, make sure to disabale module – wysiwyg. The first step is as described above step 2 – Install Editor of Your Choice

A) Install the CKEditor Library

Download and past the CKEditor library into folder sites/all/libraries, so that ckeditor.js is in ‘sites/all/libraries/ckeditor/ckeditor.js’

B) Installing CKEditor Module

With Drush:

drush dl ckeditor
drush en ckeditor
C) Configure to use CKEditor for input fields

Go to admin/config/content/ckeditor/edit/Advanced or admin/config/content/ckeditor/edit/Full and ensure the checkbox ‘Text Formats’ for “Filtered HTML” or “Full HTML” is selected under ‘Basic Setup’ section.

For more custom configuration, go to ‘admin/config/content/ckeditor/’

D) Test Drive

Just open a node to ensure the editor is coming up for the input field with ‘full’ or ‘filter’ text formats

Other Stuff

Configure CKEditor Outside Drupal

If limited to what Drupal module – CKEditor configurations(admin/config/content/ckeditor) provides then you can configure CKEditor described in the CKEditor documentation native of CKEditor by updating the modules/ckeditor/ckeditor.config.js

For example:
To disable the advance auto filtering so that when CKEditor is enabled, it does not add and change extra html of the content:

CKEDITOR.editorConfig = function(config) {
    config.allowedContent = true;
...
}

This will disable the auto advance filtering. There other configurations to make like changing the color of the editor:

CKEDITOR.editorConfig = function(config) {
    config.uiColor = '#AADC6E';
...
}
Configure Allowed HTML Tags

To configure which html tags are allowed, consider to use wysiwyg_filter

sudo drush dl wysiwyg_filter
drush en wysiwyg_filter

Also uncheck ‘Limit allowed HTML tags’ in the Home » Administration » Configuration » Content authoring » Text formats

In addition, the CKEditor itself comes preconfigured to remove empty tags such span, em by default. Please see post Taking CKeditor Apart on how to avoid removing empty tags

Insert Photos in Content via IMCE Module

In order to insert photos in content via WYSIWYG, there is a Drupal Module called IMCE. To install and enable:

sudo drush dl imce
sudo drush en imce

This will install the necessary module to be able upload and insert photos via WYSIWYG editor in our case CKEditor

A) Make part of Image Dialog
The IMCE can be integrated in the CKEditor Image dialog. One of the benefits is that the functionality is add to current UI control(image button) so there is no need for additional buttons in the CKEditor Toolbar. Go to admin/config/content/ckeditor/edit/Full(or Advance) and select ‘IMCE’ for ‘File browser type (Image dialog window)’ in the section ‘FILE BROWSER SETTINGS’.

B)Make IMCE As Separate Control
The IMCE can be used as separate with its own button to upload files. To do that, check ‘Plugin for inserting files from IMCE without image dialog’ in the admin/config/content/ckeditor/edit/Full under ‘Plugins’ section. This will enable a separate IMCE button to be added to the CKEditor Toolbar.

Enhance Images to Resize, Align and Wrap text

With the newest version of CKEditor lib (4.4.0 and above) there is no more need for Drupal ckeditor_image module to have image enhancements such us resizing, aligning and wrapping text around. It comes out of box. You may want to combine the CKEditor Full source with plugin ‘Enhanced Image‘(image2) to have additional UI functionality for resizing by simply dragging a mouse.

Insert Photos in Content via Media & CKEditor_Media Module

Another module to insert images into content is Media. The benefit of using the Media module is that with ckeditor_media you are able to use the Media browser UI instead the CKEditor.
To install:

drush dl media
drush dl ckeditor_media
drush en media, ckeditor_media

Afterwards, configure the CKeditor toolbar to have the button for media browser by going to admin/config/content/ckeditor/edit/Full and drag/drop the media button.

Enabling CKEditor For Textarea

If you have custom form with textarea, then to enable the CKEditor, add the following:

          'some_textarea' => array(
            '#type' => 'text_format',
            '#format' => 'full_html',
            '#rows' => '5',
            '#prefix' => t('Content'),
            '#default_value' => variable_get('some_textarea', ''),
        ),

By adding ‘text_format’ and ‘full_html’ to the textarea element,it will trigger the CKEditor to load

Adding Theme Styles

http://docs.ckeditor.com/#!/guide/dev_styles

How to Externalized CKeditor settings?

Thomas asked the question how to externalized CKeditor settings(ckeditor/ckeditor.config.js)
Here is list of alternative potential solutions:

      1. It is possible to force ckeditor to read config file from theme path instead of module path. Its a setting under ckeditor / advanced – and then you can just copy the custom config file into the theme folder.
      2. [NEED TO BE TESTED] Use hook_js_alter to replace default ckeditor with your custom one. See post How To Upgrade JQuery UI In Drupal for the same approach just instead altering jQuery lib you would alter ckeditor.config.js location.
      3. [NEED TO BE TESTED] If overlays are not used for admin content then you can have custom Js floated with your custom settings set on the CKEDITOR variable. See post Taking CKEditor a Apart and look how CKEditor is started from console. This should give you idea on how to call CKEditor API on CKEDITOR global js variable with your custom settings
      Note:I don’t remember anymore, was it because overlays are in separate iframe or because CKEditor Drupal module removes CKEDITOR global var on load that makes it unavailable for calling CKEditor API directly. That being said, the second approach may not work

The first approach is more for UI development, the second is more for Drupal developers and third is more JS developers that like to have it done in js instead within Drupal framework

Troubleshooting

1. Many of the CKEditor Toolbar buttons doesn’t show

Make sure you have installed the FULL CKEditor library and not the other two. If a particular button don’t show up then the plugin or the code for that functionality is not present

2. The text doesn’t show up in CKEditor

This may be because the text color of theme is white and with CKEditor background color being white as well, the text appears missing. By changing “Editor CSS” in admin/config/content/ckeditor/edit/TEXT_FORMAT to “CKEditor Default” will use the CKEditor Theme with text font of color black

3. IMCE doesn’t work

The IMCE needs to be configured to work for all users. Go to admin/config/media/imce and create profile. Afterwards, assign this profile to user role

The Upload, Insert File, Resize,etc Buttons Doesn’t Show Up In IMCE Browser

Make sure the permissions for the public dir is set correctly

Useful links

  • CKeditor Source
  • https://drupal.org/project/ckeditor
  • http://docs.ckeditor.com/#!/guide/dev_configuration
  • http://docs.ckeditor.com/#!/api/CKEDITOR.config
  • http://docs.cksource.com/CKEditor_for_Drupal/Open_Source/Drupal_7/Tricks
  • http://drupal7tutorials.com/tutorial/3-getting-your-ckeditor-setup-drupal-7
  • http://docs.cksource.com/CKEditor_for_Drupal
  • https://drupal.org/node/1827434
  • http://ckeditor.com/forums/Support/How-to-build-and-implement-my-own-data-processor-and-disable-the-build-in-processor

6 thoughts on “WYSIWYG with CKEditor in Drupal”

  1. The only step missing here for approach 2 was once you have disable wysiwyg and installed ckeditor and completed step 1 and 2. Ckeditor will install 2 profiles by default, Advanced and Full. You need to edit them to assign the related text format (Full HTML and filtered HTML).

    It drove me crazy to find these settings since it is not explicit.
    Have fun :)

    Reply

  2. Thanks.
    If I am using drush with a makefile in my deploy process to download core and contrib modules, how do I avoid that my changes to ckeditor/ckeditor.config.js is being overwritten by drush ? – or should I implement ckeditor config modifications elsewhere ?

    Reply

  3. Thomas,
    there are several ways that i can think off:
    1. Use hook_js_alter to replace default ckedior with your custom. See post How To Upgrade JQuery UI In Drupal for the same approach only jQuery lib is being altered.
    2. If overlays are not used for admin content then you can have custom Js floated with your custom settings set on the CKEDITOR variable. See post Taking CKEditor a Apart and look how CKEditor is started from console. This should give you idea on how to call CKEditor API on CKEDITOR global js variable with your custom settings

    I don’t remember anymore, was it because overlays are in separate iframe or because CKEditor Drupal module removes CKEDITOR on load that makes it unavailable for calling CKEditor API directly. That being said, the second approach may not work

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *