Full-featured editor

CKEditor 5 is a highly flexible framework that lets you build your custom editor of any type (like classic, inline, distraction-free, or document-like), with any set of features and the toolbar type that you need in no time.

This custom editor build contains almost all non-collaborative CKEditor 5 features. You can use it to create your own content or to paste some existing content from Microsoft Word, Google Docs, text documents or any online resources.

This editor was configured specifically to allow testing as many features as possible in one demo, with a multiline toolbar that gives you easy access to all available features. It is based on classic editor, providing you with a boxed editing area with a toolbar, placed in a specific position on the page. Thanks to the autoformatting feature you can also use Markdown-like inline shortcodes as you type to create and format your content without using the toolbar buttons.

Check out the demo of a collaborative editor, too, to try out features such as comments, track changes and real-time collaboration.

# Demo

Handheld emperor

Nintendo, a Japanese electronics company, started as a hanafuda cards manufacturer in 1889. In the mid-1970s, they entered the early video games market and became famous for their home video and handheld game consoles. Nintendo introduced consoles like NES, SNES, and Wii. But the most revolutionary was for sure the Game Boy.

A countdown of Nintendo handhelds

The Nintendo "flagship" - handheld Game Boy

Game & Watch was Nintendo's first product offering out-of-home gaming. From 1980 to 1991, over a hundred games were released, gaining great popularity.
In 1989, the original Game Boy was released. The new amazing machine utilized a cartridge system, allowing the users to play a multitude of games of all kinds. This was a historical game-changer.
In 2004, Nintendo introduced a new console family called the Nintendo DS. It sported a dual LCD screen in a folded shell, with the lower one being a touchscreen.
2017 brought the hybrid experience for both couch-preferring gamers and handheld enthusiasts with the release of the Nintendo Switch. It offers both a TV mode with high-definition graphics and a handheld mode using the built-in 6.2” display.

Handheld consoles' popularity

While the most recent Switch is a prevalent choice nowadays, the 2DS and 3DS consoles are still popular. The king, however, is none other than the original wonder — the Game Boy.

Console	Production dates	Pieces sold (2021)
Game & Watch	1980-1991, 2020-2021	44 million
Game Boy	1989-2010	201 million ¹
Nintendo DS	2011-2020	76 million ²
Switch	since 2017	93 million
¹119 million Game Boy and Game Boy Color variants, 82 million Game Boy Advance variants. ² Including all versions: DS, DSi, 2DS, 3DS, and New 2DS/3DS variants.

Handheld gaming experience

It's dangerous to go alone! Take this.
“Legend of Zelda”, 1986

Games offered by Nintendo include multiple genres, out of which the famous platformer arcade Super Mario and the adventure roleplay Legend of Zelda series are probably the most iconic.

Games that can be played on the handheld family include (examples of games listed):

Action & adventure games
- The Legend of Zelda series
- Chrono Trigger
First-person action games
- Splatoon
Role-playing games (RPG)
- The Pokemon series
- The Final Fantasy series

By default, CKEditor 5 filters out any content that is unsupported by its plugins and configuration. Check out the General HTML Support (“GHS”) feature that allows you to enable HTML features that are not explicitly supported by any other dedicated CKEditor 5 plugins.

# Editor example configuration

View editor configuration script


import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
import AutoImage from '@ckeditor/ckeditor5-image/src/autoimage';
import AutoLink from '@ckeditor/ckeditor5-link/src/autolink';
import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
import ExportPdf from '@ckeditor/ckeditor5-export-pdf/src/exportpdf';
import ExportWord from '@ckeditor/ckeditor5-export-word/src/exportword';
import FindAndReplace from '@ckeditor/ckeditor5-find-and-replace/src/findandreplace';
import Font from '@ckeditor/ckeditor5-font/src/font';
import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';
import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline';
import HtmlEmbed from '@ckeditor/ckeditor5-html-embed/src/htmlembed';
import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock';
import LinkImage from '@ckeditor/ckeditor5-link/src/linkimage';
import ListProperties from '@ckeditor/ckeditor5-list/src/listproperties';
import Mention from '@ckeditor/ckeditor5-mention/src/mention';
import PageBreak from '@ckeditor/ckeditor5-page-break/src/pagebreak';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat';
import SourceEditing from '@ckeditor/ckeditor5-source-editing/src/sourceediting';
import SpecialCharacters from '@ckeditor/ckeditor5-special-characters/src/specialcharacters';
import SpecialCharactersEssentials from '@ckeditor/ckeditor5-special-characters/src/specialcharactersessentials';
import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript';
import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript';
import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties';
import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties';
import TableCaption from '@ckeditor/ckeditor5-table/src/tablecaption';
import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation';
import TextPartLanguage from '@ckeditor/ckeditor5-language/src/textpartlanguage';
import TodoList from '@ckeditor/ckeditor5-list/src/todolist';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
import WordCount from '@ckeditor/ckeditor5-word-count/src/wordcount';
import WProofreader from '@webspellchecker/wproofreader-ckeditor5/src/wproofreader';
import CloudServices from '@ckeditor/ckeditor5-cloud-services/src/cloudservices';

