CKEditor for Drupal/Enterprise/Drupal 7/Troubleshooting - Revision history

Anna: Template link changed

2012-05-30T13:36:45Z

Template link changed

Anna: Article contents added

2012-05-24T12:39:05Z

Article contents added

Anna: Template contents added

2012-05-24T12:37:22Z

Template contents added

New page

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:
<source lang="php">
<?php print $scripts; ?>
</source>
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:
<source lang="php">
<?php print $closure; ?>
</source>
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 <code><img></code> tag to the '''Filtered HTML''' format.

{{#ifeq: {{{version}}} | 6 |If you want to extend the list of allowed HTML tags, go to the '''Administration Panel''' > '''Site configuration''' > '''Input formats''' and click the '''configure''' link next to the chosen input format. Open the '''Configure''' tab and add the <code><img></code> tag to the '''Allowed HTML tags''' field of the '''HTML Filter''' section. |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 <code><img></code> tag to the '''Allowed HTML tags''' field.}}

{{#ifeq: {{{version}}} | 6 |== Selected toolbar does not show for User 1 ==
There are two reasons why you are seeing a different toolbar (or do not see CKEditor at all):
* If the '''Allow users to customize CKEditor appearance''' option is enabled, each user may override the profile settings in the '''Rich text editor settings''' section of the <code>admin/user/N/edit</code> page ('''My Account''' -> '''Edit''').
* A different profile is used for User 1 than you expect.
*; User 1 must be assigned a system role that corresponds to the privileges required. If no role is assigned to User 1, this user will have the privileges of an "authenticated user" (usually it is the '''Advanced''' profile).| }}

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

The correct directory structure is as follows:
<source>
modules <dir>
ckeditor <dir>
ckeditor.css
ckeditor.info
...
ckeditor <dir>
_source <dir>
images <dir>
lang <dir>
plugins <dir>
skins <dir>
themes <dir>
ckeditor.js
...
ckfinder <dir>
...
</source>

== 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 <code>ckeditor.config.js</code> file (located in the CKEditor module directory), the following classes are defined to provide the text alignment functionality:
<source lang="javascript">
config.justifyClasses = [ 'rteleft', 'rtecenter', 'rteright', 'rtejustify' ];
</source>

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:
<source lang="javascript">
//config.justifyClasses = [ 'rteleft', 'rtecenter', 'rteright', 'rtejustify' ];
</source>

CKEditor will then use inline styles instead:
<source lang="html4strict">
sample text
</source>

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:
<source lang="css">
.content p { text-align: left; }
</source>
the <code>text-align</code> property set in the <code>.rteright</code> class will not work.

To align the <code></code> tag, you will have to edit the <code>/sites/all/modules/ckeditor/ckeditor.css</code> file and create a style that will be applied to the <code></code> tag:
<source lang="css">
.content p.rteleft {
text-align: left;
}
.content p.rteright {
text-align: right;
}
.content p.rtecenter {
text-align: center;
}
.content p.rtejustify {
text-align: justify;
}
</source>

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 <code> </code> 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 (<code>"</code>) to <code>&quot;</code>. 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.

← Older revision		Revision as of 13:36, 30 May 2012
Line 1:		Line 1:
	{{#CUSTOMTITLE:CKEditor for Drupal 7 Troubleshooting (Enterprise Version)}}		{{#CUSTOMTITLE:CKEditor for Drupal 7 Troubleshooting (Enterprise Version)}}
−	{{Drupal ~~Enterprise~~ Troubleshooting\|version=7}}	+	{{Drupal Troubleshooting\|version=7}}

← Older revision		Revision as of 12:39, 24 May 2012
Line 1:		Line 1:
−	~~The following article describes some known issues that you might encounter when installing and using the CKEditor for Drupal module.~~	+	{{#CUSTOMTITLE:CKEditor for Drupal 7 Troubleshooting (Enterprise Version)}}
−		+	{{Drupal Enterprise Troubleshooting\|version=7}}
−	~~== CKEditor does not work in my theme ==~~
−	~~Your theme may be missing the following code:~~
−	~~<source lang="php">~~
−	~~<?php print $scripts; ?>~~
−	~~</source>~~
−	~~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:~~
−	~~<source lang="php">~~
−	~~<?php print $closure; ?>~~
−	~~</source>~~
−	~~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 <code><img></code> tag to the '''Filtered HTML''' format.~~
−
−	{{#ifeq: {{{version}}} \| 6 \|If you want to extend the list of allowed HTML tags, go to the '''Administration Panel''' > '''Site configuration''' > '''Input formats''' and click the '''configure''' link next to the chosen input format. Open the '''Configure''' tab and add the <code><img></code> tag to the '''Allowed HTML tags''' field of the '''HTML Filter''' section. \|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 <code><img></code> tag to the '''Allowed HTML tags''' field.}}
−
−	{{#~~ifeq: {{{version}}} \| 6 \|== Selected toolbar does not show for User 1 ==~~
−	~~There are two reasons why you are seeing a different toolbar (or do not see CKEditor at all)~~:
−	* If the '''Allow users to customize CKEditor appearance''' option is enabled, each user may override the profile settings in the '''Rich text editor settings''' section of the <code>admin/user/N/edit</code> page ('''My Account''' -> '''Edit''').
−	* A different profile is used for ~~User 1 than you expect.~~
−	*; User 1 must be assigned a system role that corresponds to the privileges required. If no role is assigned to User 1, this user will have the privileges of an "authenticated user" (~~usually it is the '''Advanced''' profile~~).\| }}
−
−	~~== The CKEditor module is not installed correctly ==~~
−	If your CKEditor does not show, you should check whether all files were extracted correctly. The <code>/sites/all/modules/ckeditor/ckeditor/</code> directory should contain the following files: <code>ckeditor.js</code>, <code>config.js</code>, <code>contents.css</code> as well as directories named <code>images</code>, <code>lang</code>, <code>plugins</code>, <code>skins</code>, and <code>themes</code>.
−
−	~~The correct directory structure is as follows:~~
−	~~<source>~~
−	~~modules <dir>~~
−	~~ckeditor <dir>~~
−	~~ckeditor.css~~
−	~~ckeditor.info~~
−	~~...~~
−	~~ckeditor <dir>~~
−	~~_source <dir>~~
−	~~images <dir>~~
−	~~lang <dir>~~
−	~~plugins <dir>~~
−	~~skins <dir>~~
−	~~themes <dir>~~
−	~~ckeditor.js~~
−	~~...~~
−	~~ckfinder <dir>~~
−	~~...~~
−	~~</source>~~
−
−	~~== 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 <code>ckeditor.config.js</code> file (located in the CKEditor module directory), the following classes are defined to provide the text alignment functionality:~~
−	~~<source lang="javascript">~~
−	~~config.justifyClasses = [ 'rteleft', 'rtecenter', 'rteright', 'rtejustify' ];~~
−	~~</source>~~
−
−	~~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:~~
−	~~<source lang="javascript">~~
−	~~//config.justifyClasses = [ 'rteleft', 'rtecenter', 'rteright', 'rtejustify' ];~~
−	~~</source>~~
−
−	~~CKEditor will then use inline styles instead:~~
−	~~<source lang="html4strict">~~
−	~~<p style="text-align: right;">sample text</p>~~
−	~~</source>~~
−
−	~~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:~~
−	~~<source lang="css">~~
−	~~.content p~~ { ~~text-align: left; }~~
−	~~</source>~~
−	~~the <code>text-align</code> property set in the <code>.rteright</code> class will not work.~~
−
−	~~To align the <code><p></code> tag, you will have to edit the <code>/sites/all/modules/ckeditor/ckeditor.css</code> file and create a style that will be applied to the <code><p></code> tag:~~
−	~~<source lang~~=~~"css">~~
−	~~.content p.rteleft {~~
−	~~text-align: left;~~
−	}
−	~~.content p.rteright {~~
−	~~text-align: right;~~
−	}
−	~~.content p.rtecenter {~~
−	~~text-align: center;~~
−	}
−	~~.content p.rtejustify {~~
−	~~text-align: justify;~~
−	}
−	~~</source>~~
−
−	~~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 <code><br /></code> 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 (<code>"</code>) to <code>&quot;</code>. 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.