EditorConfig

The configuration for the actions recorder plugin.

Configuration for AI features.

The configuration of the alignment feature.

Read more in AlignmentConfig.

The DOM element that will be the source for the created editor.

Note: This option is only available in the ClassicEditor. Other editor types expect configuration for the root elements to be passed in the config.roots configuration.

If a DOM element is passed, its content will be automatically loaded to the editor upon initialization and the editor element will replace the passed element in the DOM (the original one will be hidden and the editor will be injected next to it).

If the updateSourceElementOnDestroy option is set to true, the editor data will be set back to the original element once the editor is destroyed and when a form, in which this element is contained, is submitted (if the original element is a <textarea>). This ensures seamless integration with native web forms.

If the element is not provided, a detached editor will be created. In this case you need to insert it into the DOM manually. It is available under the editor.ui.element property.

The configuration of the autosave feature.

Read more in AutosaveConfig.

Contextual toolbar configuration. Used by the BalloonToolbar feature.

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
	},
};

The block toolbar configuration. Used by the BlockToolbar feature.

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.

The configuration of the Bookmark feature.

Read more in BookmarkConfig.

The configuration of the CKBox feature.

Read more in CKBoxConfig.

The configuration of the CKFinder feature.

Read more in CKFinderConfig.

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

Read more in CloudServicesConfig.

The configuration of the CodeBlock feature.

Read more in CodeBlockConfig.

The configuration of the real time collaboration feature.

Read more in RealTimeCollaborationConfig.

See all editor options.

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

Read more in CommentsConfig.

ClassicEditor
	.create( {
		comments: ... // Locale editor configuration.
	} )
	.then( ... )
	.catch( ... );

See all editor options.

Enables comments-only mode when the editor initializes.

ClassicEditor
	.create( {
		commentsOnly: true
	} )
	.then( ... )
	.catch( ... );

The configuration of the DocumentOutline feature.

Read more in DocumentOutlineConfig.

The configuration of the EmailIntegration feature.

Read more in EmailConfigurationConfig.

The configuration of the Emoji feature.

Read more in EmojiConfig.

Enables specific experimental features in the editor for testing and feedback.

The configuration of the export inline styles feature.

Read more in ExportInlineStylesConfig.

The configuration of the export to PDF feature.

Read more in ExportPdfConfig.

The configuration of the export to Word feature.

Read more in ExportWordConfig.

The list of additional plugins to load along those already available in the editor. It extends the plugins configuration.

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, try CKEditr 5 Builder.

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

The configuration of the FindAndReplace.

Read more in FindAndReplaceConfig.

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

Read more in FontColorConfig.

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

Read more in FontColorConfig.

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

Read more in FontFamilyConfig.

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

Read more in FontSizeConfig.

Configuration for the fullscreen mode feature.

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

Read more in HeadingConfig.

The configuration of the Highlight feature.

Read more in HighlightConfig.

The configuration of the HTML embed feature. Introduced by the HtmlEmbedEditing feature.

Read more in all editor options.

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

Read more in GeneralHtmlSupportConfig.

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

Read more in ImageConfig.

The configuration of the import from Word feature.

Read more in ImportWordConfig.

The configuration of the block indentation feature.

Read more in IndentBlockConfig.

The initial editor data to be used instead of the provided element's HTML content.

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.

If your editor implementation uses multiple roots, you should pass an object with keys corresponding to the editor roots names and values equal to the data that should be set in each root:

MultiRootEditor.create(
	// Roots for the editor:
	{
		header: document.querySelector( '#header' ),
		content: document.querySelector( '#content' ),
		leftSide: document.querySelector( '#left-side' ),
		rightSide: document.querySelector( '#right-side' )
	},
	// Config:
	{
		initialData: {
			header: '<p>Content for header part.</p>',
			content: '<p>Content for main part.</p>',
			leftSide: '<p>Content for left-side box.</p>',
			rightSide: '<p>Content for right-side box.</p>'
		}
	}
)
.then( ... )
.catch( ... );

See also Editor.create() documentation for the editor implementation which you use.

