EditorConfig (core/editor)

@ckeditor/ckeditor5-core/src/editor/editorconfig

interface

CKEditor configuration options.

An object defining the editor configuration can be passed when initializing the editor:

EditorClass
	.create( {
		toolbar: [ 'bold', 'italic' ],
		image: {
			styles: [
				...
			]
		}
	} )
	.then( ... )
	.catch( ... );

Check the Configuration guide for more information about setting configuration options.

Filtering

Public
Inherited
Mixed
Protected
Private
Deprecated

Properties

alignment : AlignmentConfig

The configuration of the alignment feature.

See source

Read more in AlignmentConfig.
autosave : AutosaveConfig

The configuration of the autosave feature.

See source

Read more in AutosaveConfig.
balloonToolbar : Array.<String> | Object
Contextual toolbar configuration. Used by the BalloonToolbar feature.

See source
Configuring toolbar items
```
const config = {
	balloonToolbar: [ 'bold', 'italic', 'undo', 'redo' ]
};
```
You can also use '|' to create a separator between groups of items:
```
const config = {
	balloonToolbar: [ 'bold', 'italic', | 'undo', 'redo' ]
};
```
Read also about configuring the main editor toolbar in toolbar.

Configuring items grouping

You can prevent automatic items grouping by setting the shouldNotGroupWhenFull option:
```
const config = {
	balloonToolbar: {
		items: [ 'bold', 'italic', 'undo', 'redo' ],
		shouldNotGroupWhenFull: true
	},
};
```
blockToolbar : Array.<String> | Object
The block toolbar configuration. Used by the BlockToolbar feature.

See source
```
const config = {
	blockToolbar: [ 'paragraph', 'heading1', 'heading2', 'bulletedList', 'numberedList' ]
};
```
You can also use '|' to create a separator between groups of items:
```
const config = {
	blockToolbar: [ 'paragraph', 'heading1', 'heading2', '|', 'bulletedList', 'numberedList' ]
};
```
Configuring items grouping

You can prevent automatic items grouping by setting the shouldNotGroupWhenFull option:
```
const config = {
	blockToolbar: {
		items: [ 'paragraph', 'heading1', 'heading2', '|', 'bulletedList', 'numberedList' ],
		shouldNotGroupWhenFull: true
	},
};
```
Read more about configuring the main editor toolbar in toolbar.
ckfinder : CKFinderConfig

The configuration of the CKFinder feature.

See source

Read more in CKFinderConfig.
cloudServices : CloudServicesConfig

The configuration of CKEditor Cloud Services. Introduced by the CloudServices plugin.

See source

Read more in CloudServicesConfig.
codeBlock : CodeBlockConfig

The configuration of the CodeBlock feature.

See source

Read more in CodeBlockConfig.
collaboration : RealTimeCollaborationConfig

The configuration of the collaboration features. Introduced by the RealTimeCollaborativeEditing feature.

Read more in RealTimeCollaborationConfig.
comments : CommentsConfig

The configuration of the comments feature. Introduced by the Comments feature.

Read more in CommentsConfig.
commentsOnly : Boolean
Enables comments-only mode when the editor initializes.
```
ClassicEditor
	.create( {
		commentsOnly: true
	} )
	.then( ... )
	.catch( ... );
```
exportPdf : ExportPdfConfig

The configuration of the export to PDF feature. It is used by the PDF export features from the @ckeditor/ckeditor5-export-pdf package.

Read more in ExportPdfConfig.
exportWord : ExportWordConfig

The configuration of the export to Word feature. It is used by the Word export feature from the @ckeditor/ckeditor5-export-word package.

Read more in ExportWordConfig.
extraPlugins : Array.<Function>
The list of additional plugins to load along those already available in the editor build. It extends the plugins configuration.

See source
```
function MyPlugin( editor ) {
	// ...
}

const config = {
	extraPlugins: [ MyPlugin ]
};
```
Note: This configuration works only for simple plugins which utilize the plugin interface and have no dependencies. To extend a build with complex features, create a custom build.

Note: Make sure you include the new features in you toolbar configuration. Learn more about the toolbar setup.
fontBackgroundColor : FontBackgroundColorConfig

The configuration of the font background color feature. It is introduced by the FontBackgroundColorEditing feature.

See source

Read more in FontBackgroundColorConfig.
fontColor : FontColorConfig

