guideFeature-rich 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 (with some features grouped into dropdowns) that gives you easy access to all available features. It is based on the classic editor, providing you with a boxed editing area with a toolbar, placed in a specific position on the page. The toolbar has been specially configured to host as many features as possible in a convenient setup. CKEditor 5 offers a dedicated accessibility help dialog that displays a list of all available keyboard shortcuts in a dialog. It can be opened by pressing Alt + 0 (on Windows) or Option + 0 (on macOS) or via toolbar.

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. The slash command feature lets you format and insert content on the go.

You can also see the collaborative document editor, to try out features such as comments, comments archive, track changes, or revision history, and other features enhancing document editing functions.

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.

While this demo has the import from Word feature enabled, please consider that the comments and track changes features are not enabled and hence these elements will not show up in the content. Read more about handling such situations in the import from Word’s features comparison guide. You can test these features working together in the official import from Word demo.

# Editor example configuration

To set up the feature-rich demo locally, you need to follow the Building the editor from source guide. However, you need to use the configuration files provided below:

Packages installation
npm install --save \
    @ckeditor/ckeditor5-alignment \
    @ckeditor/ckeditor5-autoformat \
    @ckeditor/ckeditor5-basic-styles \
    @ckeditor/ckeditor5-block-quote \
    @ckeditor/ckeditor5-case-change
    @ckeditor/ckeditor5-ckbox \
    @ckeditor/ckeditor5-cloud-services \
    @ckeditor/ckeditor5-code-block \
    @ckeditor/ckeditor5-dev-utils \
    @ckeditor/ckeditor5-document-outline \
    @ckeditor/ckeditor5-editor-classic \
    @ckeditor/ckeditor5-essentials \
    @ckeditor/ckeditor5-export-pdf \
    @ckeditor/ckeditor5-export-word \
    @ckeditor/ckeditor5-find-and-replace \
    @ckeditor/ckeditor5-font \
    @ckeditor/ckeditor5-format-painter \
    @ckeditor/ckeditor5-heading \
    @ckeditor/ckeditor5-highlight \
    @ckeditor/ckeditor5-horizontal-line \
    @ckeditor/ckeditor5-html-embed \
    @ckeditor/ckeditor5-image \
    @ckeditor/ckeditor5-indent \
    @ckeditor/ckeditor5-language \
    @ckeditor/ckeditor5-link \
    @ckeditor/ckeditor5-list \
    @ckeditor/ckeditor5-media-embed \
    @ckeditor/ckeditor5-mention \
    @ckeditor/ckeditor5-page-break \
    @ckeditor/ckeditor5-paste-from-office \
    @ckeditor/ckeditor5-remove-format \
    @ckeditor/ckeditor5-show-blocks \
    @ckeditor/ckeditor5-slash-command \
    @ckeditor/ckeditor5-source-editing \
    @ckeditor/ckeditor5-special-characters \
    @ckeditor/ckeditor5-table \
    @ckeditor/ckeditor5-template \
    @ckeditor/ckeditor5-theme-lark \
    @ckeditor/ckeditor5-typing \
    @ckeditor/ckeditor5-word-count \
    @webspellchecker/wproofreader-ckeditor5
