# CKEditor 5 integration

<a id="how-ckbox-enhances-ckeditor-5">

## How CKBox enhances CKEditor 5

CKBox replaces the basic [CKEditor 5](../../../ckeditor5/latest/features/file-management/ckbox.md) image upload feature. It provides the image and file upload and management capabilities:

* Enables image uploads through drag & drop and paste from the clipboard.
* Transforms the _Image_ toolbar button, allowing the user to quickly upload and insert an image without opening the CKBox UI.
* Adds separate dedicated toolbar buttons to open the CKBox UI to manage and use uploaded files and to edit images from withing CKBox.
* Also adds a separate dedicated image contextual toolbar button for CKBox image editing.

With CKBox you no longer need to write server-side code to upload and scale images or manage uploaded files.

<a id="demo">

## Demo

The code snippet below presents an integration of CKBox with a rich version of CKEditor 5, inluding a lot but not all available features of the editor. It provides a complex solution for handling images. Try pasting images from the clipboard (`Ctrl`/`Cmd` + `v`)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 a CKBox window. Then 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 the description set in its properties in CKBox, the description will be automatically used as an `alt` attribute of the image embedded in the editor.

Use the image contextual toolbar edit button on a selected image to invoke the image editing pane straight from the editor.

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

Below, you can find the code of the CKBox integration with CKEditor 5 presented above.

```html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.ckeditor.com/ckeditor5/48.5.2/ckeditor5.umd.js"></script>
		<script src="https://cdn.ckeditor.com/ckeditor5/48.5.2/ckeditor5-premium-features.umd.js"></script>
		<script src="https://cdn.ckbox.io/ckbox/2.13.1/ckbox.js"></script>
		<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/48.5.2/ckeditor5.css" />
		<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/48.5.2/ckeditor5-premium-features.css" />
		<link rel="stylesheet" href="https://cdn.ckbox.io/ckbox/2.13.1/styles/themes/lark.css">
	</head>
	<body>
		<style>
			#container {
				width: 1000px;
				margin: 20px auto;
			}
			.ck-editor__editable[role="textbox"] {
				/* editing area */
				min-height: 200px;
			}
			.ck-content .image {
				/* block images */
				max-width: 80%;
				margin: 20px auto;
			}
		</style>
		<div id="container">
			<div id="editor">
			</div>
		</div>
		<script>
			// This sample still does not showcase all CKEditor 5 features (!)
			// Visit https://ckeditor.com/docs/ckeditor5/latest/features/index.html to browse all the features.
			const {
				ClassicEditor,
				Autoformat,
				Bold,
				Italic,
				Underline,
				BlockQuote,
				Base64UploadAdapter,
				CloudServices,
				CKBox,
				CKBoxImageEdit,
				Essentials,
				FindAndReplace,
				Font,
				Heading,
				Image,
				ImageCaption,
				ImageResize,
				ImageStyle,
				ImageToolbar,
				ImageUpload,
				PictureEditing,
				Indent,
				IndentBlock,
				Link,
				List,
				MediaEmbed,
				Mention,
				Paragraph,
				PasteFromOffice,
				SourceEditing,
				Table,
				TableColumnResize,
				TableToolbar,
				TextTransformation,
				HtmlEmbed,
				CodeBlock,
				RemoveFormat,
				Code,
				SpecialCharacters,
				HorizontalLine,
				PageBreak,
				TodoList,
				Strikethrough,
				Subscript,
				Superscript,
				Highlight,
				Alignment
			} = CKEDITOR;

			const {
				ExportPdf,
				ExportWord
			} = CKEDITOR_PREMIUM_FEATURES;

			ClassicEditor.create( {
				attachTo: document.querySelector( '#editor' ),
				root: {
					placeholder: 'Welcome to CKEditor 5 + CKBox!'
				},
				licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
				plugins: [
					Autoformat,
					BlockQuote,
					Bold,
					CloudServices,
					CKBox,
					Essentials,
					FindAndReplace,
					Font,
					Heading,
					Image,
					ImageCaption,
					ImageResize,
					ImageStyle,
					ImageToolbar,
					ImageUpload,
					Base64UploadAdapter,
					Indent,
					IndentBlock,
					Italic,
					Link,
					List,
					MediaEmbed,
					Mention,
					Paragraph,
					PasteFromOffice,
					PictureEditing,
					SourceEditing,
					Table,
					TableColumnResize,
					TableToolbar,
					TextTransformation,
					Underline,
					HtmlEmbed,
					CodeBlock,
					RemoveFormat,
					Code,
					SpecialCharacters,
					HorizontalLine,
					PageBreak,
					TodoList,
					Strikethrough,
					Subscript,
					Superscript,
					Highlight,
					Alignment,
					CKBoxImageEdit,
					ExportPdf,
					ExportWord
				],
				toolbar: {
					items: [
						'undo', 'redo',
						'|',
						'sourceEditing',
						'|',
						'exportPDF','exportWord',
						'|',
						'findAndReplace', 'selectAll',
						'|',
						'heading',
						'|',
						'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor',
						'-',
						'bold', 'italic', 'underline',
						{
							label: 'Formatting',
							icon: 'text',
							items: [ 'strikethrough', 'subscript', 'superscript', 'code', '|', 'removeFormat' ]
						},
						'|',
						'specialCharacters', 'horizontalLine', 'pageBreak',
						'|',
						'link', 'insertImage', 'ckbox', 'ckboxImageEdit', 'insertTable',
						{
							label: 'Insert',
							icon: 'plus',
							items: [ 'highlight', 'blockQuote', 'mediaEmbed', 'codeBlock', 'htmlEmbed' ]
						},
						'alignment',
						'|',
						'bulletedList', 'numberedList', 'todoList',
						{
							label: 'Indents',
							icon: 'plus',
							items: [ 'outdent', 'indent' ]
						}
					],
					shouldNotGroupWhenFull: true
				},
				list: {
					properties: {
						styles: true,
						startIndex: true,
						reversed: true
					}
				},
				// https://ckeditor.com/docs/ckeditor5/latest/features/headings.html#configuration
				heading: {
					options: [
						{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
						{ model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
						{ model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
						{ model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
						{ model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
						{ model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
						{ model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
					]
				},
				image: {
					resizeOptions: [
						{
							name: 'resizeImage:original',
							label: 'Default image width',
							value: null
						},
						{
							name: 'resizeImage:50',
							label: '50% page width',
							value: '50'
						},
						{
							name: 'resizeImage:75',
							label: '75% page width',
							value: '75'
						}
					],
					toolbar: [
						'imageTextAlternative',
						'toggleImageCaption',
						'|',
						'imageStyle:inline',
						'imageStyle:wrapText',
						'imageStyle:breakText',
						'|',
						'resizeImage'
					],
				},
				link: {
					addTargetToExternalLinks: true,
					defaultProtocol: 'https://'
				},
				table: {
					contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ],
				},
				ckbox: {
					// You need to provide your own token endpoint here
					// Sign up to CKBox to get one: https://ckeditor.com/ckbox/
					tokenUrl: 'https://api.ckbox.io/token/demo',
					theme: 'lark'
				}
			} )
			.then( ( editor ) => {
				window.editor = editor;
			} )
			.catch( ( error ) => {
				console.error( error.stack );
			} );

		</script>
	</body>
</html>
```

To read more about the options available when integrating CKEditor and CKBox, please refer to the [CKEditor integration guide](../guides/configuration/ckeditor-integration.md).

> **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)
