# Editor lifecycle

You manage the CKEditor 5 lifecycle with two static methods on the editor class: `create()` to initialize an editor instance and `destroy()` to tear it down and release its resources. Each editor type provides its own editor class - most examples use the [`ClassicEditor`](../../api/module_editor-classic_classiceditor-ClassicEditor.md) class - but the lifecycle works the same way across types.

<a id="creating-an-editor-with-create">

## Creating an editor with `create()`

Regardless of the chosen type, creating an editor is done using the static `create()` method. Usually, you start with an HTML element that will be a place where an editor will render itself on a page.

> **Note**
>
> Every editor class may accept different parameters in the `create()` method and may handle the initialization differently. For instance, the classic editor will **replace** the given element with an editor, while the inline editor will use the given element to initialize an editor on it. The decoupled document editor needs to initialize the toolbar separately from the editable area. See each editor’s documentation to learn the details.

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

### Example: Classic editor

Add an element that CKEditor 5 should replace on your HTML page:

```html
<div id="editor">
	<p>Here goes the initial content of the editor.</p>
</div>
```

Then you call [`ClassicEditor.create()`](../../api/module_editor-classic_classiceditor-ClassicEditor.md#static-function-create) to **replace** the `<div>` element with a classic editor:

**NPM**

```js
import { ClassicEditor, Essentials } from 'ckeditor5';

ClassicEditor
	.create( {
		attachTo: document.querySelector( '#editor' ),
		licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
		plugins: [ Essentials, /* ... */ ],
		toolbar: [ /* .. */ ],
	} )
	.then( editor => {
		console.log( editor );
	} )
	.catch( error => {
		console.error( error );
	} );
```

**CDN**

```js
const { ClassicEditor, Essentials } = CKEDITOR;

ClassicEditor
	.create( {
		attachTo: document.querySelector( '#editor' ),
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Essentials, /* ... */ ],
		toolbar: [ /* .. */ ],
	} )
	.then( editor => {
		console.log( editor );
	} )
	.catch( error => {
		console.error( error );
	} );
```

After creation, the editor will appear on the page in the selected area.

> **Note**
>
> Inline and balloon editors types are initialized in the same way.

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

### Example: Decoupled editor

Add the elements where CKEditor 5 should initialize the toolbar and the editable to your page:

```html
<!-- The toolbar will be rendered in this container. -->
<div id="toolbar-container"></div>

<!-- This container will become the editable. -->
<div id="editor">
	<p>This is the initial editor content.</p>
</div>
```

Then call the [`DecoupledEditor.create()`](../../api/module_editor-decoupled_decouplededitor-DecoupledEditor.md#static-function-create) method to create a decoupled editor instance with the toolbar and the editable in two separate containers:

**NPM**

```js
import { DecoupledEditor, Essentials } from 'ckeditor5';

DecoupledEditor
	.create( {
		root: {
			element: document.querySelector( '#editor' ),
		},
		licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
		plugins: [ Essentials, /* ... */ ],
		toolbar: [ /* .. */ ],
	} )
	.then( editor => {
		const toolbarContainer = document.querySelector( '#toolbar-container' );

		toolbarContainer.appendChild( editor.ui.view.toolbar.element );
	} )
	.catch( error => {
		console.error( error );
	} );
```

**CDN**

```js
const { DecoupledEditor, Essentials } = CKEDITOR;

DecoupledEditor
	.create( {
		root: {
			element: document.querySelector( '#editor' ),
		},
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Essentials, /* ... */ ],
		toolbar: [ /* .. */ ],
	} )
	.then( editor => {
		const toolbarContainer = document.querySelector( '#toolbar-container' );

		toolbarContainer.appendChild( editor.ui.view.toolbar.element );
	} )
	.catch( error => {
		console.error( error );
	} );
```

<a id="getting-the-editors-instance">

## Getting the editor’s instance

The simplest way is to save the reference to the editor somewhere after you create it. This is often done by using a window or some state management object. You will often see lines like this in our documentation.

```js
// Editor's creation steps.
// ...
.then( editor => {
	window.editor = editor;
})

// Or with the await (if your setup supports it):
const editor = await ClassicEditor.create( /* ... */  );
```

<a id="destroying-the-editor-with-destroy">

## Destroying the editor with `destroy()`

In modern applications, it is common to create and remove elements from the page interactively through JavaScript. In such cases, CKEditor 5 instances should be destroyed by using the `destroy()` method:

```js
editor
	.destroy()
	.catch( error => {
		console.log( error );
	} );
```

Once the editor is destroyed, resources used by the editor instance are released. However, if `updateSourceElementOnDestroy` is enabled, the original element (`<textarea>` or similar) used to create the editor is updated to reflect the final editor content upon destruction. This has some security implication, so enable it only after making yourself familiar with [this related section](getting-and-setting-data.md#updating-the-source-element).

---

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