CKEditor Ecosystem Documentation
Search
Home/CKBox/Getting started

Other

There are no limitations as to front-end frameworks with which CKBox can be integrated. Following code snippets will help you use it with any technology.

See the list of the supported configuration options that will help you setup CKBox.

# ECMAScript export

Import CKBox by using named import syntax of ECMAScript modules. Mount an instance of CKBox by providing a reference to a DOM element.

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

const app = document.querySelector("#app");

const { unmount } = CKBox.mount(app, {
    dialog: true,
    tokenUrl: "https://your.token.url",
});

// A cleanup function invoked at some point in the client app's lifecycle.
function cleanup() {
    // Unmount CKBox instance if it's not needed anymore.
    // Note that CKBox will unmount automagically on closing the dialog or on choosing an asset.
    unmount();
}

# UMD file

CKBox UMD file is a standalone, batteries-included build. It contains all necessary dependencies and the default styling. While typically UMD builds are referenced directly in script elements as shown here, they can be as well used in other scenarios, e.g. when using ECMAScript modules.

While UMD build is easy to integrate, it might not be an optimal choice from bundle size perspective. It’s because bundlers such as Webpack or Rollup will never resolve CKBox’s dependencies and thus deduplication of modules won’t be possible. Therefore, we advise to use ECMAScript export of CKBox if possible. However, UMD build might come in handy in some scenarios:

  • Client app depends on an older version of React (see example)
  • CKBox must be used in environment relying on CommonJS modules (e.g. server-side rendering in Node.js)

Import UMD build only once in your app. As a result, CKBox will be exposed on the global object. Create an instance of CKBox by providing a reference to a DOM element.

// There is no need to import stylesheet separately when using UMD build.
// Import this file only once in your app.
import "ckbox/dist/ckbox.js";

const app = document.querySelector("#app");

// `CKBox` is available globally.
CKBox.mount(app, {
    dialog: true,
    tokenUrl: "https://your.token.url",
});