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 three included Toolbar Skins available for the toolbar;

• "Kama", the default skin
• "Moono", the monochrome skin
• "Moono-Lisa", the minimalist 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 javascript set of arrays containing comma-separated list of button name strings inside single quotes.  It is separated into array chunks by enclosing in brackets '[ ]' with spacers using a dash '-' 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','CopyFormatting','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:

[
    { name: 'document', items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
    { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
    { name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
    { name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
    '/',
    { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ] },
    { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
    { 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' ] },
    { name: 'about', items: [ '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 within single quotes, e.g., 'mystyles:http://www.example.com/editorstyles/styles.js'.  Finally, you may enter the style itself as a javascript array of javascript objects 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' },

 /* Object styles */

 {
  name: 'Styled image (left)',
  type: 'widget',
  widget: 'image',
  attributes: { 'class': 'image-left' }
 },

 {
  name: 'Styled image (right)',
  type: 'widget',
  widget: 'image',
  attributes: { 'class': 'image-right' }
 },

 {
  name: 'Styled image (center)',
  type: 'widget',
  widget: 'image',
  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' } },

 /* Widget styles */

 { name: 'Clean Image', type: 'widget', widget: 'image', attributes: { 'class': 'image-clean' } },
 { name: 'Grayscale Image', type: 'widget', widget: 'image', attributes: { 'class': 'image-grayscale' } },

 { name: 'Featured Snippet', type: 'widget', widget: 'codeSnippet', attributes: { 'class': 'code-featured' } },

 { name: 'Featured Formula', type: 'widget', widget: 'mathjax', attributes: { 'class': 'math-featured' } },

 { name: '240p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-240p' } },
 { name: '360p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-360p' } },
 { name: '480p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-480p' } },
 { name: '720p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-720p' } },
 { name: '1080p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-1080p' } },

 // Adding space after the style name is an intended workaround. For now, there
 // is no option to create two styles with the same name for different widget types. See #16664.
 { name: '240p ', type: 'widget', widget: 'embed', attributes: { 'class': 'embed-240p' } },
 { name: '360p ', type: 'widget', widget: 'embed', attributes: { 'class': 'embed-360p' } },
 { name: '480p ', type: 'widget', widget: 'embed', attributes: { 'class': 'embed-480p' } },
 { name: '720p ', type: 'widget', widget: 'embed', attributes: { 'class': 'embed-720p' } },
 { name: '1080p ', type: 'widget', widget: 'embed', attributes: { 'class': 'embed-1080p' } }
]

The Format List is a javascript string in single quotes of 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 javascript string in single quotes of 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 javascript string in single quotes of 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.  This entry is NOT a javascript string and MUST NOT be enclosed in single quotes. The list MUST also end with a comma ','.  Incorrectly entering a value here could break the editor and the page!!

layoutmanager_buttonboxWidth : 58,