CK Editor

From Dan: file upload capabilities, and thought that I would pay $59 for the CKFinder file browser. But I had a lot of trouble getting it to work, and in searching for solutions to my difficulties, came across others with the same difficulties who solved them by using "KCFinder"

Double Quotes Bug:  They turn into "\" in CKeditor. This is caused by PHP. See Drupal Installing

Installation:

  1. Do not install the Drupal's WysiWig module, only the Drupal ckEditor Module.
  2. Install the ckEditor drupal modual using the drupal modual installer (http://drupal.org/project/ckeditor), and read the README file.
  3. Put the files from http://ckeditor.com/download in all    /sites/all/libraries/ckeditor/
  4. Modify Toolbars for Filtered and Full HTML: ( http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar )
    1. Configuration > CKEditor > edit > Editor Appearance 
    2. Add:  ['DrupalPageBreak']  (the Drupal Teaser Break is already there.)
    3. Add:  ['mediaembed','IMCE'] (since the Plugins / IMCE check box does not seem to work.)
    4. Add:  Styles:   ['Styles','Format','Font','FontSize'],
  5. Other configurations:
    1. Configuration > CKEditor > edit > Advanced Options
    2. Spell checker is turned off (good--it times out in 30 days) (this might be due to the ABC SCAYT button in the toolbar. 
    3. Now at this " CKEDITOR.config.disableNativeSpellChecker = false; " to the bottom of   modules/ckeditor/ckeditor.config.js
    4. Some JS configuration and info about ckeditor.config.js is here.
  6. Add 'DrupalPageBreak'  and 'DrupalBreak' if missing.   Configure > CKEditor > Appearance > edit.  But DrupalPageBreak Need Paging module, which is not in 7 yet (maybe silly).
  7. Uncomment 2 pair of lines at bottom of ckeditor/ckeditor.config.js   for  mediaembed and IMCE. Then  Configure > CKEditor > Appearance > edit  ['mediaembed','IMCE']

Customizing:

  • sites/all/modules/ckeditor/ckeditor.styles.js
    • This file defines custom styles used with drop-down styles button while editing.
  • sites/all/modules/ckeditor/ckeditor.config.js
    • This file defines classes and styles that will be used in the CKEdidtor window to make it more wysiwig.
    • E.g. define CK style "DateLine" to apply class "dateline." Then define class .dateline in (1) themes/zframe/style.css and in (2) ckeditor.config.js
    • #1 styles the date for drupal users and #2 styles it the same in the CK editor window.
  • Alternative:  instead of modules/ckeditor/ckeditor.config.js, use  libraries/ckeditor/contents.css
    • I used this instead because I can cut and paste into it without any modification.
  •  
  • Paragraphs fully justified
  • Titles not indented

Full Toolbar:

 

[
    ['Source'],
    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','SpellChecker', 'Scayt'],
    ['Undo','Redo','Find','Replace','-','SelectAll','RemoveFormat'],
    ['Image','Media','Flash','Table','HorizontalRule','Smiley','SpecialChar'],
    '/',
    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    ['DrupalPageBreak'],
    ['mediaembed','IMCE'],
    ['Link','Unlink','Anchor'],
    ['DrupalBreak'],
    '/',
    ['Styles','Format','Font','FontSize'],
    ['TextColor','BGColor'],
    ['Maximize', 'ShowBlocks']
]