Make CKEditor match your site’s CSS in Drupal 6

I’ve been converting a pretty big site over to Drupal 6 recently and have been trying to get the CKEditor to very closely appear like the sites CSS styles. By default it was doing an ok job, but not good enough for how the site’s content managers would be working with it.

Through a bit of research I did find an excellent tutorial on the subject. This was a tremendous help and exactly what I was looking to do.

Just a few simple adjustments in the ckeditor.config.js was all it took.

First I just changed the value of:

config.bodyId = '';

Now the majority of my site’s styles were cascading onto the CKEditor. There were still some minor tweaking that needed to be done.

Adding a few lines using:

config.extraCss += "";

and I was all set. Now the CKEditor editor is displaying content almost identically than how it will actually appear on the site.