Note: If config.initialData is set together with config.root.initialData or config.roots.<rootName>.initialData, an error will be thrown as those 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.

This property has been deprecated and will be removed in the future versions of CKEditor. Please use config.root.initialData instead. For the multi-root editor, use config.roots.<rootName>.initialData.

Label which briefly describes the editing area. Used for the aria-label attribute set on the editor editing area, helping assistive technologies to tell apart multiple editor instances (editing areas) on the page. If not set, a default "Rich Text Editor. Editing area [name of the area]" is used instead.

It can also be used by other features when referring to this editing area (e.g. AI features).

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		label: 'Article main content'
	} )
	.then( ... )
	.catch( ... );

If your editor implementation uses multiple roots, you should pass an object with keys corresponding to the editor roots names and values equal to the label that should be used for each root:

MultiRootEditor.create(
	// Roots for the editor:
	{
		header: document.querySelector( '#header' ),
		content: document.querySelector( '#content' ),
		sideQuote: document.querySelector( '#side-quote' ),
		relatedLinks: document.querySelector( '#related-links' )
	},
	// Config:
	{
		label: {
			header: 'Article header',
			content: 'Article main content',
			sideQuote: 'Side-quote',
			relatedLinks: 'Related links'
		}
	}
)
.then( ... )
.catch( ... );

This property has been deprecated and will be removed in the future versions of CKEditor. Please use config.root.label instead. For the multi-root editor, use config.roots.<rootName>.label.

The language of the editor UI and its content.

Simple usage (change the language of the UI and the content):

