Installing and Using CKEditor in Drupal 7

Installing and Using CKEditor in Drupal 7 esembrat3 Fri, 02/22/2013 - 10:52
Drupal Version
Tags

There are two parts to installing CKEditor for Drupal 7 (Drupal 8 comes with it already installed):

  1. The CKEditor Drupal module, which is placed in the sites/all/modules folder.
  2. The CKEditor library, which is placed INSIDE the sites/all/libraries folder.

After installing the module and library, enable the module and it should take effect immediately.

If you want to customize your CKEditor settings, look in the administrative configuration area under Content Authoring -> CKEditor.


Additional Resources for Using CKEditor in Drupal 7

Creating a True WYSIWYG Environment in CKEditor

Creating a True WYSIWYG Environment in CKEditor eh94 Thu, 09/11/2014 - 12:42
Drupal Version

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.

Adding Classes to the CKEditor Styles Dropdown List

Adding Classes to the CKEditor Styles Dropdown List afrank30 Thu, 01/23/2014 - 10:15
Drupal Version

If you want your editors to be able to easily apply your custom CSS classes via the Styles drop-down list in the GT Editor:

  1. Copy the js/ckeditor.styles.js file from the GT Theme (version 7.x-2.2 and above) into your subtheme folder.
  2. Add your own CSS styles to this file. The CKEditor documentation explains how this works.
  3. Go to Configuration -> Content authoring -> CKEditor
  4. Select the Edit link under the OPERATIONS row for the appropriate CKEditor profile (advanced, basic, etc.)
  5. Under the CSS accordion fieldset change the Predefined styles drop-down to "Use theme ckeditor.styles.js"
  6. Flush your browser's caches to get CKEditor to pick up the new file.  You'll need to flush your browser's caches each time you update this file.

If you'd rather not rely on users caches expiring or telling them to flush their caches, you can use another technique to specify your styles file:

  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 Predefined styles drop-down to "Define path to ckeditor.styles.js"
  4. Set the Predefined styles path to point to your custom styles file.  Add "?v=XXX" where XXX is some random value.  Change this value each time you make changes to your styles file.  This change will trigger web browsers to consider the file to be updated and to ignore the version held in the browser cache.

NOTE: If you implement a custom ckeditor.styles.js file,  you'll need to remember to integrate into this file any changes to the standard styles introduced by any newer version of the GT Theme.