CKEditor 5 integration
# How CKBox enhances CKEditor 5
CKBox replaces the basic CKEditor 5 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.
# Demo
The code snippet below presents the integration of CKBox with a full-featured version of CKEditor using the CKEditor’s super build. This is a special type of predefined CKEditor build, which includes all the available plugins and features. Because of this, when using the super build, you will have to disable the CKEditor features which you do not want to use.
The sample below presents the result of the integration with the super build of CKEditor. 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 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.
Below, you can find the code of the CKBox integration with the CKEditor super build presented above.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.ckbox.io/ckbox/2.4.0/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 src="https://cdn.ckbox.io/ckbox/2.4.0/ckbox.js"></script>
<!--
The "super-build" of CKEditor 5 served via CDN contains a large set of plugins and multiple editor types.
See https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/quick-start.html#running-a-full-featured-editor-from-cdn
-->
<script src="https://cdn.ckeditor.com/ckeditor5/41.3.0/super-build/ckeditor.js"></script>
<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.
CKEDITOR.ClassicEditor.create(document.getElementById("editor"), {
// https://ckeditor.com/docs/ckeditor5/latest/features/toolbar/toolbar.html#extended-toolbar-configuration-format
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', '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' }
]
},
// https://ckeditor.com/docs/ckeditor5/latest/features/editor-placeholder.html#using-the-editor-configuration
placeholder: 'Welcome to CKEditor 5 + CKBox!',
ckbox: {
// You need to provide your own token endpoint here
// Sign up to CKBox to get one: https://ckeditor.com/ckbox/
tokenUrl: 'https://your.token.url',
theme: 'lark'
},
// The "super-build" contains more premium features that require additional configuration, disable them below.
// Do not turn them on unless you reqd the documentation and know how to configure them and setup the editor.
removePlugins: [
// These two are commercial, but you can try them out without registering to a trial.
// 'ExportPdf',
// 'ExportWord',
'EasyImage',
'RealTimeCollaborativeComments',
'RealTimeCollaborativeTrackChanges',
'RealTimeCollaborativeRevisionHistory',
'PresenceList',
'Comments',
'TrackChanges',
'TrackChangesData',
'RevisionHistory',
'Pagination',
'FormatPainter',
'SlashCommand',
'TableOfContents',
'Template',
'DocumentOutline',
'PasteFromOffice',
'PasteFromOfficeEnhanced',
'WProofreader',
// Careful, with the Mathtype plugin CKEditor will not load when loading this sample
// from a local file system (file://) - load this site via HTTP server if you enable MathType
'MathType'
]
});
</script>
</body>
</html>
To read more about the options available when integrating CKEditor and CKBox, please refer to the CKEditor integration guide.
Need more functionality? Take a survey and help us develop CKBox to suit your needs better!