# Editor types

CKEditor 5 offers six ready-made editor types: classic, inline, balloon, balloon block, decoupled (document), and multi-root. They differ in their user interface and editing approach, and some features are only available with certain types.

Editor types are imported from the main `ckeditor5` package, the same way features are imported, as shown in the [Quick start](../installation/cloud/quick-start.md) guide.

Other custom-tailored editor types can be made using the [CKEditor 5 Framework](../../framework/deep-dive/ui/external-ui.md).

> **Note**
>
> If you are unsure which editor type to choose, try the [CKEditor 5 Builder](https://builder.ckeditor.com/?redirect=docs). It lets you quickly view and experiment with different presets.

<a id="classic-editor">

## Classic editor

The classic editor is what most users traditionally learned to associate with a rich-text editor – a toolbar with an editing area placed in a specific position on the page, usually as a part of a form that you use to submit some content to the server.

See an [example of the classic editor](../../examples/builds/classic-editor.md) in action.

Use the following import to put the classic editor on your page:

**NPM**

```js
import {
	ClassicEditor,
	Essentials,
	Bold,
	Italic,
	Font,
	Paragraph
} from 'ckeditor5';

ClassicEditor
	.create( {
		attachTo: document.querySelector( '#editor' ),
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Essentials, Bold, Italic, Font, Paragraph ],
		toolbar: [ 'bold', 'italic' ]
	} )
	.then( editor => {
		console.log( 'The classic editor initialized', editor );
	} )
	.catch( error => {
		console.error( error );
	} );
```

**CDN**

```js
const {
	ClassicEditor,
	Essentials,
	Bold,
	Italic,
	Font,
	Paragraph
} = CKEDITOR;

ClassicEditor
	.create( {
		attachTo: document.querySelector( '#editor' ),
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Essentials, Bold, Italic, Font, Paragraph ],
		toolbar: [ 'bold', 'italic' ]
	} )
	.then( editor => {
		console.log( 'The classic editor initialized', editor );
	} )
	.catch( error => {
		console.error( error );
	} );
```

<a id="inline-editor">

## Inline editor

The inline editor comes with a floating toolbar that becomes visible when the editor is focused (for example, by clicking it). A common scenario for using the inline editor is offering users the possibility to edit content (such as headings and other small areas) in its real location on a web page instead of doing it in a separate administration section.

See an [example of the inline editor](../../examples/builds/inline-editor.md) in action.

Use the following import to put the inline editor on your page:

**NPM**

```js
import {
	InlineEditor,
	Essentials,
	Bold,
	Italic,
	Font,
	Paragraph
} from 'ckeditor5';

InlineEditor
	.create( {
		root: {
			element: document.querySelector( '#editor' )
		},
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Essentials, Bold, Italic, Font, Paragraph ],
		toolbar: [ 'bold', 'italic' ]
	} )
	.then( editor => {
		console.log( 'The inline editor initialized', editor );
	} )
	.catch( error => {
		console.error( error );
	} );
```

**CDN**

```js
const {
	InlineEditor,
	Essentials,
	Bold,
	Italic,
	Font,
	Paragraph
} = CKEDITOR;

InlineEditor
	.create( {
		root: {
			element: document.querySelector( '#editor' )
		},
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Essentials, Bold, Italic, Font, Paragraph ],
		toolbar: [ 'bold', 'italic' ]
	} )
	.then( editor => {
		console.log( 'The inline editor initialized', editor );
	} )
	.catch( error => {
		console.error( error );
	} );
```

<a id="balloon-editor-and-balloon-block-editor">

## Balloon editor and balloon block editor

The balloon editor is similar to inline editor. The difference between them is that the [toolbar appears in a balloon](toolbar.md#block-toolbar) next to the selection (when the selection is not empty).

See an [example of the balloon editor](../../examples/builds/balloon-editor.md) in action.

Balloon block is essentially the balloon editor with an extra block toolbar, which can be accessed using the button attached to the editable content area and following the selection in the document. The toolbar provides access to additional block-level editing features.

See an [example of the balloon block editor](../../examples/builds/balloon-block-editor.md) in action.

Use one of the following imports to put the balloon editor on your page:

**NPM**

```js
import {
	BalloonEditor,
	Essentials,
	Bold,
	Italic,
	Font,
	Paragraph
} from 'ckeditor5';

BalloonEditor
	.create( {
		root: {
			element: document.querySelector( '#editor' )
		},
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Essentials, Bold, Italic, Font, Paragraph ],
		toolbar: [ 'bold', 'italic' ],
		// The optional setting configures the side toolbar.
		blockToolbar: [ 'paragraph', 'heading1', 'heading2', 'heading3' ]
	} )
	.then( editor => {
		console.log( 'The balloon editor initialized', editor );
	} )
	.catch( error => {
		console.error( error );
	} );
```

**CDN**

```js
const {
	BalloonEditor,
	Essentials,
	Bold,
	Italic,
	Font,
	Paragraph
} = CKEDITOR;

BalloonEditor
	.create( {
		root: {
			element: document.querySelector( '#editor' )
		},
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Essentials, Bold, Italic, Font, Paragraph ],
		toolbar: [ 'bold', 'italic' ],
		// The optional setting configures the side toolbar.
		blockToolbar: [ 'paragraph', 'heading1', 'heading2', 'heading3' ]
	} )
	.then( editor => {
		console.log( 'The balloon editor initialized', editor );
	} )
	.catch( error => {
		console.error( error );
	} );
```

<a id="decoupled-editor-document">

## Decoupled editor (document)

The Decoupled editor is named for its unique structure, where the toolbar and editing area are separate elements. This design allows for greater flexibility and customization, making it suitable for a wide range of applications beyond just classic WYSIWYG editing.

The most popular use case for the Decoupled editor is the “document editor,” similar to large editing packages such as Google Docs or Microsoft Word. It works best for creating documents, which are usually later printed or exported to PDF files.

By separating the toolbar from the editing area, you can integrate the editor into different parts of your application or customize its appearance and functionality to suit various needs. For example, you may want to create an email creator that reflects the setup in which the toolbar is at the bottom of the editing area. We have [a working example](../../examples/framework/bottom-toolbar-editor.md) for this.

See an [example of the document editor](../../examples/builds/document-editor.md) in action.

Use the following import to put the decoupled editor on your page:

**NPM**

```js
import {
	DecoupledEditor,
	Essentials,
	Bold,
	Italic,
	Font,
	Paragraph
} from 'ckeditor5';

DecoupledEditor
	.create( {
		root: {
			element: document.querySelector( '#editor' )
		},
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Essentials, Bold, Italic, Font, Paragraph ],
		toolbar: [
			'undo', 'redo', '|', 'bold', 'italic', '|',
			'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
		]
	} )
	.then( editor => {
		console.log( 'The decoupled editor initialized', editor );
	} )
	.catch( error => {
		console.error( error );
	} );
```

**CDN**

```js
const {
	DecoupledEditor,
	Essentials,
	Bold,
	Italic,
	Font,
	Paragraph
} = CKEDITOR;

DecoupledEditor
	.create( {
		root: {
			element: document.querySelector( '#editor' )
		},
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Essentials, Bold, Italic, Font, Paragraph ],
		toolbar: [
			'undo', 'redo', '|', 'bold', 'italic', '|',
			'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
		]
	} )
	.then( editor => {
		console.log( 'The decoupled editor initialized', editor );
	} )
	.catch( error => {
		console.error( error );
	} );
```

<a id="multi-root-editor">

## Multi-root editor

The multi-root editor is an editor type that features multiple, separate editable areas. The main difference between using a multi-root editor and using multiple separate editors is the fact that in a multi-root editor, the editors are “connected.” All editable areas of the same editor instance share the same configuration, toolbar, and undo stack. They produce one document.

See an [example of the multi-root editor](../../examples/builds/multi-root-editor.md) in action.

At this time, the multi-root editor is not yet available via the [Builder](https://builder.ckeditor.com/?redirect=docs).

> **Note**
>
> The multi-root editor requires a more advanced configuration of the roots.

Add all roots you need in the editor to the `.create` command. For example:

**NPM**

```js
import {
	MultiRootEditor,
	Essentials,
	Bold,
	Italic,
	Font,
	Paragraph
} from 'ckeditor5';

MultiRootEditor
	.create( {
		roots: {
			header: { element: document.querySelector( '#header' ) },
			content: { element: document.querySelector( '#content' ) },
			leftSide: { element: document.querySelector( '#left-side' ) },
			rightSide: { element: document.querySelector( '#right-side' ) }
		},
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Essentials, Bold, Italic, Font, Paragraph ],
		toolbar: [
			'undo', 'redo', '|', 'bold', 'italic', '|',
			'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
		]
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

**CDN**

```js
const {
	MultiRootEditor,
	Essentials,
	Bold,
	Italic,
	Font,
	Paragraph
} = CKEDITOR;

MultiRootEditor
	.create( {
		roots: {
			header: { element: document.querySelector( '#header' ) },
			content: { element: document.querySelector( '#content' ) },
			leftSide: { element: document.querySelector( '#left-side' ) },
			rightSide: { element: document.querySelector( '#right-side' ) }
		},
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Essentials, Bold, Italic, Font, Paragraph ],
		toolbar: [
			'undo', 'redo', '|', 'bold', 'italic', '|',
			'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
		]
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

Then, use these roots to place editor windows in the document.

```html
<div class="editor">
	<div id="header">
		Header content.
	</div>
</div>
<div class="editor">
	<div id="content">
		Main content.
	</div>
</div>
<div class="boxes">
	<div class="box box-left editor">
		<div id="left-side">
			Left side content.
		</div>
	</div>
	<div class="box box-right editor">
		<div id="right-side">
			Right side content.
		</div>
	</div>
</div>
```

> **Note**
>
> All editor types support configuring what content a root can hold. This is most useful in multi-root setups, but it works with any editor type. See the [Root types](root-types.md) guide for details.

---

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