Wiktor: /* Custom config */ Fixed typo

2011-11-02T09:22:49Z

‎Custom config: Fixed typo

Anna: Template added after proof-reading

2010-11-25T12:58:13Z

Template added after proof-reading

New page

{{#CUSTOMTITLE:CKEditor Settings Explained}}
__TOC__
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 [http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar Toolbar] section of [http://docs.cksource.com/CKEditor_3.x/Developers_Guide CKEditor Developer's Guide].

<ins>Important note:</ins>

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 [http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar Toolbar] section of [http://docs.cksource.com/CKEditor_3.x/Developers_Guide CKEditor Developer's Guide].

<ins>Important note:</ins>

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 [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.contentsCss <code>contentsCss</code>] setting.

<ins>Default value:</ins>

<code>/_layouts/ckeditor/contents.css</code>

<ins>Important note:</ins>

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 [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.extraPlugins <code>extraPlugins</code>] setting.

<ins>Important note:</ins>

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 (<code>/</code>) character. For example, <code>Arial/Arial, Helvetica, sans-serif</code> will be displayed as '''Arial''' in the list, but will be output as <code>Arial, Helvetica, sans-serif</code> in the source code. 
Corresponds to the [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.font_names <code>font_names</code>] setting.

<ins>Important note:</ins>

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 (<code><nowiki>;</nowiki></code>). Any kind of CSS-accepted units can be used, including pixels (<code>px</code>), ems (<code>em</code>), percent (<code>%</code>), or named values (<code>larger</code>, <code>x-small</code>). 
A display name may optionally be defined by prefixing the entries with the name and a slash (<code>/</code>) character. For example, <code>Bigger Font/14px</code> will be displayed as '''Bigger Font''' in the list, but will be output as <code>14px</code> in the source code. 
Corresponds to the [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.fontSize_sizes <code>fontSize_sizes</code>] setting. 

<ins>Default value:</ins>

<code>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</code>

<ins>Important note:</ins>

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 [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.format_tags <code>format_tags</code>] setting. 

<ins>Default value:</ins>

<code>p;h1;h2;h3;h4;h5;h6;pre;address;div</code>

<ins>Important note:</ins>

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 <code>div</code> container. Corresponds to the [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.stylesSet <code>stylesSet</code>] setting. 

<ins>Default value:</ins>

<code>/_layouts/ckeditor/plugins/styles/styles/default.js</code>

<ins>Important note:</ins>

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 [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.forcePasteAsPlainText <code>forcePasteAsPlainText</code>] setting.

<ins>Default value:</ins>

<code>false</code>

<ins>Important note:</ins>

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.

<ins>Default value:</ins>

<code><nowiki>#D6D3D6</nowiki></code>

===Skin===

The editor skin to load. Corresponds to the [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.skin <code>skin</code>] setting.

<ins>Default value:</ins>

<code>kama</code>

===Template files===

The template definition file to load. Corresponds to the [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.templates_files <code>templates_files</code>] setting.

<ins>Default value:</ins>

<code>/_layouts/ckeditor/plugins/templates/templates/default.js</code>

<ins>Important note:</ins>

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 [http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Setting_Configurations Setting Configurations] section of [http://docs.cksource.com/CKEditor_3.x/Developers_Guide CKEditor Developer's Guide].

<ins>Example:</ins>

<source lang="javascript">if (type == 'enhancedRTE')
{
config.language = 'en';
config.fontSize_sizes = '16/16px;24/24px;48/48px;';
}
if (type == 'RTE')
{
config.languege = 'de';
}
config.skin = 'kama';
config.uiColor = 'blue';</source>

<ins>Important note:</ins>

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

@@ Line 147: / Line 147: @@
 if (type == 'RTE')
+{
-    config.languege = 'de';
+    config.language = 'de';
+}
 config.skin = 'kama';

Template:SharePoint CKEditor Settings - Revision history

Wiktor: /* Custom config */ Fixed typo

Anna: Template added after proof-reading