ClassicEditor
    .create( document.querySelector( '#full-featured-editor' ), {
        cloudServices: {
                    // PROVIDE CORRECT VALUES HERE:
                    tokenUrl: 'https://example.com/cs-token-endpoint',
                    uploadUrl: 'https://your-organization-id.cke-cs.com/easyimage/upload/',
                    webSocketUrl: 'your-organization-id.cke-cs.com/ws/'
                },
        ui: {
            viewportOffset: {
                top: window.getViewportTopOffsetConfig()
            }
        },
        plugins: [
            ArticlePluginSet, Underline, Strikethrough, Superscript, Subscript, Code, RemoveFormat,
            FindAndReplace, Font, Highlight,
            CodeBlock, TodoList, ListProperties, TableProperties, TableCellProperties, TableCaption,
            EasyImage, ImageResize, LinkImage, AutoImage, HtmlEmbed,
            AutoLink, Mention, TextTransformation,
            Alignment, IndentBlock,
            PasteFromOffice, PageBreak, HorizontalLine,
            SpecialCharacters, SpecialCharactersEssentials, WordCount, WProofreader,
            ImageUpload, CloudServices, TextPartLanguage, SourceEditing,
            ExportPdf, ExportWord
        ],
        toolbar: {
            items: [
                'undo', 'redo',
                '|',
                'exportPdf', 'exportWord',
                '|',
                'wproofreader', 'findAndReplace', 'selectAll',
                '|',
                'heading',
                '|',
                'removeFormat', 'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript',
                '|',
                'specialCharacters', 'horizontalLine', 'pageBreak',
                '|',
                '-',
                'highlight', 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor',
                '|',
                'link', 'blockQuote', 'insertTable', 'uploadImage', 'mediaEmbed', 'codeBlock', 'htmlEmbed',
                '|',
                'bulletedList', 'numberedList', 'todoList',
                '|',
                'outdent', 'indent', 'alignment',
                '|',
                'textPartLanguage',
                '|',
                'sourceEditing'
            ],
            shouldNotGroupWhenFull: true
        },
        exportPdf: {
            stylesheets: [
                'EDITOR_STYLES',
                // Add your custom styles here
                // Read more in the documentation:
                // https://ckeditor.com/docs/ckeditor5/latest/features/export-pdf.html#plugin-option
            ],
            fileName: 'export-pdf-demo.pdf',
            converterOptions: {
                format: 'Tabloid',
                margin_top: '20mm',
                margin_bottom: '20mm',
                margin_right: '24mm',
                margin_left: '24mm',
                page_orientation: 'portrait'
            },
            // PROVIDE CORRECT VALUES HERE:
            tokenUrl: 'https://example.com/cs-token-endpoint'
        },
        exportWord: {
            stylesheets: [ 'EDITOR_STYLES' ],
            fileName: 'export-word-demo.docx',
            converterOptions: {
                format: 'B4',
                margin_top: '20mm',
                margin_bottom: '20mm',
                margin_right: '12mm',
                margin_left: '12mm',
                page_orientation: 'portrait'
            },
            // PROVIDE CORRECT VALUES HERE:
            tokenUrl: 'https://example.com/cs-token-endpoint'
        },
        fontFamily: {
            supportAllValues: true
        },
        fontSize: {
            options: [ 10, 12, 14, 'default', 18, 20, 22 ],
            supportAllValues: true
        },
        htmlEmbed: {
            showPreviews: true
        },
        image: {
            styles: [
                'alignCenter',
                'alignLeft',
                'alignRight'
            ],
            resizeOptions: [
                {
                    name: 'resizeImage:original',
                    label: 'Original',
                    value: null
                },
                {
                    name: 'resizeImage:50',
                    label: '50%',
                    value: '50'
                },
                {
                    name: 'resizeImage:75',
                    label: '75%',
                    value: '75'
                }
            ],
            toolbar: [
                'imageTextAlternative', 'toggleImageCaption', '|',
                'imageStyle:inline', 'imageStyle:wrapText', 'imageStyle:breakText', 'imageStyle:side', '|',
                'resizeImage'
            ],
            insert: {
                integrations: [
                    'insertImageViaUrl'
                ]
            }
        },
        list: {
            properties: {
                styles: true,
                startIndex: true,
                reversed: true
            }
        },
        link: {
            decorators: {
                addTargetToExternalLinks: true,
                defaultProtocol: 'https://',
                toggleDownloadable: {
                    mode: 'manual',
                    label: 'Downloadable',
                    attributes: {
                        download: 'file'
                    }
                }
            }
        },
        mention: {
            feeds: [
                {
                    marker: '@',
                    feed: [
                        '@apple', '@bears', '@brownie', '@cake', '@cake', '@candy', '@canes', '@chocolate', '@cookie', '@cotton', '@cream',
                        '@cupcake', '@danish', '@donut', '@dragée', '@fruitcake', '@gingerbread', '@gummi', '@ice', '@jelly-o',
                        '@liquorice', '@macaroon', '@marzipan', '@oat', '@pie', '@plum', '@pudding', '@sesame', '@snaps', '@soufflé',
                        '@sugar', '@sweet', '@topping', '@wafer'
                    ],
                    minimumCharacters: 1
                }
            ]
        },
        placeholder: 'Type or paste your content here!',
        table: {
            contentToolbar: [
                'tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties', 'toggleTableCaption'
            ]
        },
        wproofreader: {
        // PROVIDE CORRECT VALUE HERE:
            serviceId: 'service ID',
            lang: 'auto',
            srcUrl: 'https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js'
        }
    } )
    .then( editor => {
        window.editor = editor;
        // Prevent showing a warning notification when user is pasting a content from MS Word or Google Docs.
        window.preventPasteFromOfficeNotification = true;

        document.querySelector( '.ck.ck-editor__main' ).appendChild( editor.plugins.get( 'WordCount' ).wordCountContainer );
    } )
    .catch( err => {
        console.error( err );
    } );

