Topics

CKEditor Toolbar Configuration

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

  • "Kama", the default skin
  • "Moono", the new monochrome skin

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 from other sources like MS Word is allowed.  If turned on, the data is cleaned up before it's pasted into the editor.

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/plugins/styles/styles/default.js'.  If you want NO entries in the styles list, enter empty single quotes ''.  If another name is entered, that file is loaded from the default folder, e.g., 'mystyles' loads ('/external/editors/ckeditor/plugins/styles/styles/mystyles.js'.  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 : 'Strong Emphasis', element : 'strong' },
  { name : 'Emphasis', element : 'em' } 
]

The Paragraph Format List is a semi-colon separated list of block tags to place in that drop-down list.  Any formatting that can be parsed from the editor' theme style sheet (ckeditor.css, etc..)  will also be added to this list.  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 sseparated 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

'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 'sytelsheetpartser', 'autogrow', and 'tableresize' plugins.  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 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)
Loading Help

Parent Help Topic

WYSIWYG Editor Settings

This setting selects and configures the What You See Is What You Get (WYSIWYG) editor used to edit content on the web site.  It also allows customization of the editor 'skin', buttons, and other options.  Currently, CKEditor and TinyMCE are the available editors.

...