@ckeditor/ckeditor5-build-balloon-block

CKEditor 5 balloon block editor build

The build of CKEditor 5 featuring the balloon and block toolbars. Read more about the balloon block editor build and see the demo.

Documentation

See:

• Installation for how to install this package and what it contains.
• Editor lifecycle for how to create an editor and interact with it.
• Configuration for how to configure the editor.
• Creating custom builds for how to customize the build (configure and rebuild the editor bundle).

Quick start

First, install the build from npm:

npm install --save @ckeditor/ckeditor5-build-balloon-block

And use it in your website:

<div id="editor">
	<p>This is the editor content.</p>
</div>
<script src="./node_modules/@ckeditor/ckeditor5-build-balloon-block/build/ckeditor.js"></script>
<script>
	BalloonEditor
		.create( document.querySelector( '#editor' ) )
		.then( editor => {
			window.editor = editor;
		} )
		.catch( error => {
			console.error( 'There was a problem initializing the editor.', error );
		} );
</script>

Or in your JavaScript application:

import BalloonEditor from '@ckeditor/ckeditor5-build-balloon-block';

// Or using the CommonJS version:
// const BalloonEditor = require( '@ckeditor/ckeditor5-build-balloon-block' );

BalloonEditor
	.create( document.querySelector( '#editor' ) )
	.then( editor => {
		window.editor = editor;
	} )
	.catch( error => {
		console.error( 'There was a problem initializing the editor.', error );
	} );

Note: If you are planning to integrate CKEditor 5 deep into your application, it is actually more convenient and recommended to install and import the source modules directly (like it happens in ckeditor.js). Read more in the Advanced setup guide.

Note: You can configure the block toolbar items using the config.blockToolbar option.

License

Licensed under a dual-license model, this software is available under:

• the GNU General Public License Version 2 or later,
• or commercial license terms from CKSource Holding sp. z o.o.

For more information, see: https://ckeditor.com/legal/ckeditor-licensing-options.

Changelog

44.3.0 (March 5, 2025)

We are happy to announce the release of CKEditor 5 v44.3.0.

Release Highlights

This release brings a couple of minor improvements and bug fixes:

• Link Decorators: We fixed the behavior of the multiple manual link decorators that set the rel attribute. The fix happened so deep in the engine that we improved the overall performance of the editor slightly as well.
• Added a new EmptyBlock plugin: From now on, new plugin prevents adding   to the output data of blocks, works similarly to the fillEmptyBlocks configuration in CKEditor 4.
• Support for the <hr> element in the General HTML Support plugin enhanced: attributes of the <hr> element are now properly preserved if configuration allows it.
• Emoji: We enhanced emoji support for better compatibility with users' older devices.

For more details, see the changelog below.