Editor configuration script (app.js in the customized installation guide)
import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { Alignment } from '@ckeditor/ckeditor5-alignment';
import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
import { Bold, Code, Italic, Strikethrough, Subscript, Superscript, Underline } from '@ckeditor/ckeditor5-basic-styles';
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
import { CaseChange } from '@ckeditor/ckeditor5-case-change';
import { CKBox, CKBoxImageEdit } from '@ckeditor/ckeditor5-ckbox';
import { CloudServices } from '@ckeditor/ckeditor5-cloud-services';
import { CodeBlock } from '@ckeditor/ckeditor5-code-block';
import { TableOfContents } from '@ckeditor/ckeditor5-document-outline';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { ExportPdf } from '@ckeditor/ckeditor5-export-pdf';
import { ExportWord } from '@ckeditor/ckeditor5-export-word';
import { FindAndReplace } from '@ckeditor/ckeditor5-find-and-replace';
import { Font } from '@ckeditor/ckeditor5-font';
import { FormatPainter } from '@ckeditor/ckeditor5-format-painter';
import { GeneralHtmlSupport } from '@ckeditor/ckeditor5-html-support';
import { Heading } from '@ckeditor/ckeditor5-heading';
import { Highlight } from '@ckeditor/ckeditor5-highlight';
import { HorizontalLine } from '@ckeditor/ckeditor5-horizontal-line';
import { HtmlEmbed } from '@ckeditor/ckeditor5-html-embed';
import { AutoImage,
    Image,
    ImageCaption,
    ImageInsert,
    ImageResize,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    PictureEditing
} from '@ckeditor/ckeditor5-image';
import { ImportWord } from '@ckeditor/ckeditor5-import-word';
import { Indent, IndentBlock } from '@ckeditor/ckeditor5-indent';
import { AutoLink, Link, LinkImage } from '@ckeditor/ckeditor5-link';
import { List, ListProperties, TodoList } from '@ckeditor/ckeditor5-list';
import { MediaEmbed } from '@ckeditor/ckeditor5-media-embed';
import { Mention } from '@ckeditor/ckeditor5-mention';
import { PageBreak } from '@ckeditor/ckeditor5-page-break';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
import { PasteFromOffice } from '@ckeditor/ckeditor5-paste-from-office';
import { RemoveFormat } from '@ckeditor/ckeditor5-remove-format';
import { ShowBlocks } from '@ckeditor/ckeditor5-show-blocks';
import { SlashCommand } from '@ckeditor/ckeditor5-slash-command';
import { SourceEditing } from '@ckeditor/ckeditor5-source-editing';
import { SpecialCharacters, SpecialCharactersEssentials } from '@ckeditor/ckeditor5-special-characters';
import { Style } from '@ckeditor/ckeditor5-style';
import { Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar } from '@ckeditor/ckeditor5-table';
import { Template } from '@ckeditor/ckeditor5-template';
import { TextTransformation } from '@ckeditor/ckeditor5-typing';
import { WordCount } from '@ckeditor/ckeditor5-word-count';
import WProofreader from '@webspellchecker/wproofreader-ckeditor5/src/wproofreader';

// templates icons
import articleImageRightIcon from '../../assets/img/article-image-right.svg';
import financialReportIcon from '../../assets/img/financial-report.svg';
import formalLetterIcon from '../../assets/img/formal-letter.svg';
import resumeIcon from '../../assets/img/resume.svg';
import richTableIcon from '../../assets/img/rich-table.svg';
import todoIcon from '../../assets/img/todo.svg';

