Configuration Types

Embedded Configuration
Embedded configuration is recommended because upgrades to ckEditor will overwrite the default config.js file.
<p>
    <textarea id="editor1" name="editor1" cols="20"><?php echo file_get_contents("editor1.txt"); ?></textarea>
 
    <script type="text/javascript">
        CKEDITOR.replace('editor1', {
            toolbar : 'Basic',
            uiColor : '#9AB8F3',
            width : '850',
    </script>
</p>

External Configuration
Remember to insert the CKEDITOR.replace call after the <textarea> element.
<p>
    <textarea id="editor1" name="editor1" cols="20"><?php echo file_get_contents("editor1.txt"); ?></textarea>
 
    <script type="text/javascript">
        CKEDITOR.replace( 'editor1', { customConfig : 'myconfig.js' } );
    </script>
</p>

Translating External Configuration to Embedded Configuration
Use the examples below to translate configuration settings for the ckEditor JavaScript API:
// External Configuration:
config.skin = 'office2003';
 
// Translates To:
skin : 'office2003',

Toolbar Configuration

Default Setting
The following code snippet contains the default CKEditor toolbar setting:
config.toolbar_Full =
[
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
 
'HiddenField' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-
 
','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];

In-Page Toolbar Definition
CKEDITOR.replace( 'editor1',
{
toolbar :
[
{ name: 'basicstyles', items : [ 'Bold','Italic' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList' ] },
{ name: 'tools', items : [ 'Maximize','-','About' ] }
] });

Jerry's Custom Configuration
The following embedded configuration creates a custom toolbar and offers formats based on automatically parsing an external css file.
<script type="text/javascript">
 
CKEDITOR.replace('editor1', {
 
// user interface color
uiColor : '#9AB8F3',
 
// css parser plugin
extraPlugins : 'stylesheetparser',
contentsCss : '../shared/wysiwyg_config_styles.css',
stylesSet : [],
 
// toolbar buttons and groups
toolbar :
[
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'BulletedList','NumberedList','-','Outdent','Indent','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','-','Undo','Redo' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'tools', items : [ 'ShowBlocks','Maximize' ] },
'/',
{ name: 'styles', items : [ 'Format','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'insert', items : [ 'Image','Table','HorizontalRule','SpecialChar' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
{ name: 'document', items : [ 'Templates','-','Preview','Print','-','Save','-','Source' ] },
],
 
// SCAYT on by default (Spell Check As You Type)
scayt_autoStartup : 'true',
 
// editor width and height
width : '725',
height : '550',
});
 
</script>

Stylesheet Parser Plugin

The stylesheet parser plugin automatically populates the styles drop-down list in ckEditor with the style definitions from an external CSS stylesheet file. Here are several options to customize the configuration. More info here: http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles#Stylesheet_Parser_Plugin

Basic Configuration

Activate
Activate the stylesheetparser plugin:
config.extraPlugins = 'stylesheetparser';

Location
Supply the location of the CSS file that contains your style definitions:
config.contentsCss = '../../shared/styles.css';

Skip Defaults
Skip loading default editor styles:
config.stylesSet = [];

Custom Selecting Styles

Choose the Desired CSS Selectors
The example below only adds rules for <p> and <span> elements using a regular expression.
config.stylesheetParser_validSelectors = /^(p|span).w+/;

Limiting the CSS Selectors
Ignore rules for <body> and <caption> elements, classes starting with "high", and any class defined for no specific element.
config.stylesheetParser_skipSelectors = /(^body.|^caption.|.high|^.)/i;

Helpful URL's