# Multi-root editor

The multi-root editor type is an editor type that features multiple, separate editable areas. The main difference between using a multi-root editor and using multiple separate editors (like in the [inline editor demo](inline-editor.md)) is the fact that in a multi-root editor all editable areas belong to the same editor instance share the same configuration, toolbar and the undo stack, and produce one document.

> **Unlock this feature with selected CKEditor Plans**
>
> Try all premium features – no credit card needed.
>
> [Sign up for a free trial ](https://portal.ckeditor.com/checkout?plan=free)[Select a Plan](https://ckeditor.com/pricing/)

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

<a id="editor-example-configuration">

## Editor example configuration

Check out the [Editor types](../../getting-started/setup/editor-types.md#multi-root-editor) guide to learn more about implementing this kind of editor. You will find implementation steps there. To learn how to configure individual roots to accept different content — for example, an inline-only title alongside a block content body — see the [Root types](../../getting-started/setup/root-types.md) guide. You can see this example editor’s code below.

View editor configuration script

```js
import {
	MultiRootEditor,
	Essentials,
	Bold,
	Italic,
	Heading,
	Link,
	Table,
	MediaEmbed,
	List,
	Indent
} from 'ckeditor5';

import 'ckeditor5/ckeditor5.css';

MultiRootEditor
	.create( {
		licenseKey: 'GPL', // Or '<YOUR_LICENSE_KEY>'.
		plugins: [
			Essentials,
			Heading,
			Bold,
			Italic,
			Link,
			Table,
			MediaEmbed,
			List,
			Indent
		],
		toolbar: {
			items: [
				'undo', 'redo',
				'|', 'heading',
				'|', 'bold', 'italic',
				'|', 'link', 'insertTable', 'mediaEmbed',
				'|', 'bulletedList', 'numberedList', 'outdent', 'indent'
			]
		},
		roots: {
			header: {
				element: document.querySelector( '#header' ),
			},
			content: {
				element: document.querySelector( '#content' ),
			},
			leftSide: {
				element: document.querySelector( '#left-side' ),
			},
			rightSide: {
				element: document.querySelector( '#right-side' )
			}
		}
	} )
	.then( editor => {
		window.editor = editor;

		// Append toolbar to a proper container.
		const toolbarContainer = document.querySelector( '#toolbar' );
		toolbarContainer.appendChild( editor.ui.view.toolbar.element );

		// Make toolbar sticky when the editor is focused.
		editor.ui.focusTracker.on( 'change:isFocused', () => {
			if ( editor.ui.focusTracker.isFocused ) {
				toolbarContainer.classList.add( 'sticky' );
			} else {
				toolbarContainer.classList.remove( 'sticky' );
			}
		} );
	} )
	.catch( error => {
		console.error( 'There was a problem initializing the editor.', error );
	} );
```

View editor content listing

```html
<div id="toolbar"></div>
<!--
	Wrapping the structure inside a pair of
	contenteditable="true" + contenteditable="false" elements
	is required to provide proper caret handling when
	using arrow keys at the start and end of an editable area.

	You can skip them if you don't want to move the
	caret between editable areas using arrow keys.
!-->
<div contenteditable="true">
	<div contenteditable="false">
		<div class="editor">
			<div id="header">
				Header content is inserted here.
			</div>
		</div>
		<div class="editor">
			<div id="content">
				Main content is inserted here.
			</div>
		</div>
		<div class="boxes">
			<div class="box box-left editor">
				<div id="left-side">
					Left-side box content is inserted here.
				</div>
			</div>
			<div class="box box-right editor">
				<div id="right-side">
					Right-side box content is inserted here.
				</div>
			</div>
		</div>
	</div>
</div>

<style>
	.editor {
		border: #ccced1 1px solid;
		margin-top: 10px;
	}

	.boxes {
		margin-top: 10px;
		display: flex;
	}

	.box {
		margin-top: 0px;
		width: 50%;
	}

	/*
		Make the editable "fill" the whole box.
		The box will grow if the other box grows too.
		This makes the whole box "clickable".
	*/
	.box .ck-editor__editable {
		height: 100%;
	}

	.box-left {
		margin-right: 10px;
	}

	/*
		When toolbar receives this class, it becomes sticky.
		If the toolbar would be scrolled outside of the visible area,
		instead it is kept at the top edge of the window.
	*/
	#toolbar.sticky {
		position: sticky;
		top: 0px;
		z-index: 10;
	}
</style>
```

<a id="setting-and-reading-editor-data">

## Setting and reading editor data

Please note that setting and reading the editor data is different for multi-root editor.

Pass an object when setting the editor data

Setting the data using `editor.setData()`:

```js
editor.setData( {
		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>'
	} );
```

Setting the data through `config.roots.<root name>.initialData`:

```js
MultiRootEditor.create(
		{
			roots: {
				header: {
					initialData: '<p>Content for header part.</p>',
					element: document.querySelector( '#header' )
				},
				content: {
					initialData: '<p>Content for main part.</p>',
					element: document.querySelector( '#content' )
				},
				leftSide: {
					initialData: '<p>Content for left-side box.</p>',
					element: document.querySelector( '#left-side' )
				},
				rightSide: {
					initialData: '<p>Content for right-side box.</p>',
					element: document.querySelector( '#right-side' )
				}
			}
		}
	);
```

Specify root name when obtaining the data

```js
editor.getData( { rootName: 'leftSide' } ); // -> '<p>Content for left-side box.</p>'
```

Learn more about using the multi-root editor in its [API documentation](../../api/module_editor-multi-root_multirooteditor-MultiRootEditor.md).

---

Full index of the CKEditor 5 documentation: [llms.txt](../../../llms.txt)