Contribute to this guide

guideQuick start

# Introduction

In this guide, you will find the quickest and easiest way to run ready-to-use CKEditor 5 with minimal effort – by running the editor from CDN.

Please bear in mind that the CDN solution only offers ready-to-use predefined editor builds, hence it is not possible to add new plugins and all the features available in the editor are preset.

Should you need a more flexible solution, consider using the Online builder or try building the editor from source.

# Running a simple editor

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

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

Let us run a classic editor build as an example. In your HTML page add an element that will serve as a placeholder for a CKEditor instance:

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

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

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

Call the ClassicEditor.create() method to display the editor.

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

# Sample implementation

A full webpage with embedded CKEditor 5 from the above example would look like this:

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

This kind of installation will only provide features available in the build used.

You can learn more about other available predefined editor builds in the dedicated builds guide.

The fastest way to run an advanced editor using the rich editing features offered by CKEditor 5 is using a superbuild. The superbuild, available instantly from CDN, is a preconfigured package that offers access to almost all available plugins and all predefined editor types.

Please consider, that the superbuild contains a really whole lot of code. A good portion of that code may not be needed in your implementation, so using the superbuild should be considered for evaluation purposes and tests rather, than for the production environment.

We strongly advise using the Online builder approach or building the editor from source to create customized and efficient production-environment solutions. You can also try out the predefined builds tailored for specific needs.

# Using the CKEditor 5 superbuild

In the superbuild, all editor classes are stored under the CKEDITOR object. Apart from that exception, the editor initialization is no different than the one described in the available builds documentation.

Because the superbuild contains a lot of plugins, you may need to remove the plugins you do not need with the removePlugins configuration option and adjust the toolbar configuration.

# Sample implementation

