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
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
Thank Sam for helping keep this up to date. I have updated post per your comment in section Configure to use CKEditor for input fields
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 ?
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
Thank you Margots. I found another way. 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 I can just copy my config file into my theme folder.
But thanks for the js_alter tip.
Hav a nice one.
Its good to hear Thomas. I also included your question and answer in the post itself in section “How To Externalize CKEditor Settings” Thank you for contributing this post. I hope others will find it useful