Creating a True WYSIWYG Environment in CKEditor [Drupal 7]

If you'd like the look and feel of your body text field to better mimic the look and feel of your site's theme when editing pages then you'll need to configure the CSS settings for the appropriate CKEditor profiles to use your theme's CSS.

1. Go to Configuration -> Content authoring -> CKEditor
2. Select the Edit link under the OPERATIONS row for the appropriate CKEditor profile (advanced, basic, etc.)
3. Under the CSS accordion fieldset change the Editor CSS drop-down to use "Define CSS"
4. In the CSS file path field you'll need to enter the path to the CSS file(s) of your theme. If you'd like it to use the CSS from the main GT theme, enter the following:

   /sites/all/themes/gt/css/reset.css?v=1,/sites/all/themes/gt/css/default.css?v=1,/sites/all/themes/gt/css/typography.css?v=1,/sites/all/themes/gt/css/editor.css?v=1

   Note the query string at the end of each CSS file listed (i.e., "?v=1") If you are experimenting with adding links to your own stylesheets and are finding your changes aren't showing up, just change the value in the query string, save the CKEditor settings, and next time you edit a page your changes will most likely show up. By changing the query string value you'll get CKEditor to reload the stylesheet.

See Adding Classes to the CKEditor Styles Dropdown List if you'd like to add new custom styles there as well.