The configuration of the font color feature. It is introduced by the FontColorEditing feature.

See source

Read more in FontColorConfig.
fontFamily : FontFamilyConfig

The configuration of the font family feature. It is introduced by the FontFamilyEditing feature.

See source

Read more in FontFamilyConfig.
fontSize : FontSizeConfig

The configuration of the font size feature. It is introduced by the FontSizeEditing feature.

See source

Read more in FontSizeConfig.
heading : HeadingConfig

The configuration of the heading feature. Introduced by the HeadingEditing feature.

See source

Read more in HeadingConfig.
highlight : HighlightConfig

The configuration of the Highlight feature.

See source

Read more in HighlightConfig.
htmlSupport : GeneralHtmlSupportConfig

The configuration of the General HTML Support feature. Introduced by the GeneralHtmlSupport feature.

See source

Read more in GeneralHtmlSupportConfig.
image : ImageConfig

The configuration of the image features. Used by the image features in the @ckeditor/ckeditor5-image package.

See source

Read more in ImageConfig.
indentBlock : IndentBlockConfig

The configuration of the block indentation feature.

See source

Read more in IndentBlockConfig.
initialData : String
The initial editor data to be used instead of the provided element's HTML content.

See source
```
ClassicEditor
	.create( document.querySelector( '#editor' ), {
		initialData: '<h2>Initial data</h2><p>Foo bar.</p>'
	} )
	.then( ... )
	.catch( ... );
```
By default, the editor is initialized with the content of the element on which this editor is initialized. This configuration option lets you override this behavior and pass different initial data. It is especially useful if it is difficult for your integration to put the data inside the HTML element.

See also Editor.create().

Note: If initial data is passed to Editor.create() in the first parameter (instead of a DOM element), and, at the same time, config.initialData is set, an error will be thrown as those two options exclude themselves.

If config.initialData is not set when the editor is initialized, the data received in Editor.create() call will be used to set config.initialData. As a result, initialData is always set in the editor's config and plugins can read and/or modify it during initialization.
language : String | LanguageConfig
The language of the editor UI and its content.

See source
Note: You do not have to specify this option if your build is optimized for one UI language or if it is the default language (English is the default language for CDN builds), unless you want to change the language of your content.

Simple usage (change the language of the UI and the content):
```
ClassicEditor
	.create( document.querySelector( '#editor' ), {
		// The UI of the editor as well as its content will be in German.
		language: 'de'
	} )
	.then( editor => {
		console.log( editor );
	} )
	.catch( error => {
		console.error( error );
	} );
```
Use different languages for the UI and the content using the configuration syntax:
```
	ClassicEditor
		.create( document.querySelector( '#editor' ), {
			language: {
 				// The UI will be in English.
				ui: 'en',

				// But the content will be edited in Arabic.
				content: 'ar'
			}
		} )
		.then( editor => {
			console.log( editor );
		} )
		.catch( error => {
			console.error( error );
		} );
```
The language of the content has an impact on the editing experience, for instance it affects screen readers and spell checkers. It is also particularly useful for typing in certain languages (e.g. right–to–left ones) because it changes the default alignment of the text.

The language codes are defined in the ISO 639-1 standard.

You need to add the corresponding translation file for the new UI language to work. Translation files are available on CDN for predefined builds:
```
`<script src="https://cdn.ckeditor.com/ckeditor5/[version.number]/[distribution]/lang/[lang].js"></script>`
```
But you can add them manually by coping from the node_modules/@ckeditor/ckeditor5-build-[name]/build/lang/[lang].js'.

Check the UI language guide for more information about the localization options and translation process.
licenseKey : String

The license key for the CKEditor 5 premium features.

If you do not have a key yet, please contact us or order a trial.
link : LinkConfig

The configuration of the Link feature.

See source

Read more in LinkConfig.
list : ListConfig

The configuration of the List feature and the DocumentList feature.

See source

Read more in ListConfig.
locale : LocaleConfig

The editor localization configuration.

For setting the editor language see editor.config.language.
mediaEmbed : MediaEmbedConfig

The configuration of the MediaEmbed feature.

See source

Read more in MediaEmbedConfig.
mention : MentionConfig

The configuration of the Mention feature.

See source

Read more in MentionConfig.
minimap : MinimapConfig

The configuration of the minimap feature. Introduced by the Minimap feature.

See source