View editor content listing

<style>
    .ck.ck-word-count {
        display: flex;
        justify-content: flex-end;

        background: var(--ck-color-toolbar-background);
        padding: var(--ck-spacing-small) var(--ck-spacing-standard);
        border: 1px solid var(--ck-color-toolbar-border);
        border-top-width: 0;
        border-radius: 0 0 var(--ck-border-radius);
    }

    .ck.ck-word-count .ck-word-count__words {
        margin-right: var(--ck-spacing-standard);
    }

    .ck.ck-rounded-corners .ck.ck-editor__main > .ck-editor__editable,
    .ck.ck-rounded-corners .ck-source-editing-area textarea {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
</style>

<div id="full-featured-editor">
    <h2>
        Handheld emperor
    </h2>
    <p>
        Nintendo, a Japanese electronics company, started as a <a href="https://en.wikipedia.org/wiki/Hanafuda"><i>hanafuda</i> cards</a> manufacturer in 1889. In the mid-1970s, they entered the early video games market and became famous for their home video and handheld game consoles. Nintendo introduced consoles like <strong>NES</strong>, <strong>SNES</strong>, and <strong>Wii</strong>. But the most revolutionary was for sure the <strong>Game Boy</strong>.
    </p>
    <h2>
        A countdown of Nintendo handhelds
    </h2>
    <figure class="image image_resized image-style-side" style="width:17.33%;">
        <img src="../../assets/img/game_boy.jpg" sizes="100vw" width="384">
        <figcaption>
            The Nintendo "flagship" - handheld Game Boy
        </figcaption>
    </figure>
    <ol style="list-style-type:decimal;">
        <li>
            <span style="color:hsl(0, 75%, 60%);"><strong>Game &amp; Watch</strong></span> was Nintendo's first product offering out-of-home gaming. From 1980 to 1991, over a hundred games were released, gaining great popularity.
        </li>
        <li>
            In 1989, &nbsp;the original <span style="color:hsl(0, 75%, 60%);"><strong>Game Boy</strong></span> was released. The new amazing machine utilized a cartridge system, allowing the users to play a multitude of games of all kinds. This was <mark class="marker-yellow">a historical game-changer</mark>. &nbsp;
        </li>
        <li>
            In 2004, Nintendo introduced a new console family called the <span style="color:hsl(0, 75%, 60%);"><strong>Nintendo DS</strong></span>. It sported a dual LCD screen in a folded shell, with the lower one being a touchscreen.
        </li>
        <li>
            2017 brought the hybrid experience for both couch-preferring gamers and handheld enthusiasts with the release of the <span style="color:hsl(0, 75%, 60%);"><strong>Nintendo Switch</strong></span>. It offers both a TV mode with high-definition graphics and a handheld mode using the built-in 6.2” display.&nbsp;
        </li>
    </ol>
    <h2>
        Handheld consoles' popularity
    </h2>
    <p>
        While the most recent Switch is a prevalent choice nowadays, the 2DS and 3DS consoles are still popular. The king, however, is none other than the original wonder — the Game Boy.
    </p>
    <figure class="table">
        <table>
            <tbody>
                <tr>
                    <td style="background-color:hsl(0, 0%, 60%);">
                        <span style="color:hsl(60, 75%, 60%);">Console</span>
                    </td>
                    <td style="background-color:hsl(0, 0%, 60%);">
                        <span style="color:hsl(60, 75%, 60%);">Production dates</span>
                    </td>
                    <td style="background-color:hsl(0, 0%, 60%);">
                        <span style="color:hsl(60, 75%, 60%);">Pieces sold (2021)</span>
                    </td>
                </tr>
                <tr>
                    <td style="background-color:hsl(0, 0%, 90%);">
                        Game &amp; Watch
                    </td>
                    <td style="background-color:hsl(0, 0%, 90%);">
                        1980-1991, 2020-2021
                    </td>
                    <td style="background-color:hsl(0, 0%, 90%);">
                        44 million
                    </td>
                </tr>
                <tr>
                    <td>
                        Game Boy
                    </td>
                    <td>
                        1989-2010
                    </td>
                    <td>
                        <span style="color:hsl(0, 75%, 60%);">201 million</span> <sup>1</sup>
                    </td>
                </tr>
                <tr>
                    <td style="background-color:hsl(0, 0%, 90%);">
                        Nintendo DS
                    </td>
                    <td style="background-color:hsl(0, 0%, 90%);">
                        2011-2020
                    </td>
                    <td style="background-color:hsl(0, 0%, 90%);">
                        76 million <sup>2</sup>
                    </td>
                </tr>
                <tr>
                    <td>
                        Switch
                    </td>
                    <td>
                        since 2017
                    </td>
                    <td>
                        93 million
                    </td>
                </tr>
                <tr>
                    <td style="background-color:hsl(0, 0%, 90%);" colspan="3">
                        <p>
                            <span style="font-size:10px;"><sup>1 </sup>119 million Game Boy and Game Boy Color variants, 82 million Game Boy Advance variants.</span>
                        </p>
                        <p>
                            <span style="font-size:10px;"><sup>2</sup> Including all versions: DS, DSi, 2DS, 3DS, and New 2DS/3DS variants.</span>
                        </p>
                    </td>
                </tr>
            </tbody>
        </table>
    </figure>
    <h2>
        Handheld gaming experience
    </h2>
    <blockquote>
        <p style="text-align:right;">
            <span style="color:hsl(210, 75%, 60%);">It's dangerous to go alone! Take this.</span>
            <br>
            <span style="color:hsl(210, 75%, 60%);">“Legend of Zelda”, 1986</span>
        </p>
    </blockquote>
    <p>
        Games offered by Nintendo include multiple genres, out of which the famous platformer arcade <i>Super Mario</i> <img class="image_resized" style="width:2.3%;" src="../../assets/img/mario.png"> and the adventure roleplay <i>Legend of Zelda</i> <img class="image_resized" style="width:2.3%;" src="../../assets/img/link.png"> series are probably the most iconic.
    </p>
    <hr>
    <p>
        Games that can be played on the handheld family include (examples of games listed):
    </p>
    <ul>
        <li>
            Action &amp; adventure games
            <ul>
                <li>
                    The <i>Legend of Zelda</i> series
                </li>
                <li>
                    <i>Chrono Trigger</i>
                </li>
            </ul>
        </li>
        <li>
            First-person action games
            <ul>
                <li>
                    <i>Splatoon</i>
                </li>
            </ul>
        </li>
        <li>
            Role-playing games (RPG)
            <ul>
                <li>
                    The <i>Pokemon</i> series
                </li>
                <li>
                    The <i>Final Fantasy</i> series
                </li>
            </ul>
        </li>
    </ul>
</div>

Every day, we work hard to keep our documentation complete. Have you spotted an outdated information? Is something missing? Please report it via our issue tracker.