guideQuick start

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

# 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/1.1.1/ckbox.js"></script>

Quick implementation example:

<html>
    <head>
        <meta charset="UTF-8" />
        <script src="https://cdn.ckbox.io/CKBox/1.1.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>

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

<html>
    <head>
        <meta charset="UTF-8" />
        <script src="https://cdn.ckeditor.com/ckeditor5/34.2.0/classic/ckeditor.js"></script>
        <script src="https://cdn.ckbox.io/CKBox/1.1.1/ckbox.js"></script>
    </head>
    <body>
        <div id="editor"></div>
        <script>
            ClassicEditor
                .create( document.querySelector( '#editor' ), {
                    ckbox: {
                        tokenUrl: 'https://your.token.url',
                    },
                    toolbar: [
                        'ckbox', 'imageUpload', '|', 'heading', '|', 'undo', 'redo', '|', 'bold', 'italic', '|',
                        'blockQuote', 'indent', 'link', '|', 'bulletedList', 'numberedList'
                    ],
                } )
                .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.