Read more in MinimapConfig.
pagination : PaginationConfig

The configuration of the pagination feature. It is used by the pagination feature from the @ckeditor/ckeditor5-pagination package.

Read more in PaginationConfig.
placeholder : String
Specifies the text displayed in the editor when there is no content (editor is empty). It is intended to help users locate the editor in the application (form) and prompt them to input the content. Work similarly as to the native DOM placeholder attribute used by inputs.

See source
```
const config = {
	placeholder: 'Type some text...'
};
```
The placeholder text is displayed as a pseudo–element of an empty paragraph in the editor content. The paragraph has the .ck-placeholder CSS class and the data-placeholder attribute.
```
<p data-placeholder="Type some text..." class="ck-placeholder">
	::before
</p>
```
Note: Placeholder text can also be set using the placeholder attribute if a <textarea> is passed to the create() method, e.g. ClassicEditor.create().

Note: This configuration has precedence over the value of the placeholder attribute of a <textarea> element passed to the create() method.

See the "Editor placeholder" guide for more information and live examples.
plugins : Array.<(String | Function)>
The list of plugins to load.

See source
If you use an editor build you can define the list of plugins to load using the names of plugins that are available:
```
const config = {
	plugins: [ 'Bold', 'Italic', 'Typing', 'Enter', ... ]
};
```
You can check the list of plugins available in a build using this snippet:
```
ClassicEditor.builtinPlugins.map( plugin => plugin.pluginName );
```
If you use an editor creator directly (imported from a package like @ckeditor/ckeditor5-editor-classic) or you want to load additional plugins which were not included in a build you use, then you need to specify the plugins using their constructors:
```
// A preset of plugins is a plugin as well.
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
// The bold plugin.
import Bold from '@ckeditor/ckeditor5-editor-basic-styles/src/bold';

const config = {
	plugins: [ Essentials, Bold ]
};
```
Note: To load additional plugins, you should use the extraPlugins configuration. To narrow the list of loaded plugins, use the removePlugins configuration.
removePlugins : Array.<(String | Function)>
The list of plugins which should not be loaded despite being available in an editor build.

See source
```
const config = {
	removePlugins: [ 'Bold', 'Italic' ]
};
```
Note: Be careful when removing plugins using config.removePlugins from CKEditor builds. If removed plugins were providing toolbar buttons, the default toolbar configuration included in a build will become invalid. In such case you need to provide the updated toolbar configuration.
restrictedEditing : RestrictedEditingModeConfig

The configuration of the restricted editing mode feature. Introduced by the RestrictedEditingMode feature.

See source

Read more in RestrictedEditingModeConfig.
revisionHistory : RevisionHistoryConfig

The configuration of the revision history feature. Introduced by the RevisionHistory feature.
sidebar : SidebarConfig

The configuration of the sidebar feature. Introduced by the Sidebar feature.

Read more in SidebarConfig.
simpleUpload : SimpleUploadConfig

The configuration of the simple upload adapter.

See source

Read more in SimpleUploadConfig.
style : StyleConfig

The configuration of the Style feature.

See source

Read more in StyleConfig.
table : TableConfig

The configuration of the Table feature.

See source

Read more in TableConfig.
title : TitleConfig

The configuration of the title feature.

See source

Read more in TitleConfig.
toolbar : Array.<String> | Object
The editor toolbar configuration.

See source
Simple format (specifies only toolbar items):
```
const config = {
	toolbar: [ 'bold', 'italic', '|', 'undo', 'redo' ]
};
```
Extended format:
```
const config = {
	toolbar: {
		items: [ 'bold', 'italic', '|', 'undo', 'redo', '-', 'numberedList', 'bulletedList' ],

		shouldNotGroupWhenFull: true
	}
};
```
Options which can be set using the extended format:
- toolbar.items – An array of toolbar item names. The components (buttons, dropdowns, etc.) which can be used as toolbar items are defined in editor.ui.componentFactory and can be listed using the following snippet:
```
Array.from( editor.ui.componentFactory.names() );
```
  You can also use '|' to create a separator between groups of items:
```
toolbar: [ 'bold', 'italic', '|', 'undo', 'redo' ]
```
  or '-' to make a line break and render items in multiple lines:
```
toolbar: [ 'bold', 'italic', '-', 'undo', 'redo' ]
```
  Line break will work only in the extended format when shouldNotGroupWhenFull option is set to true.
