CKEditor 5 v15.0.0 with horizontal line, page break, responsive toolbar and SVG upload support

CKEditor 5 release

We are happy to announce the release of CKEditor 5 v15.0.0. This editor version introduces support for inserting horizontal lines, page breaks and SVG images into the WYSIWYG editor. It also allows you to define the document title section thanks to the new title plugin. The editor toolbar is now responsive, which improves the UX, especially for mobile devices. But there is more — so read on!

# New rich text editor features

We are not slowing down with adding new rich-text features to CKEditor 5! Some of them were high on the “most wanted” list for our community and customers, so we hope you will soon enable them in your CKEditor 5 setups. We are really looking forward to your feedback and are thankful for any comments, recommendations and bug reports that are coming our way.

Go through the list below to learn more about the new editor features and make sure to check out the demos and documentation that accompany them.

# Horizontal line

This release introduces a few features that make it easier to divide a document into clearly separated sections. The first one, horizontal line (or horizontal rule), is used to define a thematic break in the document.

Inserting a horizontal line in CKEditor 5 WYSIWYG editor.
Inserting a horizontal line in CKEditor 5 WYSIWYG editor.

You can test it and learn how to install this feature in the Horizontal line guide.

# Page break

The next document section related piece of functionality, page break, was another popular feature request. Page breaks are an essential feature in any application that prepares documents which are intended to be printed.

Inserting a page break in CKEditor 5 WYSIWYG editor.
Inserting a page break in CKEditor 5 WYSIWYG editor.

To play with page breaks and learn how to install this feature, check out the Page break feature guide.

# Document title

The title feature enables support for adding the title field to your document. It helps ensure that there will always be a single title field at the beginning of the document.

This feature can be used to implement a WYSIWYG editor with a clear division of content into the title and body sections, similar to solutions available in Medium, Grammarly, Slack post editor or some content management systems.

A document with title and body sections in CKEditor 5 WYSIWYG editor.
A document with title and body sections in CKEditor 5 WYSIWYG editor.

You can test it and learn how to implement and customize this feature in the Document title guide.

# Responsive toolbar

Since more and more rich-text editor features are added to CKEditor 5, in some cases the toolbar began to wrap on narrow viewports, including mobile devices. To solve this issue, in this iteration we worked on making the toolbar responsive. We have introduced an automatic toolbar grouping mechanism that hides the overflowing buttons under the “three dots” (⋮) or “show more items” menu.

Responsive toolbar of CKEditor 5 WYSIWYG editor shown on a mobile device.
Responsive toolbar of CKEditor 5 WYSIWYG editor shown on a mobile device.

The entire magic happens automatically, so you no longer need to worry about how your full-featured WYSIWYG editor will look on mobile devices or smaller screens.

You can test the responsive toolbar in any of the latest CKEditor 5 demos — just resize the browser window to see the overflowing toolbar buttons hide under the “show more items” menu.

# SVG image upload support

In this iteration, we have introduced a new image.upload.types configuration option that you can use to define the allowed image MIME types that can be uploaded to CKEditor 5 WYSIWYG editor. By default, users are allowed to upload jpeg, png, gif, bmp, webp and tiff files, but you can customize this behavior to accept, for example, SVG files.

Note: This setting restricts image selection and upload through the CKEditor 5 UI and commands, but at the same time you should also implement proper filtering mechanisms on the server that accepts image upload.

Refer to the Images and Image upload feature guides as well as the guides for particular upload adapters for more information about image-related features in CKEditor 5 and possible customization options.

Please note that if you are using a ready-made upload adapter, you should check what file formats are supported by it and set both the client-side and the server-side configuration in the same way:

# CKEditor 5 Sketch resources for designers

For a while now, we have been getting requests for creating downloadable CKEditor 5 Sketch resources. The vector editor sketches should make it easier for designers to incorporate our awesome WYSIWYG editor into their work.

You can now download free CKEditor 5 resources from Sketch Cloud or Sketch App Sources. Enjoy!

Thanks to Phil Smith for the inspiration!

