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 TinyMCE WYSIWYG editor.

There are two shipped Toolbar Skins available for the toolbar;

• "Lightgray", the default monochrome skin
• "Xenmce", is a colorful skin similar to CKEditor's Kama skin

The Disable Browser SpellCheck setting determines whether the web browsers built-in "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 Toolbar Button Configuration is a space-separated list of button names which is separated into chunks by a vertical bar  '|'.  Unlike the CKEditor configuration, we add all the custom plugins to the end of the toolbar definition since that is how they are added to the interface.  TinyMCE Toolbar Docs

Here is the basic 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)

bold italic underline removeformat | bullist numlist | link unlink localautosave

Here is the full toolbar definition:

undo redo localautosave | styleselect formatselect fontselect fontsizeselect | cut copy paste | bold italic underline removeformat | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent
link unlink image quickupload | print preview visualblocks fullscreen code media | forecolor backcolor emoticons

The Formats List determines how the Formats drop-down list is filled.  If empty or set to the below,  Or, you may enter the styles themselves based on the TinyMCE format (TinyMCE Styles Docs), e.g.,:

{title: 'Inline', items: [
    {title: 'Strikethrough', inline: 'span', styles : {textDecoration : 'line-through'}, icon: 'strikethrough'},
    {title: 'Superscript', inline: 'sup', icon: 'superscript'},
    {title: 'Subscript', inline: 'sub', icon: 'subscript'},
    {title: 'Marker',   inline: 'mark'},
    {title: 'Big',    inline: 'big'},
    {title: 'Small',   inline: 'small'},
    {title: 'Typewriter',  inline: 'tt'},
    {title: 'Computer Code', inline: 'code', icon: 'code'},
    {title: 'Keyboard Phrase', inline: 'kbd'},
    {title: 'Sample Text',  inline: 'samp'},
    {title: 'Variable',  inline: 'var'},
    {title: 'Deleted Text', inline: 'del'},
    {title: 'Inserted Text', inline: 'ins'},
    {title: 'Cited Work',  inline: 'cite'},
    {title: 'Inline Quotation', inline: 'q'},

]},
{title: 'Containers', items: [
    {title: 'section', block: 'section', wrapper: true, merge_siblings: false},
    {title: 'article', block: 'article', wrapper: true, merge_siblings: false},
    {title: 'blockquote', block: 'blockquote', wrapper: true},
    {title: 'hgroup', block: 'hgroup', wrapper: true},
    {title: 'aside', block: 'aside', wrapper: true},
    {title: 'figure', block: 'figure', wrapper: true}
]},
{title: 'Images', items: [
    {title: 'Styled image (left)',
        selector: 'img',
        classes: 'img-left'
    },
    {title: 'Styled image (right)',
        selector: 'img',
        classes: 'img-right'
    },
    {title: 'Styled image (center)',
        selector: 'img',
        classes: 'img-center'
    },
]},

The Paragraph List is a javascript string in single quotes of a semi-colon separated list of block tags and their name to place in that drop-down list.  Leaving this entry blank results in a default of

'Normal=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Formatted=pre;Address=address;Normal (DIV)=div'

The Font Family 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.  Leaving this entry blank results in a default of

'Andale Mono=andale mono,times;' +
'Arial=arial,helvetica,sans-serif;' +
'Arial Black=arial black,avant garde; '+
'Book Antiqua=book antiqua,palatino;' + 
'Comic Sans MS=comic sans ms,sans-serif;' +
'Courier New=courier new,courier;' +
'Georgia=georgia,palatino;' +
'Helvetica=helvetica; '+
'Impact=impact,chicago;' +
'Symbol=symbol;' +
'Tahoma=tahoma,arial,helvetica,sans-serif;' + 
'Terminal=terminal,monaco;' +
'Times New Roman=times new roman,times; '+
'Trebuchet MS=trebuchet ms,geneva;' +
'Verdana=verdana,geneva;' +
'Webdings=webdings;' +
'Wingdings=wingdings,zapf dingbats'

The Load Custom Plugins is a comma-separated list of custom plugin names.  Exponent by default loads the following plugins which are NOT automatically loaded in a custom plugin configuration unless added to the plugin list

advlist,autolink,lists,link,image,imagetools,charmap,print,preview,hr,anchor,pagebreak,searchreplace,wordcount,visualblocks,visualchars,code,fullscreen,media,nonbreaking,save,table,contextmenu,directionality,emoticons,paste,textcolor,quickupload,localautosave

Since TinyMCE is a flexible system, it can be enhanced by adding (additional) custom plugins, many of which are available online.  For example, we use a 'syntax highlighter' plugin (sh4tinymce) on this 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 TinyMCE plugin to Exponent:

1. Obtain the TinyMCE custom plugin package
2. Extract the plugin into the 'external/editors/tinymce/plugins' folder.  This should create a new folder with the plugin name.
3. Create (or edit) a custom ckedtor toolbar configuration.
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,