- toolbar.viewportTopOffset (deprecated) – The offset (in pixels) from the top of the viewport used when positioning a sticky toolbar. Useful when a page with which the editor is being integrated has some other sticky or fixed elements (e.g. the top menu). Thanks to setting the toolbar offset the toolbar will not be positioned underneath or above the page's UI.
  
  This property has been deprecated and will be removed in the future versions of CKEditor. Please use EditorConfig#ui.viewportOffset instead.
- toolbar.shouldNotGroupWhenFull – When set to true, the toolbar will stop grouping items and let them wrap to the next line if there is not enough space to display them in a single row.
trackChanges : TrackChangesConfig

The configuration of the track changes feature. It is introduced by the TrackChanges feature.

Read more in TrackChangesConfig.
typing : TypingConfig

The configuration of the typing features. Used by the features from the @ckeditor/ckeditor5-typing package.

See source

Read more in TypingConfig.
ui : Object
The editor UI configuration.

See source
```
ClassicEditor
	.create( document.querySelector( '#editor' ), {
		ui: { ... }
	} )
	.then( ... )
	.catch( ... );
```
Options which can be set using the UI config:
- ui.viewportOffset – The offset (in pixels) of the viewport from every direction used when positioning a sticky toolbar or other absolutely positioned UI elements. Useful when a page with which the editor is being integrated has some other sticky or fixed elements (e.g. the top menu). Thanks to setting the UI viewport offset the toolbar and other contextual balloons will not be positioned underneath or above the page's UI.
```
ui: {
	viewportOffset: { top: 10, right: 10, bottom: 10, left: 10 }
}
```
  Note: If you want to modify the viewport offset in runtime (after editor was created), you can do that by overriding editor.ui.viewportOffset.
wordCount : WordCountConfig

The configuration of the word count feature. It is introduced by the WordCount feature.

See source

Read more in WordCountConfig.

Every day, we work hard to keep our documentation complete. Have you spotted an outdated information? Is something missing? Please report it via our issue tracker.

EditorConfig (core/editor)

Filtering

Properties

alignment : AlignmentConfigmodule:core/editor/editorconfig~EditorConfig#alignment

autosave : AutosaveConfigmodule:core/editor/editorconfig~EditorConfig#autosave

balloonToolbar : Array.<String> | Objectmodule:core/editor/editorconfig~EditorConfig#balloonToolbar

Configuring toolbar items

Configuring items grouping

blockToolbar : Array.<String> | Objectmodule:core/editor/editorconfig~EditorConfig#blockToolbar

Configuring items grouping

ckfinder : CKFinderConfigmodule:core/editor/editorconfig~EditorConfig#ckfinder

cloudServices : CloudServicesConfigmodule:core/editor/editorconfig~EditorConfig#cloudServices

codeBlock : CodeBlockConfigmodule:core/editor/editorconfig~EditorConfig#codeBlock

collaboration : RealTimeCollaborationConfigmodule:core/editor/editorconfig~EditorConfig#collaboration

comments : CommentsConfigmodule:core/editor/editorconfig~EditorConfig#comments

commentsOnly : Booleanmodule:core/editor/editorconfig~EditorConfig#commentsOnly

exportPdf : ExportPdfConfigmodule:core/editor/editorconfig~EditorConfig#exportPdf

exportWord : ExportWordConfigmodule:core/editor/editorconfig~EditorConfig#exportWord

extraPlugins : Array.<Function>module:core/editor/editorconfig~EditorConfig#extraPlugins

fontBackgroundColor : FontBackgroundColorConfigmodule:core/editor/editorconfig~EditorConfig#fontBackgroundColor

fontColor : FontColorConfigmodule:core/editor/editorconfig~EditorConfig#fontColor

fontFamily : FontFamilyConfigmodule:core/editor/editorconfig~EditorConfig#fontFamily

fontSize : FontSizeConfigmodule:core/editor/editorconfig~EditorConfig#fontSize

heading : HeadingConfigmodule:core/editor/editorconfig~EditorConfig#heading

highlight : HighlightConfigmodule:core/editor/editorconfig~EditorConfig#highlight

htmlSupport : GeneralHtmlSupportConfigmodule:core/editor/editorconfig~EditorConfig#htmlSupport

image : ImageConfigmodule:core/editor/editorconfig~EditorConfig#image