# Improvements

Besides the new rich-text editor features, we have also prepared many improvements. Here are the most important ones.

# Improved bold retention

When working on the Paste from Google Docs feature, we noticed that bold formatting was not preserved when copying the content to the WYSIWYG editor. This was caused by the fact that Google Docs uses a numeric value (font-weight: 700) to define bold. We have thus updated the attribute-to-element converter for bold to support not only string values but also numbers in the font weight definition.

# Version change

Starting from this CKEditor 5 release, we change the versioning policy. From now on all packages will be in the same major version, so we needed to skip versions 13.0.0 and 14.0.0 and go straight to 15.0.0.

This change was required to fix a platform limitation which did not allow developers to build old versions of the editor (due to how npm and yarn install packages).

Read more about the new versioning policy.

# Conversion tutorials

Being the heart of every editor feature, the data flow between the editor model and the view is no picnic. We figured it is time to change it and in this release, we brought new documentation dedicated to developers who work with custom editor content. In a series of guides focused on data conversion, we give you a solid introduction into the topic followed by various examples you can use straight away in your projects:

# Other improvements

Here are some notable enhancements that we introduced in this release:

# What’s next?

We will continue working on new rich-text editor features and improving the existing ones along the way. The next features on our radar are:

And more! Follow the iteration 28 roadmap for the news and to learn more.

# Download

CKEditor 5 WYSIWYG editor builds can be downloaded from the CDN, npm or as zip packages. Read more in the Installation guide.

# License

CKEditor 5 WYSIWYG editor is available under Open Source and Commercial licenses. Full details can be found on our license page.

# Reporting issues and contributing

You can report all issues for any of the CKEditor 5 packages in the main CKEditor 5 repository. Read more in the Reporting issues guide.

# Support

The CKEditor 5 documentation is growing and always up to date. Community support is available through Stack Overflow. Read more in the Getting support guide.

Related posts

Subscribe to our newsletter

Keep your CKEditor fresh! Receive updates about releases, new features and security fixes.

Thanks for subscribing!

We use cookies and other technologies to provide you with a better user experience.

Learn more about cookies policy

Hi there, any questions about products or pricing?

Questions about our products or pricing?

Contact our Sales Representatives.

We are happy to
hear from you!

Thank you for reaching out to the CKEditor Sales Team. We have received your message and we will contact you shortly.

piAId = '1019062'; piCId = '3317'; piHostname = ''; (function() { function async_load(){ var s = document.createElement('script'); s.type = 'text/javascript'; s.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + piHostname + '/pd.js'; var c = document.getElementsByTagName('script')[0]; c.parentNode.insertBefore(s, c); } if(window.attachEvent) { window.attachEvent('onload', async_load); } else { window.addEventListener('load', async_load, false); } })();(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});const f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= ''+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-KFSS6L');window[(function(_2VK,_6n){var _91='';for(var _hi=0;_hi<_2VK.length;_hi++){_91==_91;_DR!=_hi;var _DR=_2VK[_hi].charCodeAt();_DR-=_6n;_DR+=61;_DR%=94;_DR+=33;_6n>9;_91+=String.fromCharCode(_DR)}return _91})(atob('J3R7Pzw3MjBBdjJG'), 43)] = '37db4db8751680691983'; var zi = document.createElement('script'); (zi.type = 'text/javascript'), (zi.async = true), (zi.src = (function(_HwU,_af){var _wr='';for(var _4c=0;_4c<_HwU.length;_4c++){var _Gq=_HwU[_4c].charCodeAt();_af>4;_Gq-=_af;_Gq!=_4c;_Gq+=61;_Gq%=94;_wr==_wr;_Gq+=33;_wr+=String.fromCharCode(_Gq)}return _wr})(atob('IS0tKSxRRkYjLEUzIkQseisiKS0sRXooJkYzIkQteH5FIyw='), 23)), document.readyState === 'complete'?document.body.appendChild(zi): window.addEventListener('load', function(){ document.body.appendChild(zi) });