Here you can select the editor toolbar skin, default settings, additional plugins to load, a custom toolbar button definition, or custom style, font, or format drop-down lists  for the CKEditor WYSIWYG editor.

There are two included Toolbar Skins available for the toolbar;

• "Kama", the default skin
• "Moono", the new monochrome skin
• Other toolbar skins are available here

The Autostart SpellCheck setting determines whether the "spell check as you type" is turned on by default.  You can turn this feature on or off while editing by using the toolbar button.

The Allow Formatted Pasting from MS Word setting determines if pasting formatted text directly from other sources like MS Word is allowed.  If turned off, the data is cleaned up before it's pasted into the editor via an intermediate dialog.

The Toolbar Button Configuration is a comma-separated list of button names inside single quotes.  It is separated into chunks by enclosing in brackets '[ ]' and forced new lines by using a slash '/'.  CKEditor Toolbar Docs

Here is the standard Exponent toolbar definition:  (double-click the code below to get the configuration selected and copied to the clipboard for pasting into the toolbar configuration editor)

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

Here is the full toolbar definition:

['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['BidiLtr', 'BidiRtl' ],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','-','About']

The Styles List determines how the Styles drop-down list is filled.  If empty or set to 'default', the ckeditor default list is used ('/external/editors/ckeditor/styles.js'.  If you want NO entries in the styles list, enter empty single quotes ''.  You may also enter a full url or path relative to the exponent root preceded by the style name and a colon, e.g., 'mystyles:http://www.example.com/editorstyles/styles.js'.  Finally, you may enter the style itself based on the CKeditor format (CKEditor Sytles Docs), e.g.,:

[
	{ name: 'Marker',		element: 'mark' },
	{ name: 'Big',			element: 'big' },
	{ name: 'Small',		element: 'small' },
	{ name: 'Typewriter',		element: 'tt' },
	{ name: 'Computer Code',	element: 'code' },
	{ name: 'Keyboard Phrase',	element: 'kbd' },
	{ name: 'Sample Text',		element: 'samp' },
	{ name: 'Variable',		element: 'var' },
	{ name: 'Deleted Text',		element: 'del' },
	{ name: 'Inserted Text',	element: 'ins' },
	{ name: 'Cited Work',		element: 'cite' },
	{ name: 'Inline Quotation',	element: 'q' },
	{
		name: 'Styled image (left)',
		element: 'img',
		attributes: { 'class': 'image-left' }
	},
	{
		name: 'Styled image (right)',
		element: 'img',
		attributes: { 'class': 'image-right' }
	},
	{
		name: 'Styled image (center)',
		element: 'img',
		attributes: { 'class': 'image-center' }
	},
	{
		name: 'Compact table',
		element: 'table',
		attributes: {
			cellpadding: '5',
			cellspacing: '0',
			border: '1',
			bordercolor: '#ccc'
		},
		styles: {
			'border-collapse': 'collapse'
		}
	},
	{ name: 'Borderless Table',	element: 'table', styles: { 'border-style': 'hidden', 'background-color': '#E6E6FA' } },
	{ name: 'Square Bulleted List',	element: 'ul',	  styles: { 'list-style-type': 'square' } }
]

The Format List is a semi-colon separated list of block tags to place in that drop-down list.  This configuration is included to reduce the list from the defaults.  Leaving this entry blank results in a default of

p;h1;h2;h3;h4;h5;h6;pre;address;div

The Font List is a semi-colon separated list of font names.  While it's possible to have more than one font for each entry, in the HTML way (separated by comma). A display name may be optionally defined by prefixing the entries with the name and the slash character.  If you load a font stylesheet, you might add that font name here.  Leaving this entry blank results in a default of

'Arial/Arial, Helvetica, sans-serif;' +
'Comic Sans MS/Comic Sans MS, cursive;' +
'Courier New/Courier New, Courier, monospace;' +
'Georgia/Georgia, serif;' +
'Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;' +
'Tahoma/Tahoma, Geneva, sans-serif;' +
'Times New Roman/Times New Roman, Times, serif;' +
'Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;' +
'Verdana/Verdana, Geneva, sans-serif'

The Load Custom Plugins is a comma-separated list of custom plugin names.  Exponent always loads the 'autosave', 'tableresize', 'quicktable', 'showborders', 'image2', and 'uploadimage' plugins (and removes the old 'image' plugin).  Since CKEditor is a flexible system, it can be enhanced by adding custom plugins, many of which are avaiable online.  For example, we use a 'syntax highlighter' plugin on this documentation site to assist in marking up the source code styling.  Most custom plugins also require a custom button be added to the toolbar.  To add a custom CKEditor plugin to Exponent:

1. Obtain the CKEditor custom plugin package
2. Extract the plugin into the 'external/editors/ckeditor/plugins' folder.  This should create a new folder with the plugin name.
3. Create (or edit) a custom ckedtor toolbar configuraton.
4. Add the custom plugin name to the 'Load Custom Plugins' box.  You may add multiple plugins by separating the plugin names with a comma.
5. Follow the plugin installation instructions and add a button to the 'Toolbar Button Configuration' box. (as described above)

The Additional Configuration allows a comma separated set of javascript objects to provide additional plugin configuration.  The list MUST end with a comma ','.  Incorrectly entering a value here could break the editor and the page!!

layoutmanager_buttonboxWidth : 58,