indentBlock : IndentBlockConfigmodule:core/editor/editorconfig~EditorConfig#indentBlock

initialData : Stringmodule:core/editor/editorconfig~EditorConfig#initialData

language : String | LanguageConfigmodule:core/editor/editorconfig~EditorConfig#language

licenseKey : Stringmodule:core/editor/editorconfig~EditorConfig#licenseKey

link : LinkConfigmodule:core/editor/editorconfig~EditorConfig#link

list : ListConfigmodule:core/editor/editorconfig~EditorConfig#list

locale : LocaleConfigmodule:core/editor/editorconfig~EditorConfig#locale

mediaEmbed : MediaEmbedConfigmodule:core/editor/editorconfig~EditorConfig#mediaEmbed

mention : MentionConfigmodule:core/editor/editorconfig~EditorConfig#mention

minimap : MinimapConfigmodule:core/editor/editorconfig~EditorConfig#minimap

pagination : PaginationConfigmodule:core/editor/editorconfig~EditorConfig#pagination

placeholder : Stringmodule:core/editor/editorconfig~EditorConfig#placeholder

plugins : Array.<(String | Function)>module:core/editor/editorconfig~EditorConfig#plugins

removePlugins : Array.<(String | Function)>module:core/editor/editorconfig~EditorConfig#removePlugins

restrictedEditing : RestrictedEditingModeConfigmodule:core/editor/editorconfig~EditorConfig#restrictedEditing

revisionHistory : RevisionHistoryConfigmodule:core/editor/editorconfig~EditorConfig#revisionHistory

sidebar : SidebarConfigmodule:core/editor/editorconfig~EditorConfig#sidebar

simpleUpload : SimpleUploadConfigmodule:core/editor/editorconfig~EditorConfig#simpleUpload

style : StyleConfigmodule:core/editor/editorconfig~EditorConfig#style

table : TableConfigmodule:core/editor/editorconfig~EditorConfig#table

title : TitleConfigmodule:core/editor/editorconfig~EditorConfig#title

toolbar : Array.<String> | Objectmodule:core/editor/editorconfig~EditorConfig#toolbar

trackChanges : TrackChangesConfigmodule:core/editor/editorconfig~EditorConfig#trackChanges

typing : TypingConfigmodule:core/editor/editorconfig~EditorConfig#typing

ui : Objectmodule:core/editor/editorconfig~EditorConfig#ui

wordCount : WordCountConfigmodule:core/editor/editorconfig~EditorConfig#wordCount

`alignment : AlignmentConfig`

`autosave : AutosaveConfig`

`balloonToolbar : Array.<String> | Object`

`blockToolbar : Array.<String> | Object`

`ckfinder : CKFinderConfig`

`cloudServices : CloudServicesConfig`

`codeBlock : CodeBlockConfig`

`collaboration : RealTimeCollaborationConfig`

`comments : CommentsConfig`

`commentsOnly : Boolean`

`exportPdf : ExportPdfConfig`

`exportWord : ExportWordConfig`

`extraPlugins : Array.<Function>`

`fontBackgroundColor : FontBackgroundColorConfig`

`fontColor : FontColorConfig`

`fontFamily : FontFamilyConfig`

`fontSize : FontSizeConfig`

`heading : HeadingConfig`

`highlight : HighlightConfig`

`htmlSupport : GeneralHtmlSupportConfig`

`image : ImageConfig`

`indentBlock : IndentBlockConfig`

`initialData : String`

`language : String | LanguageConfig`

`licenseKey : String`

`link : LinkConfig`

`list : ListConfig`

`locale : LocaleConfig`

`mediaEmbed : MediaEmbedConfig`

`mention : MentionConfig`

`minimap : MinimapConfig`

`pagination : PaginationConfig`

`placeholder : String`

`plugins : Array.<(String | Function)>`

`removePlugins : Array.<(String | Function)>`

`restrictedEditing : RestrictedEditingModeConfig`

`revisionHistory : RevisionHistoryConfig`

`sidebar : SidebarConfig`

`simpleUpload : SimpleUploadConfig`

`style : StyleConfig`

`table : TableConfig`

`title : TitleConfig`

`toolbar : Array.<String> | Object`

`trackChanges : TrackChangesConfig`

`typing : TypingConfig`

`ui : Object`

`wordCount : WordCountConfig`