In this example, we remove the premium collaboration features as well as several other plugins that require credentials to work. We need to do this, otherwise the editor would throw an error.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <style>
            #container {
                width: 1000px;
                margin: 20px auto;
            }
            .ck-editor__editable[role="textbox"] {
                /* editing area */
                min-height: 200px;
            }
            .ck-content .image {
                /* block images */
                max-width: 80%;
                margin: 20px auto;
            }
        </style>
        <div id="container">
            <div id="editor">
            </div>
        </div>
        <!--
            The "super-build" of CKEditor 5 served via CDN contains a large set of plugins and multiple editor types.
            See https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/quick-start.html#running-a-full-featured-editor-from-cdn
        -->
        <script src="https://cdn.ckeditor.com/ckeditor5/34.1.0/super-build/ckeditor.js"></script>
        <!--
            Uncomment to load the Spanish translation
            <script src="https://cdn.ckeditor.com/ckeditor5/34.1.0/super-build/translations/es.js"></script>
        -->
        <script>
            // This sample still does not showcase all CKEditor 5 features (!)
            // Visit https://ckeditor.com/docs/ckeditor5/latest/features/index.html to browse all the features.
            CKEDITOR.ClassicEditor.create(document.getElementById("editor"), {
                // https://ckeditor.com/docs/ckeditor5/latest/features/toolbar/toolbar.html#extended-toolbar-configuration-format
                toolbar: {
                    items: [
                        'exportPDF','exportWord', '|',
                        'findAndReplace', 'selectAll', '|',
                        'heading', '|',
                        'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript', 'removeFormat', '|',
                        'bulletedList', 'numberedList', 'todoList', '|',
                        'outdent', 'indent', '|',
                        'undo', 'redo',
                        '-',
                        'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight', '|',
                        'alignment', '|',
                        'link', 'insertImage', 'blockQuote', 'insertTable', 'mediaEmbed', 'codeBlock', 'htmlEmbed', '|',
                        'specialCharacters', 'horizontalLine', 'pageBreak', '|',
                        'textPartLanguage', '|',
                        'sourceEditing'
                    ],
                    shouldNotGroupWhenFull: true
                },
                // Changing the language of the interface requires loading the language file using the <script> tag.
                // language: 'es',
                list: {
                    properties: {
                        styles: true,
                        startIndex: true,
                        reversed: true
                    }
                },
                // https://ckeditor.com/docs/ckeditor5/latest/features/headings.html#configuration
                heading: {
                    options: [
                        { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                        { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                        { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
                        { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
                        { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
                        { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
                        { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
                    ]
                },
                // https://ckeditor.com/docs/ckeditor5/latest/features/editor-placeholder.html#using-the-editor-configuration
                placeholder: 'Welcome to CKEditor 5!',
                // https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-family-feature
                fontFamily: {
                    options: [
                        'default',
                        'Arial, Helvetica, sans-serif',
                        'Courier New, Courier, monospace',
                        'Georgia, serif',
                        'Lucida Sans Unicode, Lucida Grande, sans-serif',
                        'Tahoma, Geneva, sans-serif',
                        'Times New Roman, Times, serif',
                        'Trebuchet MS, Helvetica, sans-serif',
                        'Verdana, Geneva, sans-serif'
                    ],
                    supportAllValues: true
                },
                // https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-size-feature
                fontSize: {
                    options: [ 10, 12, 14, 'default', 18, 20, 22 ],
                    supportAllValues: true
                },
                // Be careful with the setting below. It instructs CKEditor to accept ALL HTML markup.
                // https://ckeditor.com/docs/ckeditor5/latest/features/general-html-support.html#enabling-all-html-features
                htmlSupport: {
                    allow: [
                        {
                            name: /.*/,
                            attributes: true,
                            classes: true,
                            styles: true
                        }
                    ]
                },
                // Be careful with enabling previews
                // https://ckeditor.com/docs/ckeditor5/latest/features/html-embed.html#content-previews
                htmlEmbed: {
                    showPreviews: true
                },
                // https://ckeditor.com/docs/ckeditor5/latest/features/link.html#custom-link-attributes-decorators
                link: {
                    decorators: {
                        addTargetToExternalLinks: true,
                        defaultProtocol: 'https://',
                        toggleDownloadable: {
                            mode: 'manual',
                            label: 'Downloadable',
                            attributes: {
                                download: 'file'
                            }
                        }
                    }
                },
                // https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html#configuration
                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
                        }
                    ]
                },
                // The "super-build" contains more premium features that require additional configuration, disable them below.
                // Do not turn them on unless you read the documentation and know how to configure them and setup the editor.
                removePlugins: [
                    // These two are commercial, but you can try them out without registering to a trial.
                    // 'ExportPdf',
                    // 'ExportWord',
                    'CKBox',
                    'CKFinder',
                    'EasyImage',
                    // This sample uses the Base64UploadAdapter to handle image uploads as it requires no configuration.
                    // https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/base64-upload-adapter.html
                    // Storing images as Base64 is usually a very bad idea.
                    // Replace it on production website with other solutions:
                    // https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/image-upload.html
                    // 'Base64UploadAdapter',
                    'RealTimeCollaborativeComments',
                    'RealTimeCollaborativeTrackChanges',
                    'RealTimeCollaborativeRevisionHistory',
                    'PresenceList',
                    'Comments',
                    'TrackChanges',
                    'TrackChangesData',
                    'RevisionHistory',
                    'Pagination',
                    'WProofreader',
                    // Careful, with the Mathtype plugin CKEditor will not load when loading this sample
                    // from a local file system (file://) - load this site via HTTP server if you enable MathType
                    'MathType'
                ]
            });
        </script>
    </body>
</html>

# The CKEditor 5 superbuild limitations

While the superbuild is designed to provide as many of them as possible, some of these plugins may conflict with each other. Due to that fact, several of those needed to be excluded from the superbuild and are not available that way:

  • Watchdog
  • ContextWatchdog
  • Context
  • Title
  • Restricted editing

If you would like to quickly evaluate CKEditor 5 with premium features such as real-time collaboration, track changes and revision history then sign up for a 30-day free trial.

After you sign up, you will find in the customer dashboard the full code snippet to run the editor with premium features with all the necessary configurations.

# List of all plugins included in the CKEditor 5 superbuild

The table below presents the list of all plugins included in the superbuild. You may disable any of them using the removePlugins configuration option.

Plugin Documentation
Alignment https://ckeditor.com/docs/ckeditor5/latest/features/text-alignment.html
Autoformat https://ckeditor.com/docs/ckeditor5/latest/features/autoformat.html
AutoImage https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/images-inserting.html#inserting-images-via-pasting-url-into-editor
Base64UploadAdapter https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/base64-upload-adapter.html
BlockQuote https://ckeditor.com/docs/ckeditor5/latest/features/block-quote.html
Bold https://ckeditor.com/docs/ckeditor5/latest/features/basic-styles.html
CKBox https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/ckbox.html
CKFinder https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/ckfinder.html
CloudServices https://ckeditor.com/docs/ckeditor5/latest/api/module_cloud-services_cloudservices-CloudServices.html
Code https://ckeditor.com/docs/ckeditor5/latest/features/basic-styles.html
CodeBlock https://ckeditor.com/docs/ckeditor5/latest/features/code-blocks.html
Comments https://ckeditor.com/docs/ckeditor5/latest/features/collaboration/comments/comments.html
EasyImage https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/easy-image.html
ExportPdf https://ckeditor.com/docs/ckeditor5/latest/features/export-pdf.html
ExportWord https://ckeditor.com/docs/ckeditor5/latest/features/export-word.html
FindAndReplace https://ckeditor.com/docs/ckeditor5/latest/features/find-and-replace.html
FontBackgroundColor, FontColor, FontFamily, FontSize https://ckeditor.com/docs/ckeditor5/latest/features/font.html
GeneralHtmlSupport https://ckeditor.com/docs/ckeditor5/latest/features/general-html-support.html
Heading https://ckeditor.com/docs/ckeditor5/latest/features/headings.html
Highlight https://ckeditor.com/docs/ckeditor5/latest/features/highlight.html
HorizontalLine https://ckeditor.com/docs/ckeditor5/latest/features/horizontal-line.html
HtmlComment https://ckeditor.com/docs/ckeditor5/latest/features/general-html-support.html#html-comments
HtmlEmbed https://ckeditor.com/docs/ckeditor5/latest/features/html-embed.html
Image https://ckeditor.com/docs/ckeditor5/latest/features/images/images-overview.html
ImageCaption https://ckeditor.com/docs/ckeditor5/latest/features/images/images-captions.html
ImageResize https://ckeditor.com/docs/ckeditor5/latest/features/images/images-resizing.html
ImageStyle https://ckeditor.com/docs/ckeditor5/latest/features/images/images-styles.html
ImageToolbar https://ckeditor.com/docs/ckeditor5/latest/features/images/images-overview.html#image-contextual-toolbar
ImageUpload https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/image-upload.html
ImageInsert https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/images-inserting.html
Indent, IndentBlock https://ckeditor.com/docs/ckeditor5/latest/features/indent.html
Italic https://ckeditor.com/docs/ckeditor5/latest/features/basic-styles.html
Link, Autolink, LinkImage https://ckeditor.com/docs/ckeditor5/latest/features/link.html
List, ListProperties, TodoList https://ckeditor.com/docs/ckeditor5/latest/features/lists/lists.html
MathType https://ckeditor.com/docs/ckeditor5/latest/features/math-equations.html
MediaEmbed https://ckeditor.com/docs/ckeditor5/latest/features/media-embed.html
Mention https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html
PageBreak https://ckeditor.com/docs/ckeditor5/latest/features/page-break.html
Pagination https://ckeditor.com/docs/ckeditor5/latest/features/pagination/pagination.html
PasteFromOffice https://ckeditor.com/docs/ckeditor5/latest/features/pasting/paste-from-word.html
PictureEditing https://ckeditor.com/docs/ckeditor5/latest/api/module_image_pictureediting-PictureEditing.html
PresenceList https://ckeditor.com/docs/ckeditor5/latest/features/collaboration/real-time-collaboration/users-in-real-time-collaboration.html
RealTimeCollaborativeEditing, RealTimeCollaborativeComments, RealTimeCollaborativeRevisionHistory, RealTimeCollaborativeTrackChanges https://ckeditor.com/docs/ckeditor5/latest/features/collaboration/real-time-collaboration/real-time-collaboration.html
RemoveFormat https://ckeditor.com/docs/ckeditor5/latest/features/remove-format.html
RevisionHistory https://ckeditor.com/docs/ckeditor5/latest/features/revision-history/revision-history.html
StandardEditingMode https://ckeditor.com/docs/ckeditor5/latest/features/restricted-editing.html
SpecialCharacters https://ckeditor.com/docs/ckeditor5/latest/features/special-characters.html
Strikethrough https://ckeditor.com/docs/ckeditor5/latest/features/basic-styles.html
Subscript https://ckeditor.com/docs/ckeditor5/latest/features/basic-styles.html
Superscript https://ckeditor.com/docs/ckeditor5/latest/features/basic-styles.html
Table, TableToolbar, TableCellProperties, TableProperties, TableCaption, TableColumnResize https://ckeditor.com/docs/ckeditor5/latest/features/table.html
TextPartLanguage https://ckeditor.com/docs/ckeditor5/latest/features/language.html
TextTransformation https://ckeditor.com/docs/ckeditor5/latest/features/text-transformation.html
TrackChanges https://ckeditor.com/docs/ckeditor5/latest/features/collaboration/track-changes/track-changes.html
TrackChangesData https://ckeditor.com/docs/ckeditor5/latest/features/collaboration/track-changes/track-changes-data.html
Underline https://ckeditor.com/docs/ckeditor5/latest/features/basic-styles.html
WordCount https://ckeditor.com/docs/ckeditor5/latest/features/word-count.html
WProofReader https://ckeditor.com/docs/ckeditor5/latest/features/spelling-and-grammar-checking.html

What’s next?

Congratulations, you have just run your first CKEditor 5 instance!

You can also try another simple installation method, like the Online builder or building the editor from source.

And if you use Angular, React or Vue.js and want to integrate CKEditor 5 in your application, refer to the Frameworks section.