CKEditor Ecosystem Documentation
Search
Home/CKBox/Getting started

Quick start

CKBox is a commercial product and you need to obtain a license to use it.

In this guide, you will find the quickest and easiest way to run ready-to-use CKBox application. Please refer to Integrations section to check how CKBox can be integrated using npm with popular JavaScript frameworks.

# CDN

Using a build served from the CDN is the simplest and fastest way of embedding CKBox in your application. Additionally, all the scripts served from the CDN are loaded faster, as they are hosted on multiple servers around the globe, shortening the response time.

To start using CKBox on your website, embed the following <script> tag in the HTML of the page:

<script src="https://cdn.ckbox.io/ckbox/2.5.1/ckbox.js"></script>

Quick implementation example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script src="https://cdn.ckbox.io/ckbox/2.5.1/ckbox.js"></script>
    </head>
    <body>
        <div id="ckbox"></div>
        <script>
            // You must provide a valid token URL in order to use the application
            // After registering to CKBox, the fastest way to try out CKBox is to use the development token endpoint:
            // https://ckeditor.com/docs/ckbox/latest/guides/configuration/authentication.html#token-endpoint
            CKBox.mount(document.getElementById('ckbox'), {
                tokenUrl: 'https://your.token.url'
            });
        </script>
    </body>
</html>

Please refer to our repo with examples for full code sample.

# Integration with CKEditor

The integration example presented below presents only a limited set of CKEditor features. To see an integration with a full-featured editor, please refer to the CKEditor integration example.

The code snippet below presents the simplest scenario of integration of CKEditor and CKBox. To read more about the integration, please refer to the CKEditor integration guide.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script src="https://cdn.ckbox.io/ckbox/2.5.1/ckbox.js"></script>
        <link rel="stylesheet" href="https://cdn.ckbox.io/ckbox/2.5.1/styles/themes/lark.css">
        <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/42.0.0/ckeditor5.css" />
    </head>
    <body>
        <div id="editor"></div>

        <script type="importmap">
            {
                "imports": {
                    "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/42.0.0/ckeditor5.js",
                    "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/42.0.0/"
                }
            }
        </script>

        <script type="module">
            import {
                ClassicEditor,
                CKBox,
                Bold,
                CloudServices,
                Essentials,
                Font,
                Image,
                ImageUploadEditing,
                ImageUploadProgress,
                Italic,
                LinkEditing,
                Paragraph,
                PictureEditing
            } from 'ckeditor5';

            ClassicEditor
                .create( document.querySelector( '#editor' ), {
                    plugins: [
                        ClassicEditor,
                        CKBox,
                        Bold,
                        CloudServices,
                        Essentials,
                        Font,
                        Image,
                        ImageUploadEditing,
                        ImageUploadProgress,
                        Italic,
                        LinkEditing,
                        Paragraph,
                        PictureEditing
                    ],
                    ckbox: {
                        tokenUrl: 'https://your.token.url',
                        theme: 'lark'
                    },
                    toolbar: [
                        'ckbox', '|', 'undo', 'redo', '|', 'bold', 'italic', '|',
                        'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
                    ],
                } )
                .catch( error => {
                    console.error( error );
                } );
        </script>
    </body>
</html>

The sample below presents the result of the integration. Try pasting images from clipboard directly into the editing area as well as dropping images — the files will be saved on the fly by CKBox.

You can use the toolbar button to open the CKBox dialog window. There you can manage your files or choose an asset that should be added to the edited content. The image embedded in the editor this way will produce a highly optimized <picture> tag. If the image has a description set in its properties in CKBox, the description will be automatically used as an alt attribute of the image embedded in the editor.

All the samples in this documentation use a demo environment of CKBox that is periodically cleared. Do not try to use it in your application, otherwise the uploaded files will be permanently deleted.