Quick start

Quick start

Creating an editor using a CKEditor 5 build is very simple and can be described in two steps:

Load the desired editor via the <script> tag.
Call the static create() method to create the editor.

There are other installation and integration methods available. For more information check Installation and Basic API guides.

Classic editor

In your HTML page add an element that CKEditor should replace:

<textarea name="content" id="editor"></textarea>

Load the classic editor build (here CDN location is used):

<script src="https://cdn.ckeditor.com/ckeditor5/12.3.1/classic/ckeditor.js"></script>

Call the ClassicEditor.create() method.

<script>
    ClassicEditor
        .create( document.querySelector( '#editor' ) )
        .catch( error => {
            console.error( error );
        } );
</script>

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – Classic editor</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/12.3.1/classic/ckeditor.js"></script>
</head>
<body>
    <h1>Classic editor</h1>
    <textarea name="content" id="editor">
        &lt;p&gt;This is some sample content.&lt;/p&gt;
    </textarea>
    <script>
        ClassicEditor
            .create( document.querySelector( '#editor' ) )
            .catch( error => {
                console.error( error );
            } );
    </script>
</body>
</html>

Inline editor

In your HTML page add an element that CKEditor should make editable:

<div id="editor"></div>

Load the inline editor build (here CDN location is used):

<script src="https://cdn.ckeditor.com/ckeditor5/12.3.1/inline/ckeditor.js"></script>

Call the InlineEditor.create() method.

<script>
    InlineEditor
        .create( document.querySelector( '#editor' ) )
        .catch( error => {
            console.error( error );
        } );
</script>

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 - Inline editor</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/12.3.1/inline/ckeditor.js"></script>
</head>
<body>
    <h1>Inline editor</h1>
    <div id="editor">
        <p>This is some sample content.</p>
    </div>
    <script>
        InlineEditor
            .create( document.querySelector( '#editor' ) )
            .catch( error => {
                console.error( error );
            } );
    </script>
</body>
</html>

Balloon editor

In your HTML page add an element that CKEditor should make editable:

<div id="editor"></div>

Load the balloon editor build (here CDN location is used):

<script src="https://cdn.ckeditor.com/ckeditor5/12.3.1/balloon/ckeditor.js"></script>

Call the BalloonEditor.create() method.

<script>
    BalloonEditor
        .create( document.querySelector( '#editor' ) )
        .catch( error => {
            console.error( error );
        } );
</script>

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – Balloon editor</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/12.3.1/balloon/ckeditor.js"></script>
</head>
<body>
    <h1>Balloon editor</h1>
    <div id="editor">
        <p>This is some sample content.</p>
    </div>
    <script>
        BalloonEditor
            .create( document.querySelector( '#editor' ) )
            .catch( error => {
                console.error( error );
            } );
    </script>
</body>
</html>

Balloon block editor

In your HTML page add an element that CKEditor should make editable:

<div id="editor"></div>

Load the balloon block editor build (here CDN location is used):

<script src="https://cdn.ckeditor.com/ckeditor5/12.3.1/balloon-block/ckeditor.js"></script>

Call the BalloonEditor.create() method.

<script>
    BalloonEditor
        .create( document.querySelector( '#editor' ) )
        .catch( error => {
            console.error( error );
        } );
</script>

Note: You can configure the block toolbar items using the config.blockToolbar option.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – Balloon block editor</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/12.3.1/balloon-block/ckeditor.js"></script>
</head>
<body>
    <h1>Balloon editor</h1>
    <div id="editor">
        <p>This is some sample content.</p>
    </div>
    <script>
        BalloonEditor
            .create( document.querySelector( '#editor' ) )
            .catch( error => {
                console.error( error );
            } );
    </script>
</body>
</html>

Document editor

Load the document editor build (here CDN location is used):

<script src="https://cdn.ckeditor.com/ckeditor5/12.3.1/decoupled-document/ckeditor.js"></script>

Call the DecoupledEditor.create() method. The decoupled editor requires you to inject the toolbar into the DOM and the best place to do that is somewhere in the promise chain (e.g. one of the then( () => { … } ) blocks).

The following snippet will run the document editor but to make the most of it check out the comprehensive tutorial which explains step—by—step how to configure and style the application for the best editing experience.

<script>
    DecoupledEditor
        .create( document.querySelector( '#editor' ) )
        .then( editor => {
            const toolbarContainer = document.querySelector( '#toolbar-container' );
            toolbarContainer.appendChild( editor.ui.view.toolbar.element );
        } )
        .catch( error => {
            console.error( error );
        } );
</script>

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – Document editor</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/12.3.1/decoupled-document/ckeditor.js"></script>
</head>
<body>
    <h1>Document editor</h1>
    <!-- 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>
    <script>
        DecoupledEditor
            .create( document.querySelector( '#editor' ) )
            .then( editor => {
                const toolbarContainer = document.querySelector( '#toolbar-container' );
                toolbarContainer.appendChild( editor.ui.view.toolbar.element );
            } )
            .catch( error => {
                console.error( error );
            } );
    </script>
</body>
</html>

Next steps

Check the Configuration guide to learn how to configure the editor — for example, change the default toolbar.