# CKEditor 5 integration CKBox can be easily added to CKEditr 5 as a full-fledged asset manager. In this guide, we will focus on the simplest integration scenario, where both CKEditor 5 and CKBox are added to the web page using links from the CDN. To enable CKBox in your CKEditor 5 instance, add the CDN script and all the required configuration options to the object under the `ckbox` key. In the simplest scenario, CKBox requires only the `tokenUrl` option. ## Quick example For the purpose of this example, we will use the classic editor type, but there is more editor types to choose from! You can learn more about running CKEditor 5 from the CDN from [a dedicated guide](../../../../ckeditor5/latest/getting-started/installation/cloud/quick-start.md#installing-ckeditor-5-from-cdn) in the CKEditor 5 documentation. ```html

``` The demo sample below presents the result of this integration. Try pasting images from the 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 ` ## Configuration options Using the `ckbox` attribute, you can pass any of the available [configuration options](configuration-options.md) to a CKBox instance. As an example, let’s run both CKEditor 5 and CKBox in Spanish, and additionally let’s set the theme of CKBox to `dark`. ```html

``` As you can see in the example above, the `language` option for CKBox was omitted. This was intentional because by default, the language of CKBox will match the language of CKEditor 5, which has been already set to Spanish. Setting language again in `ckbox.language` would be superfluous in this case. Below you can see a live example of the configuration presented above. ### Plugin-specific options CKEditor 5 plugin for CKBox exposes two plugin-specific options. These options are used to configure the plugin and are not passed down to the CKBox instance. #### `defaultUploadCategories` When uploading the asset to CKBox by dropping or pasting it into the editor area, the asset by default lands into the first category that allows the asset extension. There might be cases where you would like to have more control over this, e.g. when two or more categories are configured to allow for the same file extension (please refer to the [Category management](../../features/administration-panel.md#category-management) guide to read more about category configuration options in the administration panel). The `defaultUploadCategories` option allows to explicitly define categories that should be used to upload the particular extensions. ```js ClassicEditor .create( { attachTo: document.querySelector( '#editor' ), ckbox: { tokenUrl: 'https://your.token.url', defaultUploadCategories: { // Category referenced by name Files: ['pdf', 'txt', 'zip'], // Category referenced by ID 'fdf2a647-b67f-4a6c-b692-5ba1dc1ed87b': ['jpg', 'png'] } } } ) .catch( error => { console.error( error ); } ); ``` As you can see in the example above, the category can be referenced either by its name or by ID. When referencing the category by its name, you will have to update this configuration if the category name is changed. Referencing the category by ID is a more bulletproof solution because the category ID always remains the same. The category ID can be found in the [_Asset categories_ section](../../features/administration-panel.md#category-management) of the administration panel. > **Note** > > Please note that extensions assigned to categories in `defaultUploadCategories` must be in sync with the extensions allowed for categories in the [_Asset categories_ section](../../features/administration-panel.md#category-management) of the administration panel. If the extension is not allowed in the category configuration in the administration panel, the file will not be uploaded. #### `ignoreDataId` When assets are inserted into the editor content, the CKBox plugin for CKEditor will by default add a `data-ckbox-resource-id`. The purpose of this tag is to bind the content to the CKBox asset and allow for basic asset usage tracking (i.e. checking which CKBox assets are used in your content). For example: ```html link ``` If you want to disable this feature, please set the `ignoreDataId` option to `true`. ```js ClassicEditor .create( { attachTo: document.querySelector( '#editor' ), ckbox: { tokenUrl: 'https://your.token.url', ignoreDataId: true } } ) .catch( error => { console.error( error ); } ); ``` ## Advanced integration To read about more advanced integration scenarios, please refer to the [CKBox file manager](https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/ckbox.html) article in the CKEditor 5 documentation. > **Note** > > Need more functionality? [Take a survey](https://surveys.hotjar.com/1d72aefc-0073-416d-9e70-b773458881b4) and help us develop CKBox to suit your needs better! --- Full index of the CKBox documentation: [llms.txt](../../../llms.txt)