guideFull-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.

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 full-featured 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-ckbox \
    @ckeditor/ckeditor5-cloud-services \
    @ckeditor/ckeditor5-code-block \
    @ckeditor/ckeditor5-dev-utils \
    @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-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-source-editing \
    @ckeditor/ckeditor5-special-characters \
    @ckeditor/ckeditor5-table \
    @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 Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import AutoImage from '@ckeditor/ckeditor5-image/src/autoimage';
import AutoLink from '@ckeditor/ckeditor5-link/src/autolink';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import CKBox from '@ckeditor/ckeditor5-ckbox/src/ckbox';
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import CloudServices from '@ckeditor/ckeditor5-cloud-services/src/cloudservices';
import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
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 Heading from '@ckeditor/ckeditor5-heading/src/heading';
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 Image from '@ckeditor/ckeditor5-image/src/image';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert';
import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
import Indent from '@ckeditor/ckeditor5-indent/src/indent';
import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import Link from '@ckeditor/ckeditor5-link/src/link';
import LinkImage from '@ckeditor/ckeditor5-link/src/linkimage';
import List from '@ckeditor/ckeditor5-list/src/list';
import ListProperties from '@ckeditor/ckeditor5-list/src/listproperties';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
import Mention from '@ckeditor/ckeditor5-mention/src/mention';
import PageBreak from '@ckeditor/ckeditor5-page-break/src/pagebreak';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import PictureEditing from '@ckeditor/ckeditor5-image/src/pictureediting';
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 Table from '@ckeditor/ckeditor5-table/src/table';
import TableCaption from '@ckeditor/ckeditor5-table/src/tablecaption';
import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties';
import TableColumnResize from '@ckeditor/ckeditor5-table/src/tablecolumnresize';
import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
import TextPartLanguage from '@ckeditor/ckeditor5-language/src/textpartlanguage';
import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation';
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 ImportWord from '@ckeditor/ckeditor5-import-word/src/importword';

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,
            ImageStyle, ImageToolbar, Indent, Italic, Link, List, MediaEmbed,
            Paragraph, Table, TableToolbar, Alignment, AutoImage, AutoLink,
            CKBox, CloudServices, Code, CodeBlock, Essentials, ExportPdf,
            ExportWord, ImportWord, FindAndReplace, Font, Highlight, HorizontalLine,
            HtmlEmbed, ImageInsert, ImageResize, ImageUpload, IndentBlock,
            LinkImage, ListProperties, Mention, PageBreak, PasteFromOffice,
            PictureEditing, RemoveFormat, SourceEditing, SpecialCharacters,
            SpecialCharactersEssentials, Strikethrough, Subscript, Superscript,
            TableCaption, TableCellProperties, TableColumnResize,
            TableProperties, TextPartLanguage, TextTransformation, TodoList,
            Underline, WordCount, WProofreader
        ],
        toolbar: {
            items: [
                'undo', 'redo',
                '|',
                'exportPdf', 'exportWord', 'importWord',
                '|',
                'wproofreader', 'findAndReplace', 'selectAll',
                '|',
                'heading',
                '|',
                'removeFormat', 'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript',
                '|',
                'specialCharacters', 'horizontalLine', 'pageBreak',
                '|',
                '-',
                'highlight', 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor',
                '|',
                'link', 'blockQuote', 'insertTable', 'uploadImage', 'ckbox', '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
                }
            ]
        },
        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'
        }
    } )
    .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>
    .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>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CKEditor 5 Full-featured 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/1.2.1/ckbox.js"></script>
    </body>
</html>