ClassicEditor
    .create( document.querySelector( '#full-featured-editor' ), {
        ckbox: {
            // This editor configuration includes the CKBox feature.
            // Provide correct configuration values to use it.
            tokenUrl: 'https://example.com/cs-token-endpoint'
            // Read more about CKBox - https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/ckbox.html.
            // For other image upload methods see the guide - https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/image-upload.html.
        },
        plugins: [
            Autoformat, BlockQuote, Bold, Heading, Image, ImageCaption, FormatPainter,
            ImageStyle, ImageToolbar, Indent, Italic, Link, List, MediaEmbed,
            Paragraph, Table, TableToolbar, Alignment, AutoImage, AutoLink,
            CaseChange, CKBox, CKBoxImageEdit, CloudServices, Code, CodeBlock, Essentials, ExportPdf,
            ExportWord, ImportWord, FindAndReplace, Font, Highlight, HorizontalLine,
            HtmlEmbed, ImageInsert, ImageResize, ImageUpload, IndentBlock, GeneralHtmlSupport,
            LinkImage, ListProperties, TodoList, Mention, PageBreak, PasteFromOffice,
            PasteFromOfficeEnhanced, PictureEditing, RemoveFormat, ShowBlocks, SlashCommand, SourceEditing,
            SpecialCharacters, SpecialCharactersEssentials, Style, Strikethrough, Subscript, Superscript,
            TableCaption, TableCellProperties, TableColumnResize,
            TableProperties, TableOfContents, Template, TextTransformation,
            Underline, WordCount, WProofreader
        ],
        toolbar: {
            items: [
                'undo', 'redo',
                '|',
                'exportPdf', 'exportWord', 'importWord',
                '|',
                'showBlocks', 'formatPainter', 'findAndReplace', 'selectAll', 'wproofreader',
                '|',
                'heading',
                '|',
                'style',
                '|',
                'fontSize', 'fontFamily',
                {
                    label: 'Font color',
                    icon: 'plus',
                    items: [ 'fontColor', 'fontBackgroundColor' ]
                },
                '|',
                'caseChange',
                '-',
                'bold', 'italic', 'underline',
                {
                    label: 'Formatting',
                    icon: 'text',
                    items: [ 'strikethrough', 'subscript', 'superscript', 'code', 'horizontalLine', '|', 'removeFormat' ]
                },
                'specialCharacters', 'pageBreak',
                '|',
                'link', 'insertImage', 'ckbox', 'insertTable', 'tableOfContents', 'insertTemplate',
                {
                    label: 'Insert',
                    icon: 'plus',
                    items: [ 'highlight', 'blockQuote', 'mediaEmbed', 'codeBlock', 'htmlEmbed' ]
                },
                '|',
                'alignment',
                '|',
                'bulletedList',	'numberedList',	'todoList', 'outdent', 'indent',
                '|',
                'sourceEditing'
            ],
            shouldNotGroupWhenFull: true
        },
        htmlSupport: {
            allow: [
                {
                    name: /^.*$/,
                    styles: true,
                    attributes: true,
                    classes: true
                }
            ]
        },
        style: {
            definitions: [
                {
                    name: 'Article category',
                    element: 'h3',
                    classes: [ 'category' ]
                },
                {
                    name: 'Title',
                    element: 'h2',
                    classes: [ 'document-title' ]
                },
                {
                    name: 'Subtitle',
                    element: 'h3',
                    classes: [ 'document-subtitle' ]
                },
                {
                    name: 'Info box',
                    element: 'p',
                    classes: [ 'info-box' ]
                },
                {
                    name: 'Side quote',
                    element: 'blockquote',
                    classes: [ 'side-quote' ]
                },
                {
                    name: 'Marker',
                    element: 'span',
                    classes: [ 'marker' ]
                },
                {
                    name: 'Spoiler',
                    element: 'span',
                    classes: [ 'spoiler' ]
                },
                {
                    name: 'Code (dark)',
                    element: 'pre',
                    classes: [ 'fancy-code', 'fancy-code-dark' ]
                },
                {
                    name: 'Code (bright)',
                    element: 'pre',
                    classes: [ 'fancy-code', 'fancy-code-bright' ]
                }
            ]
        },
        exportPdf: {
            stylesheets: [
                'EDITOR_STYLES',
                // Add your custom styles here
                // Read more in the documentation:
                // https://ckeditor.com/docs/ckeditor5/latest/features/converters/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
        },
        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' '|',
                'resizeImage', '|', 'ckboxImageEdit'
            ]
        },
        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
                }
            ]
        },
        template: {
            definitions: [
                {
                    title: 'The title of the template',
                    description: 'A longer description of the template',
                    data: '<p>Data inserted into the content</p>'
                },
                {
                    // ...
                },
                // More template definitions.
                // ...
            ]
        },
        importWord: {
        // PROVIDE CORRECT VALUES HERE:
            tokenUrl: 'https://example.com/cs-token-endpoint'
        },
        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'
        },
        licenseKey: 'your-license-key'
        // PROVIDE CORRECT VALUES HERE
    } )
    .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 );
    } );
