Developers Guide

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.

CONFIGURATION

CONFIGURATION OVERVIEW

Numerous configuration options included in CKEditor enable the developer to customize the appearance, features and behavior of the editor accordingly to end user needs.

Main configuration file is called config.js and is placed in the root of the CKEditor installation directory. The default configuration of CKEditor can be overridden either by editing the main configuration file or by changing the settings in separate file.

Editing the main configuration file is not recommended as the customized configuration settings will be lost every time the CKEditor is updated to a newer version. Default custom configuration file is called ‘config.js’ and is placed in the root directory of CKEditor. If you want your settings to be stored in a different location, you need to point the CKeditor to use them. This is done by editing the main configuration file e.g. CKEDITOR.replace( 'myfiled', { customConfig : '/myconfig.js' } );

The above line will load myconfig.js configuration file. CKEditor recursively loads custom configuration files defined inside other custom configuration files.

In order to amend default settings of CKEditor, your custom configuration file needs to be edited to include required settings
e.g. config.defaultLanguage = 'de';

Custom configuration file does not need to contain all available settings, it is enough to include only the ones that you want to change.

NOTE: Do not delete nor move config.js file from _source\core directory!

 

CONFIGURATION OPTIONS

In this section configuration options and commands that need to be issued inside the custom configuration file are described.

No Custom Configuration File

To configure the editor not to load any custom configuration files, use the following setting:
CKEDITOR.config.customConfig = ;
All editor instances created after this command will not load custom configuration files.

baseHref

This setting is used to resolve relative and absolute URLs in the editor content:
config.baseHref = 'http://www.yourSite.com/path/';

contentsCss

This setting specifies the CSS file to be used to apply style to the contents:
config.contentsCss = '/css/mysitestyles.css';

Writing direction of the language

The default writing direction in CKEditor is Left-To-Right which is the most frequently used. To change this setting use the following command:
config.contentsLangDirection = 'rtl';

Default CKEditor language

Default language is used in case no language is set using config.language option and the editor is not able to use the user language.
In order to change default language use the following command:
config.defaultLanguage = 'it';

CKEditor language

This setting is used to set the CKEditor language. In case this option is not set, the editor will automatically try to load with user language if supported, otherwise the default language will be used. To set the language use the following command:
config.language = 'de';

EnterMode

This setting is used to change editor’s behavior when the ENTER key is pressed. By default pressing ENTER creates a new paragraph. In order to change it the following command needs to be used:
config.enterMode = CKEDITOR.ENTER_BR
The following values are accepted:

  • CKEDITOR.ENTER_P
  • CKEDITOR.ENTER_BR
  • CKEDITOR.ENTER_DIV

ShiftEnterMode

This setting is used to change editor’s behavior when the SHIFT + ENTER keys are pressed. By default pressing it creates new line. In order to change it the following command needs to be used:
config.shiftEnterMode = CKEDITOR.ENTER_P

The following values are accepted:

  • CKEDITOR.ENTER_P
  • CKEDITOR.ENTER_BR
  • CKEDITOR.ENTER_DIV

fullPage

This option is used to indicate whether the content of the edited area is a full web page or just its part. In order to change it use the following command:
config.fullPage = true;

DocType

This option sets the Document Type Declaration to be used in the edited area. To change this setting use the following command:
config.docType = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">';

toolbarLocation

This option sets the position of CKEditor toolbar ('top' by default). To change this setting use the following command:
config.toolbarLocation = 'bottom';

toolbar_Basic and toolbar_Full

These two features allow the developer to specify what options will be available on the toolbar for the end user. In order to change buttons on the toolbar use the following commands:
CKEDITOR.config.toolbar_Basic = [ [ 'Source', '-', 'Bold', 'Italic' ] ];
CKEDITOR.config.toolbar_Full = [
['Source','-','Save','NewPage','Preview','-','Templates'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['Link','Unlink','Anchor'],
'/',
['Styles','Format','Font','FontSize'],
];

The order of the buttons on the toolbar is determined by the order they appear in the above code. To divide the toolbar into sections, place all the functions for each section in separate square brackets []. To separate functions inside one section ‘-‘ sign should be used. To start a new line on the toolbar after chosen section ‘/’ sign should be used.

tabIndex

This option is used to specify how many “&nbsp” are inserted into HTML when TAB key is pressed and by default it is set to 0. To change editor’s behavior use the following command:
config.tabIndex = 1;

width and height

These two options are used to set the editor's width and height in CSS size format or in pixels. To change these settings use the following commands:
config.height = 220;

config.width = '100%';

skin

This option is used to specify the skin to be loaded. In order to change this setting use one of the following commands:

  1. for skins located inside ckeditor/_source/skins folder: config.skin = 'v2';
  2. for skins located elsewhere, provide its name and a path separated by a comma: config.skin = 'myskin,/customstuff/myskin/';

plugins

This option is used to specify the list of plugins to be loaded and initialized. In order to change the list of plugins to be loaded use the following command:
config.plugins = 'basicstyles,button,htmldataprocessor,toolbar,wysiwygarea';

Retrieved from "https://docs-old.ckeditor.com/index.php?title=Talk:CKEditor_3.x/Developers_Guide&oldid=2601"