Revision as of 13:39, 24 May 2012

The following article describes some known issues that you might encounter when installing and using the CKEditor for Drupal module.

CKEditor does not work in my theme

Your theme may be missing the following code:

<?php print $scripts; ?>

Add that line of code to the head section of your theme.

Another possibility is that the following code might be missing in your theme:

<?php print $page_bottom; ?>

The solution is the same as above — you need to add that line to your theme at the end of its code.

Finally, you can also try to switch to a different theme.

Images are not displayed after the content is submitted

Most probably you need to properly configure the input format. Either set it to Full HTML or add the <img> tag to the Filtered HTML format.

If you want to extend the list of allowed HTML tags, go to the Administration Panel > Configuration > Content Authoring > Text formats and click the configure link next to the chosen input format. Open the Limit allowed HTML Tags tab in the Filter settings section and add the <img> tag to the Allowed HTML tags field.

The CKEditor module is not installed correctly

If your CKEditor does not show, you should check whether all files were extracted correctly. The /sites/all/modules/ckeditor/ckeditor/ directory should contain the following files: ckeditor.js, config.js, contents.css as well as directories named images, lang, plugins, skins, and themes.

The correct directory structure is as follows:

modules               <dir>
   ckeditor           <dir>
      ckeditor.css
      ckeditor.info
      ...
      ckeditor        <dir>
         _source      <dir>
         images       <dir>
         lang         <dir>
         plugins      <dir>
         skins        <dir>
         themes       <dir>
         ckeditor.js
         ...
   ...

CKEditor does not work after upgrading

This may be caused by the browser cache. Clear your browser cache and restart the browser if clearing the cache did not help.

If you upgraded the CKEditor module, make sure that all roles with "access ckeditor" permissions are assigned to at least one CKEditor profile.

Text alignment does not work

In the ckeditor.config.js file (located in the CKEditor module directory), the following classes are defined to provide the text alignment functionality:

config.justifyClasses = [ 'rteleft', 'rtecenter', 'rteright', 'rtejustify' ];

Unfortunately, some themes may override these styles and text alignment may not work as expected.

If you are using the Full HTML input format, you may simply comment out this line:

//config.justifyClasses = [ 'rteleft', 'rtecenter', 'rteright', 'rtejustify' ];

CKEditor will then use inline styles instead:

<p style="text-align: right;">sample text</p>

The problem is that inline styles may only be used with the Full HTML format. Filtered HTML will strip that code, so do not use this solution with this input format.

For Filtered HTML things are a bit more complicated. For example if your theme defines such CSS style as:

.content p { text-align: left; }

the text-align property set in the .rteright class will not work.

To align the <p> tag, you will have to edit the /sites/all/modules/ckeditor/ckeditor.css file and create a style that will be applied to the <p> tag:

.content p.rteleft {
  text-align: left;
}
.content p.rteright {
  text-align: right;
}
.content p.rtecenter {
  text-align: center;
}
.content p.rtejustify {
  text-align: justify;
}

Use DOM inspector (in Firefox) to check why the alignment does not work and correct your CSS styles. There is no universal workaround for this situation.

Line breaks removed when editing content previously authored without using CKEditor

The problem lies in the way you configured your input filters. Before you enabled CKEditor, you probably had the Line break converter enabled. Now you are trying to edit the same content with the Line break converter disabled, thus the line breaks are removed.

Possible workarounds:

• Enable the Line break converter (not recommended).
• Create a new input format with the Line break converter enabled. Use it just for old articles (recommended).
• Start with CKEditor disabled by default, replace all new line characters manually with a <br /> tag, then use toggle to switch to WYSIWYG mode.

Quote symbols are being changed to quote entities

Some modules like Typogrify or SmartyPants require special handling of HTML entities. For example, by default CKEditor will convert a double quote character (") to ". To disable processing of HTML entities, open the CKEditor profile settings and go to the Advanced Options section. If you set the HTML Entities option to No, CKEditor will no longer convert all applicable characters to HTML entities.