CKEditor Ecosystem Documentation
Search
Home/CKBox/Getting started

guideInstallation

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

CKBox is distributed as an npm package, Zip package, and CDN download. In this guide, you will find the quickest and easiest way to run ready-to-use CKBox application.
Visit our GitHub samples repo to explore more on how to integrate CKBox with your app.

# CDN

Using a build served from the CDN is the simplest 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.

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

Quick example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script src="https://cdn.ckbox.io/ckbox/2.4.0/ckbox.js"></script>
    </head>
    <body>
        <div id="ckbox"></div>
        <script>
            CKBox.mount(document.getElementById('ckbox'), {
                // 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/2.4.0/guides/configuration/authentication.html#development-token-endpoint
                tokenUrl: 'https://your.token.url'
            });
        </script>
    </body>
</html>

# npm

To install CKBox as an NPM dependency, run:

npm install ckbox

Then you can instantiate CKBox in your code as shown below.

import * as CKBox from 'ckbox';
import 'ckbox/dist/styles/ckbox.css';

CKBox.mount(document.querySelector('#ckbox'), {
    tokenUrl: 'https://your.token.url'
});

Check out our code sample on how to use CKBox in your app.

# Zip package

⬇ Download CKBox Zip package (v2.4.0)

Unzip the package to the desired location and attach the ckbox.js script on your webpage.

Quick example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script src="ckbox/ckbox.js"></script>
    </head>
    <body>
        <div id="ckbox"></div>
        <script>
            CKBox.mount(document.getElementById('ckbox'), {
                tokenUrl: 'https://your.token.url'
            });
        </script>
    </body>
</html>

The Zip package includes a preconfigured index.html that will work if you configure the tokenUrl option, which has been intentionally left empty.

# On-premises

CKBox can also be installed on-premises. The backend part of the application is installed and run on the customer’s in-house servers and computing infrastructure, including a private cloud. It contains all the features of the CKBox file manager available in the SaaS version.

Please refer to the CKBox On-premises Documentation to read about the system requirements, configuration and supported data storages.