CKEditor Settings Explained

This website contains links to software which is either no longer maintained or will be supported only until the end of 2019 (CKFinder 2). For the latest documentation about current CKSource projects, including software like CKEditor 4/CKEditor 5, CKFinder 3, Cloud Services, Letters, Accessibility Checker, please visit the new documentation website.

If you look for an information about very old versions of CKEditor, FCKeditor and CKFinder check also the CKEditor forum, which was closed in 2015. If not, please head to StackOverflow for support.

(Template added after proof-reading)
 
(Custom config: Fixed typo)
 
Line 147: Line 147:
 
if (type == 'RTE')
 
if (type == 'RTE')
 
{
 
{
   config.languege = 'de';
+
   config.language = 'de';
 
}
 
}
 
config.skin = 'kama';
 
config.skin = 'kama';

Latest revision as of 10:22, 2 November 2011

CKEditor is highly customizable which means that it can be tailored to the needs of a specific site collection or site it is added to. Below is an overview of all CKEditor for SharePoint configuration options.

Toolbar (enhanced rich text field)

The definition of CKEditor toolbar (also known as toolbox) for the enhanced rich text field.
This parameter is in fact an array of toolbars (strips), each one an array itself, containing a list of UI items available in CKEditor. If an editor button or a drop-down list is to be visible on the site, it has to be added to this array.

For more information on toolbar configuration refer to the Toolbar section of CKEditor Developer's Guide.

Important note:

This setting only pertains to the Multiple lines of text field with Enhanced rich text formatting as well as the CKEditor Web Part.

Toolbar (rich text field)

The definition of CKEditor toolbar (also known as toolbox) for the rich text field.
This parameter is in fact an array of toolbars (strips), each one an array itself, containing a list of UI items available in CKEditor. If an editor button or a drop-down list is to be visible on the site, it has to be added to this array.

For more information on toolbar configuration refer to the Toolbar section of CKEditor Developer's Guide.

Important note:

This setting only pertains to the Multiple lines of text field with Rich text formatting.

Contents CSS

The CSS file(s) to be used in order to apply style to the contents. It should reflect the CSS styling used in the pages where the content is to be used.
Corresponds to the contentsCss setting.

Default value:

/_layouts/ckeditor/contents.css

Important note:

This setting only pertains to the Multiple lines of text field with Enhanced rich text formatting as well as the CKEditor Web Part.

Extra plugins

List of additional plugins to be loaded.
Corresponds to the extraPlugins setting.

Important note:

This setting only pertains to the Multiple lines of text field with Enhanced rich text formatting as well as the CKEditor Web Part.

Fonts

The list of font names to be displayed in the Font drop-down list of the editor toolbar.
A display name may optionally be defined by prefixing the entries with the name and a slash (/) character. For example, Arial/Arial, Helvetica, sans-serif will be displayed as Arial in the list, but will be output as Arial, Helvetica, sans-serif in the source code.
Corresponds to the font_names setting.

Important note:

This setting only pertains to the Multiple lines of text field with Enhanced rich text formatting as well as the CKEditor Web Part.

Font sizes

The list of font sizes to be displayed in the Font Size drop-down list of the editor toolbar. Entries are separated by semi-colons (;). Any kind of CSS-accepted units can be used, including pixels (px), ems (em), percent (%), or named values (larger, x-small).
A display name may optionally be defined by prefixing the entries with the name and a slash (/) character. For example, Bigger Font/14px will be displayed as Bigger Font in the list, but will be output as 14px in the source code.
Corresponds to the fontSize_sizes setting.

Default value:

8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px

Important note:

This setting only pertains to the Multiple lines of text field with Enhanced rich text formatting as well as the CKEditor Web Part.

Formats

A list of semi-colon separated style names (by default: tags) representing the style definition for each entry to be displayed in the Format drop-down list of the editor toolbar.
Corresponds to the format_tags setting.

Default value:

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

Important note:

This setting only pertains to the Multiple lines of text field with Enhanced rich text formatting as well as the CKEditor Web Part.

Styles

The styles definition set to be used in the editor. The styles will be used in the Styles drop-down list and the Style selector of the div container.
Corresponds to the stylesSet setting.

Default value:

/_layouts/ckeditor/plugins/styles/styles/default.js

Important note:

This setting only pertains to the Multiple lines of text field with Enhanced rich text formatting as well as the CKEditor Web Part.

Force Paste as Plain Text

This setting specifies whether to force all pasting operations to insert plain text into the editor, losing any formatting information possibly available in the source text.
Corresponds to the forcePasteAsPlainText setting.

Default value:

false

Important note:

This setting only pertains to the Multiple lines of text field with Enhanced rich text formatting as well as the CKEditor Web Part.

UI Color

Defines the color of the "Kama" skin and thus only works with the "Kama" skin.

Default value:

#D6D3D6

Skin

The editor skin to load.
Corresponds to the skin setting.

Default value:

kama

Template files

The template definition file to load.
Corresponds to the templates_files setting.

Default value:

/_layouts/ckeditor/plugins/templates/templates/default.js

Important note:

This setting only pertains to the Multiple lines of text field with Enhanced rich text formatting as well as the CKEditor Web Part.

Custom config

The area where you can define your own configuration that is not limited to the settings above. For more information on how to set custom configuration refer to Setting Configurations section of CKEditor Developer's Guide.

Example:

if (type == 'enhancedRTE')
{
   config.language = 'en';
   config.fontSize_sizes = '16/16px;24/24px;48/48px;';
}
if (type == 'RTE')
{
   config.language = 'de';
}
config.skin = 'kama';
config.uiColor = 'blue';

Important note:

The enhancedRTE type pertains to the Multiple lines of text field with Enhanced rich text formatting as well as the CKEditor Web Part.
The RTE type pertains to the Multiple lines of text field with formatting limited to Rich text.

This page was last edited on 2 November 2011, at 10:22.