ClassicEditor
	.create( {
		attachTo: 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( {
		attachTo: 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:

<script type="importmap">
{
  "imports": {
    "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/<VERSION>/ckeditor5.js",
    "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/<VERSION>/"
  }
}
</script>
<script type="module">
import { ClassicEditor, Essentials, Paragraph } from 'ckeditor5';
import { translations } from 'ckeditor5/dist/translations/pl.js';

await ClassicEditor.create( {
  attachTo: document.querySelector( '#editor' ),
  plugins: [
    Essentials,
    Paragraph,
  ],
  toolbar: {
    items: [ 'undo', 'redo' ]
  },
  translations
} );
</script>

You can add translation using NPM as well.

import { ClassicEditor, Essentials, Paragraph } from 'ckeditor5';
import { translations } from 'ckeditor5/dist/translations/pl.js';

import 'ckeditor5/dist/styles.css';

await ClassicEditor.create( {
  attachTo: document.querySelector( '#editor' ),
  plugins: [
    Essentials,
    Paragraph,
  ],
  toolbar: {
    items: [ 'undo', 'redo' ]
  },
  translations
} );

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

The CKEditor 5 license key. If you want to obtain a license key, please do one of the following:

• Create a free account, and test the premium features with a 14-day free trial.
• Contact us for a commercial license.
• If you are using the editor under a GPL license or another license from our Open Source Initiative, use the 'GPL' license key instead.

The configuration of the LineHeight feature.

Read more in LineHeightConfig.

The configuration of the Link feature.

Read more in LinkConfig.

The configuration of the List feature and the LegacyList feature.

Read more in ListConfig.

The locale configuration of the editor.

The configuration of the MediaEmbed feature.

Read more in MediaEmbedConfig.

The configuration of the Mention feature.

Read more in MentionConfig.

The editor menu bar configuration.

Note: The menu bar is not available in all editor types. Currently, only the Classic editor and Decoupled editor support this feature. Setting the config.menuBar configuration for other editor types will have no effect.

In Classic editor, the menu bar is hidden by default. Set the isVisible configuration flag to true in order to show it:

ClassicEditor
	.create( {
		attachTo: document.querySelector( '#editor' ),
		menuBar: {
			isVisible: true
		}
	} )
	.then( ... );

When using the Decoupled editor, you will need to insert the menu bar in a desired place yourself. For example:

DecoupledEditor
	.create( {
		root: { element: document.querySelector( '#editor' ) },
		toolbar: [ 'undo', 'redo', 'bold', 'italic', 'numberedList', 'bulletedList' ],
	} )
 .then( editor => {
		document.getElementById( '#menuBarContainer' ).appendChild( editor.ui.view.menuBarView.element );
	} );

Note: You do not have to set the items property in this configuration in order to use the menu bar. By default, a default set of items is used that already includes all core editor features. For your convenience, there are config.menuBar.addItems and config.menuBar.removeItems options available that will help you adjust the default configuration without setting the entire menu bar structure from scratch (see below).

Removing items from the menu bar

You can use the config.menuBar.removeItems option to remove items from the default menu bar configuration. You can remove individual buttons (e.g. "Bold" or "Block quote"), item groups (e.g. the basic styles section that includes multiple buttons such as "Bold", "Italic", "Underline", etc.), or whole menus (e.g. the "Insert" menu). Please refer to the default configuration to see default buttons/groups/menus and their structure.

To remove individual buttons from the menu bar:

ClassicEditor
	.create( {
		attachTo: document.querySelector( '#editor' ),
		menuBar: {
			// Removes "Bold" and "Block quote" buttons from their respective menus.
			removeItems: [ 'menuBar:bold', 'menuBar:blockQuote' ]
		}
	} )
	.then( ... );

To remove a group of buttons from the menu bar:

ClassicEditor
	.create( {
		attachTo: document.querySelector( '#editor' ),
		menuBar: {
			// Removes the entire basic styles group ("Bold", "Italic", "Underline", etc.) from the "Format" menu.
			removeItems: [ 'basicStyles' ]
		}
	} )
	.then( ... );

To remove a menu from the menu bar:

ClassicEditor
	.create( {
		attachTo: document.querySelector( '#editor' ),
		menuBar: {
			// Removes the whole top-level "Insert" menu from the menu bar.
			removeItems: [ 'insert' ]
		}
	} )
	.then( ... );

Adding items to the menu bar

Using the config.menuBar.addItems option you can add individual buttons, button groups or entire menus to the structure of the menu bar. You can add existing components that you removed from their original position, or add your own components.

Note: When adding items please make sure that features (editor plugins) that bring specific menu bar items are loaded. For instance, the "Bold" button will not show up in the menu bar unless the basic styles feature is loaded. Learn more about loading plugins.

Each entry in the config.menuBar.addItems is an object with one of the following properties:

• item – A name of the button to be added to a specific button group (e.g. 'menuBar:bold' or 'myButton'),
• menu – A definition of a menu that should be added to the menu bar,
• group – A definition of a button group that should be added to a specific menu.

Additionally, each entry must define the position property that accepts the following values:

• 'start' – Adds a top-level menu (e.g. "Format", "Insert", etc.) at the beginning of the menu bar,
• 'start:GROUP_OR_MENU' – Adds a button/group at the beginning of the specific group/menu,
• 'end' – Adds a top-level menu (e.g. "Format", "Insert", etc.) at the end of the menu bar,
• 'end:GROUP_OR_MENU' – Adds a button/group at the end of the specific group/menu,
• 'after:BUTTON_OR_GROUP_OR_MENU' – Adds a button/group/menu right after the specific button/group/menu,
• 'before:BUTTON_OR_GROUP_OR_MENU' – Adds a button/group/menu right after the specific button/group/menu.

Please refer to the default configuration to learn about the names of buttons and positions they can be added at.

To add a new top-level menu with specific buttons at the end of the menu bar:

 ClassicEditor
	.create( {
		attachTo: document.querySelector( '#editor' ),
		menuBar: {
 		addItems: [
				{
					menu: {
						menuId: 'my-menu',
						label: 'My menu',
						groups: [
							{
								groupId: 'my-buttons',
								items: [
									'menuBar:bold',
									'menuBar:italic',
									'menuBar:underline'
								]
							}
						]
					},
					position: 'end'
				}
			]
		}
	} )
	.then( ... );

To add a new group of buttons to the "Format" menu after basic styles buttons ("Bold", "Italic", "Underline", etc.):

 ClassicEditor
	.create( {
		attachTo: document.querySelector( '#editor' ),
		menuBar: {
 		addItems: [
				{
					group: {
						groupId: 'my-buttons',
						items: [
							'myButton1',
							'myButton2',
						]
					},
					position: 'after:basicStyles'
				}
			]
		}
	} )
	.then( ... );

To add a new button to the basic styles group ("Bold", "Italic", "Underline", etc.) in the "Format" menu:

 ClassicEditor
	.create( {
		attachTo: document.querySelector( '#editor' ),
		menuBar: {
 		addItems: [
				{
					item: 'myButton',
					position: 'end:basicStyles'
				}
			]
		}
	} )
	.then( ... );

To add a new sub-menu in the "Format" menu:

 ClassicEditor
	.create( {
		attachTo: document.querySelector( '#editor' ),
		menuBar: {
 		addItems: [
				{
					menu: {
						menuId: 'my-sub-menu',
						label: 'My sub-menu',
						groups: [
							{
								groupId: 'my-buttons',
								items: [
									'myButton1',
									'myButton2',
								]
							}
						]
					},
					position: 'after:basicStyles'
				}
			]
		}
	} )
	.then( ... );

Defining menu bar from scratch

If the config.menuBar.addItems and config.menuBar.removeItems options are not enough to adjust the default configuration, you can set the menu bar structure from scratch.

For instance, to create a minimalistic menu bar configuration with just two main categories (menus), use the following code snippet:

ClassicEditor
	.create( {
		attachTo: document.querySelector( '#editor' ),
		menuBar: {
			items: [
				{
					menuId: 'formatting',
					label: 'Formatting',
					groups: [
						{
							groupId: 'basicStyles',
							items: [
								'menuBar:bold',
								'menuBar:italic',
							]
						},
						{
							groupId: 'misc',
							items: [
								'menuBar:heading',
								'menuBar:bulletedList',
								'menuBar:numberedList'
							]
						}
					]
				},
				{
					menuId: 'myButtons',
					label: 'My actions',
					groups: [
						{
							groupId: 'undo',
							items: [
								'myButton1',
								'myButton2'
							]
						}
					]
				}
			]
		}
	} )
	.then( ... );

Configuration for the merge fields feature.

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

Read more in MinimapConfig.

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

Read more in PaginationConfig.

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.

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		placeholder: 'Type some text...'
	} )
	.then( ... )
	.catch( ... );

If your editor implementation uses multiple roots, you should pass an object with keys corresponding to the editor roots names and values equal to the placeholder that should be set in each root:

MultiRootEditor.create(
	// Roots for the editor:
	{
		header: document.querySelector( '#header' ),
		content: document.querySelector( '#content' ),
		leftSide: document.querySelector( '#left-side' ),
		rightSide: document.querySelector( '#right-side' )
	},
	// Config:
	{
		placeholder: {
			header: 'Type header...',
			content: 'Type content...',
			leftSide: 'Type left-side...',
			rightSide: 'Type right-side...'
		}
	}
)
.then( ... )
.catch( ... );

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.

This property has been deprecated and will be removed in the future versions of CKEditor. Please use config.root.placeholder instead. For the multi-root editor, use config.roots.<rootName>.placeholder.

The list of plugins to load.

import {
// A preset of plugins is a plugin as well.
	Essentials,
// The bold plugin.
	Bold
} from 'ckeditor5';

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.

The list of plugins which should not be loaded despite being available in the editor.

const config = {
	removePlugins: [ 'Bold', 'Italic' ]
};

Note: Be careful when removing plugins using config.removePlugins. 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.

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

Read more in RestrictedEditingConfig.

The configuration of the revision history feature. Introduced by the RevisionHistory feature.

The root configuration for the default main root. Use this option to configure the initial data, placeholder, label, and source element for a single-root editor.

This is the recommended way to configure a single-root editor:

// Classic editor – uses `attachTo` for the source element.
ClassicEditor
	.create( {
		attachTo: document.querySelector( '#editor' ),
		root: {
			initialData: '<p>Hello world!</p>',
			placeholder: 'Type some text...'
		}
	} )
	.then( ... )
	.catch( ... );

// Inline editor – uses `root.element` for the source element.
InlineEditor
	.create( {
		root: {
			element: document.querySelector( '#editor' ),
			initialData: '<p>Hello world!</p>',
			placeholder: 'Type some text...'
		}
	} )
	.then( ... )
	.catch( ... );

// Balloon editor – uses `root.element` for the source element.
BalloonEditor
	.create( {
		root: {
			element: document.querySelector( '#editor' ),
			placeholder: 'Type some text...'
		}
	} )
	.then( ... )
	.catch( ... );

// Decoupled editor – uses `root.element` for the source element.
// The toolbar and editable area must be manually added to the DOM.
DecoupledEditor
	.create( {
		root: {
			element: document.querySelector( '#editor' ),
			initialData: '<p>Hello world!</p>'
		}
	} )
	.then( editor => {
		document.querySelector( '#toolbar' ).appendChild( editor.ui.view.toolbar.element );
	} )
	.catch( ... );

Internally, this option is an alias for config.roots.main. If both config.root and config.roots.main are set, an error will be thrown.

For the multi-root editor, use the config.roots option instead to define configuration for each root individually.

The root configuration options grouped by the root name. This option is used primarily by the multi-root editor to define configuration for each root individually.

For a typical single-root editor, use the simpler config.root option instead.

// Using existing DOM elements as source for each root.
MultiRootEditor.create( {
	roots: {
		header: {
			element: document.querySelector( '#header' ),
			placeholder: 'Type header...',
			label: 'Article header'
		},
		content: {
			element: document.querySelector( '#content' ),
			placeholder: 'Type content...',
			label: 'Article main content'
		}
	}
} )
.then( editor => {
	document.querySelector( '#toolbar' ).appendChild( editor.ui.view.toolbar.element );
} )
.catch( ... );

// Creating a detached editor with initial data for each root.
MultiRootEditor.create( {
	roots: {
		header: {
			initialData: '<h2>Article title</h2>',
			placeholder: 'Type header...',
			label: 'Article header'
		},
		content: {
			initialData: '<p>Article body...</p>',
			placeholder: 'Type content...',
			label: 'Article main content'
		}
	}
} )
.then( editor => {
	document.querySelector( '#toolbar' ).appendChild( editor.ui.view.toolbar.element );

	for ( const rootName of editor.ui.getEditableElementsNames() ) {
		document.querySelector( '#editables' ).appendChild( editor.ui.view.getEditable( rootName ).element );
	}
} )
.catch( ... );

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

The configuration of the simple upload adapter.

Read more in SimpleUploadConfig.

The configuration of the SlashCommand feature.

Read more in SlashCommandEditorConfig.

The configuration of the source editing feature.

Read more in SourceEditingConfig.

The configuration of the source editing enhanced feature.

Read more in SourceEditingEnhancedConfig.

The configuration of the SpecialCharacters feature.

Read more in SpecialCharactersConfig.

The configuration of the Style feature.

Read more in StyleConfig.

The configuration of the Table feature.

Read more in TableConfig.

The configuration of the Template feature.

Read more in TemplateConfig.

The configuration of the title feature.

Read more in HeadingTitleConfig.

The editor toolbar configuration.

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() );
  

  Copy code

  You can also use '|' to create a separator between groups of items:

  toolbar: [ 'bold', 'italic', '|', 'undo', 'redo' ]
  

  Copy code

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`.

**Note**: To save space in your toolbar, you can group several items into a dropdown:

```
toolbar: [
	{
		label: 'Basic styles',
		icon: 'text',
		items: [ 'bold', 'italic', ... ]
	},
	'|',
	'undo', 'redo'
]
```

The code above will create a "Basic styles" dropdown with a "text" icon containing the "bold" and "italic" buttons.
You can customize the look of the dropdown by setting the `withText`, `icon`, and `tooltip` properties:

* **Displaying a label**

	For instance, to hide the icon and to display the label only, you can use the following configuration:

	```ts
	{
		label: 'Basic styles',
		// Show the textual label of the drop-down. Note that the "icon" property is not configured.
		withText: true,
		items: [ 'bold', 'italic', ... ]
	}
	```

* **Selecting an icon**

	You can use one of the common icons provided by the editor (`'bold'`, `'plus'`, `'text'`, `'importExport'`, `'alignLeft'`,
	`'paragraph'`, `'threeVerticalDots'`, `'dragIndicator'`, `'pilcrow'`):

	```ts
	{
		label: '...',
		// A "plus" sign icon works best for content insertion tools.
		icon: 'plus',
		items: [ ... ]
	}
	```

	If no icon is specified, `'threeVerticalDots'` will be used as a default:

	```ts
	// No icon specified, using a default one.
	{
		label: 'Default icon',
		items: [ ... ]
	}
	```

	If `icon: false` is configured, no icon will be displayed at all and the text label will show up instead:

	```ts
	// This drop-down has no icon. The text label will be displayed instead.
	{
		label: 'No icon',
		icon: false,
		items: [ ... ]
	}
	```

	You can also set a custom icon for the drop-down by passing an SVG string:

	```ts
	{
		label: '...',
		// If you want your icon to change the color dynamically (e.g. when the dropdown opens), avoid fill="..."
		// and stroke="..." styling attributes. Use solid shapes and avoid paths with strokes.
		icon: '<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">...</svg>',
		items: [ ... ]
	}
	```

* **Customizing the tooltip**

	By default, the tooltip of the button shares its text with the label. You can customize it to better describe your dropdown
	using the `tooltip` property (learn more):

	```ts
	{
		label: 'Drop-down label',
		tooltip: 'Custom tooltip of the drop-down',
		icon: '...',
		items: [ ... ]
	}
	```

• 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.

The configuration of the TrackChanges feature.

Read more in TrackChangesConfig.

The configuration of the track changes data feature.

Translations to be used in the editor.

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

Read more in TypingConfig.

The editor UI configuration.

ClassicEditor
	.create( {
		attachTo: document.querySelector( '#editor' ),
		ui: { ... }
	} )
	.then( ... )
	.catch( ... );

Options which can be set using the UI configuration:

• ui.viewportOffset – The offset (in pixels) of the viewport from every direction. It is 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 }
  }
  

  Copy code

  Note: If you want to modify the viewport offset in runtime (after the editor was created), you can do that by overriding editor.ui.viewportOffset.

• ui.poweredBy – The configuration of the project logo displayed over the editor's editing area in open-source integrations. It allows customizing the position of the logo to minimize the risk of collision with the editor content and UI.

  The following configuration properties are supported:

  • position – The position of the project's logo (default: 'border').

    • When 'inside', the logo will be displayed within the boundaries of the editing area.
    • When 'border', the logo will be displayed over the bottom border of the editing area.

  • side ('left' or 'right', default: 'right') – The side of the editing area where the logo will be displayed.

    Note: If config.language is set to an RTL (right-to-left) language, the side switches to 'left' by default.

  • label (default: 'Powered by') – The label displayed next to the project's logo.

    Note: Set the value to null to display the logo without any text.

  • verticalOffset (default: 5) – The vertical distance the logo can be moved away from its default position.

    Note: If position is 'border', the offset is measured from the (vertical) center of the logo.

  • horizontalOffset (default: 5) – The horizontal distance between the side of the editing root and the nearest side of the logo.

  ui: {
  	poweredBy: {
  		position: 'border',
  		side: 'left',
  		verticalOffset: 2,
  		horizontalOffset: 30
  	}
  }

  Copy code

Enables updating the source element after the editor is destroyed.

Enabling this option might have some security implications, as the editor doesn't have control over all data in the output.

Be careful, especially while using the Markdown, General HTML Support, or HTML embed features.

The configuration of the Uploadcare feature.

Read more in UploadcareConfig.

The users plugin configuration.

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

Read more in WordCountConfig.

The temporary property that is used for passing data to the plugin which restores the editor state.