Editor content listing (index.html in the customized installation guide)
<style>

    @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=PT+Serif:ital,wght@0,400;0,700;1,400&display=swap');

    .ck.ck-word-count {
        display: flex;
        justify-content: flex-end;
@@ -19,21 +22,155 @@
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .ck.ck-content {
        font-size: 16px;
        line-height: 1.6;
        padding: 2em;
    }

    .ck-content .ck-horizontal-line {
        margin-bottom: 1em;
    }

    .ck.ck-content h3.category {
        font-family: 'Bebas Neue';
        font-size: 20px;
        font-weight: bold;
        color: #555;
        letter-spacing: 10px;
        margin: 0;
        padding: 0;
    }

    .ck.ck-content h2.document-title {
        font-family: 'Bebas Neue';
        font-size: 50px;
        font-weight: bold;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .ck.ck-content h3.document-subtitle {
        font-family: 'Bebas Neue';
        font-size: 20px;
        color: #555;
        margin: 0 0 1em;
        font-weight: normal;
        padding: 0;
    }

    .ck.ck-content p.info-box {
        --background-size: 30px;
        --background-color: #e91e63;
        padding: 1.2em 2em;
        border: 1px solid var(--background-color);
        background: linear-gradient(135deg, var(--background-color) 0%, var(--background-color) var(--background-size), transparent var(--background-size)), linear-gradient(135deg, transparent calc(100% - var(--background-size)), var(--background-color) calc(100% - var(--background-size)), var(--background-color));
        border-radius: 10px;
        margin: 1.5em 2em;
        box-shadow: 5px 5px 0 #ffe6ef;
    }

    .ck.ck-content blockquote.side-quote {
        font-family: 'Bebas Neue';
        font-style: normal;
        float: right;
        width: 35%;
        position: relative;
        border: 0;
        overflow: visible;
        z-index: 1;
        margin-left: 1em;
    }

    .ck.ck-content blockquote.side-quote::before {
        content: "“";
        position: absolute;
        top: -37px;
        left: -10px;
        display: block;
        font-size: 200px;
        color: #e7e7e7;
        z-index: -1;
        line-height: 1;
    }

    .ck.ck-content blockquote.side-quote p {
        font-size: 2em;
        line-height: 1;
    }

    .ck.ck-content blockquote.side-quote p:last-child:not(:first-child) {
        font-size: 1.3em;
        text-align: right;
        color: #555;
    }

    .ck.ck-content span.marker {
        background: yellow;
    }

    .ck.ck-content span.spoiler {
        background: #000;
        color: #000;
    }

    .ck.ck-content span.spoiler:hover {
        background: #000;
        color: #fff;
    }

    .ck.ck-content pre.fancy-code {
        border: 0;
        margin-left: 2em;
        margin-right: 2em;
        border-radius: 10px;
    }

    .ck.ck-content pre.fancy-code::before {
        content: "";
        display: block;
        height: 13px;
        background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCAxMyI+CiAgPGNpcmNsZSBjeD0iNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGMzZCNUMiLz4KICA8Y2lyY2xlIGN4PSIyNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGOUJFNEQiLz4KICA8Y2lyY2xlIGN4PSI0Ny41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiM1NkM0NTMiLz4KPC9zdmc+Cg==);
        margin-bottom: 8px;
        background-repeat: no-repeat;
    }

    .ck.ck-content pre.fancy-code-dark {
        background: #272822;
        color: #fff;
        box-shadow: 5px 5px 0 #0000001f;
    }

    .ck.ck-content pre.fancy-code-bright {
        background: #dddfe0;
        color: #000;
        box-shadow: 5px 5px 0 #b3b3b3;
    }
</style>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CKEditor 5 Feature-rich editor</title>
    </head>
    <body>
        <div id="full-featured-editor">
            Editor content is inserted here.
        </div>

        <script src="dist/bundle.js"></script>
        <!-- include CKBox from CDN -->
        <script src="https://cdn.ckbox.io/ckbox/latest/ckbox.js"></script>
    </body>
</html>