CKEditor for Drupal/Tricks - Revision history

Anna: Redirect created

2012-05-31T13:35:04Z

Redirect created

Anna: Page title modified

2012-02-24T12:16:40Z

Page title modified

Anna: Page title modified

2012-02-24T12:16:11Z

Page title modified

Anna: Article contents added

2012-02-24T12:15:43Z

Article contents added

Anna: Article part added

2012-02-24T09:51:13Z

Article part added

New page

{{#CUSTOMTITLE:CKEditor for Drupal Tricks}}
The following page lists a few tricks that you can use to make your CKEditor experience in Drupal even better than before.

== Adjusting CKEditor to Your Theme ==
When using a custom theme, sometimes it is necessary to tell CKEditor to use the correct style. Let us use the [http://drupal.org/project/marinelli Marinelli] theme as an example.

By default, it is hard to create a page with CKEditor when using this theme since the background color used by the site and the editor font color are too similar. It is very hard to read anything and the text is aligned to the center:

[[Image:Drupal_theme_01.png|frame|center|Default CKEditor settings used in the Marinelli theme]]

Fortunately, there is a way to tell CKEditor to appear just like you would expect.

Take a look at the source of the Marinelli template (you may use Firefox with Firebug to do that). The ID of main element is <code>primary</code>. The class is named <code>singlepage</code>. All you need to do is tell CKEditor to use these styles.

Go to the '''Administration''' > '''Configuration''' > '''Content authoring''' > '''CKEditor''' section and open the CKEditor profile that you want to configure. Go to the '''CSS''' section choose the '''Use theme CSS''' option for the '''Editor CSS''' setting.

← Older revision		Revision as of 13:35, 31 May 2012
Line 1:		Line 1:
−	{{#~~CUSTOMTITLE:CKEditor for Drupal Tips and Tricks}}~~	+	#REDIRECT [[CKEditor_for_Drupal/Page_Moved]]
−	~~The following page lists a few tricks that you can use to make your CKEditor experience in Drupal even better than before.~~
−
−	~~== Adjusting CKEditor to Your Theme ==~~
−	~~When using a custom theme, sometimes it is necessary to tell CKEditor to use the correct style. Let us use the~~ [~~http://drupal.org/project/marinelli Marinelli] theme as an example.~~
−
−	By default, it is hard to create a page with CKEditor when using this theme since the background color used by the site and the editor font color are too similar. It is very hard to read anything and the text is aligned to the center:
−
−	[~~[Image:Drupal_theme_01.png\|frame\|center\|Default CKEditor settings used in the Marinelli theme]]~~
−
−
−	~~Fortunately, there is a way to tell CKEditor to appear just like you would expect.~~
−
−	Take a look at the source of the Marinelli template (you may use Firefox with Firebug to do that). The ID of main element is <code>primary</code>. The class is named <code>singlepage</code>. All you need to do is tell CKEditor to use these styles.
−
−	Go to the '''Administration''' > '''Configuration''' > '''Content authoring''' > '''CKEditor''' section and open the CKEditor profile that you want to configure. Go to the '''CSS''' section choose the '''Use theme CSS''' option for the '''Editor CSS''' setting.
−
−	~~Open the <code>site/all/modules/ckeditor/ckeditor.config.js</code> file add the following code:~~
−	~~<source lang=javascript>~~
−	~~config.bodyClass = 'singlepage';~~
−	~~config.bodyId = 'primary';~~
−	~~</source>~~
−
−	~~As a result, the <code>body<~~/~~code> element inside CKEditor will get the right ID.~~
−
−	~~However, the background will still be wrong as will be the text alignment. To fix this, add another line of code inside the <code>ckeditor.config.js</code> file:~~
−	~~<source lang=javascript>~~
−	~~config.extraCss += "body{background:#FFF;text-align:left;font-size:0.8em;}";~~
−	~~</source>~~
−
−	~~Since lists also do not look nice by default, you can add some margin:~~
−	~~<source lang=javascript>~~
−	~~config.extraCss += "#primary ol, #primary ul{margin:10px 0 10px 25px;}";~~
−	~~</source>~~
−	~~(see in Firebug how the styles for lists are defined in the Marinelli theme to understand the problem)~~
−
−	~~<note>Remember to clear your browser cache after applying changes to JavaScript files as otherwise the changes might not be visible.~~
−	~~</note>~~
−
−
−	~~You can see the final result in the image below.~~
−
−	~~[[Image:Drupal_theme_02.png\|frame\|center\|CKEditor settings used in the Marinelli theme~~]]
−
−
−	~~Please note that necessary changes for the Marinelli theme are already available in the <code>ckeditor.config.js</code> file. They can be taken as an example.~~

← Older revision		Revision as of 12:16, 24 February 2012
Line 1:		Line 1:
−	{{#CUSTOMTITLE:CKEditor for Drupal Tips & Tricks}}	+	{{#CUSTOMTITLE:CKEditor for Drupal Tips and Tricks}}
	The following page lists a few tricks that you can use to make your CKEditor experience in Drupal even better than before.		The following page lists a few tricks that you can use to make your CKEditor experience in Drupal even better than before.

← Older revision		Revision as of 12:16, 24 February 2012
Line 1:		Line 1:
−	{{#CUSTOMTITLE:CKEditor for Drupal Tricks}}	+	{{#CUSTOMTITLE:CKEditor for Drupal Tips & Tricks}}
	The following page lists a few tricks that you can use to make your CKEditor experience in Drupal even better than before.		The following page lists a few tricks that you can use to make your CKEditor experience in Drupal even better than before.

← Older revision		Revision as of 12:15, 24 February 2012
Line 15:		Line 15:

	Go to the '''Administration''' > '''Configuration''' > '''Content authoring''' > '''CKEditor''' section and open the CKEditor profile that you want to configure. Go to the '''CSS''' section choose the '''Use theme CSS''' option for the '''Editor CSS''' setting.		Go to the '''Administration''' > '''Configuration''' > '''Content authoring''' > '''CKEditor''' section and open the CKEditor profile that you want to configure. Go to the '''CSS''' section choose the '''Use theme CSS''' option for the '''Editor CSS''' setting.
		+
		+	Open the <code>site/all/modules/ckeditor/ckeditor.config.js</code> file add the following code:
		+	<source lang=javascript>
		+	config.bodyClass = 'singlepage';
		+	config.bodyId = 'primary';
		+	</source>
		+
		+	As a result, the <code>body</code> element inside CKEditor will get the right ID.
		+
		+	However, the background will still be wrong as will be the text alignment. To fix this, add another line of code inside the <code>ckeditor.config.js</code> file:
		+	<source lang=javascript>
		+	config.extraCss += "body{background:#FFF;text-align:left;font-size:0.8em;}";
		+	</source>
		+
		+	Since lists also do not look nice by default, you can add some margin:
		+	<source lang=javascript>
		+	config.extraCss += "#primary ol, #primary ul{margin:10px 0 10px 25px;}";
		+	</source>
		+	(see in Firebug how the styles for lists are defined in the Marinelli theme to understand the problem)
		+
		+	<note>Remember to clear your browser cache after applying changes to JavaScript files as otherwise the changes might not be visible.
		+	</note>
		+
		+
		+	You can see the final result in the image below.
		+
		+	[[Image:Drupal_theme_02.png\|frame\|center\|CKEditor settings used in the Marinelli theme]]
		+
		+
		+	Please note that necessary changes for the Marinelli theme are already available in the <code>ckeditor.config.js</code> file. They can be taken as an example.