Drupal + CKEditor

• How to make CKEditor (almost) WYSIWYG
• Screencasts!

How to make CKEditor (almost) WYSIWYG

When using cutom theme, sometimes it is necessary to tell CKEditor to use the correct style.
Let's use as example the marinelli theme.

By default, it is hard to create a page with CKEditor: background color used by site and font color are too similar and it's very hard to read anything, text is aligned to the center:

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

Take a look at the source of marinelli template (you may use Firefox with Firebug to do that). The ID of main element is called "primary". The class is named "singlepage".

All we need to do is to tell CKEditor to use that styles:

• Edit CKEditor profile, in the "CSS section" choose use theme css
• In modules/ckeditor/ckeditor.config.js, add the following:
  

  config.bodyClass = 'singlepage';
  config.bodyId = 'primary';

• Now our body inside of the CKEditor gets the right ID.
• Well we still have the wrong background and text alignment. To fix this, add another line in ckeditor.config.js:
  

  config.extraCss += "body{background:#FFF;text-align:left;font-size:0.8em;}";

  because lists also don't look nice by default, we'll add some margin:
  

  config.extraCss += "#primary ol, #primary ul{margin:10px 0 10px 25px;}";

  (see in Firebug how styles for lists are defined in marinelli theme to understand the problem)
• Remember to clear your browser's cache after applying changes to javascript files.

Here's the final result:

 

Necessary changes for marinelli theme are already available in ckeditor.config.js. They can be taken as an example.

Screencasts!

• How to Install and Configure the CKEditor Module created by compujohnny
• How to Install CKFinder with CKEditor in Drupal created by compujohnny
• How to add Youtube, Vimeo or any other embed content to CKEditor created by compujohnny
• How to display the Drupal contact form in a nice Ajax Popup using CKEditor created by compujohnny
• How to show your images in a thickbox in Drupal using CKEditor created by compujohnny