CKEditor 4.4 Released
We are proud to announce CKEditor 4.4, the latest major release for the CKEditor 4 line that contains plenty of new and exciting features, including the new Code Snippet plugin with syntax highlighting, changes to the style system that make it possible to add styles to widgets, and the ability to add links to images created with the Enhanced Image plugin as well as customize their figure element and alignment classes. In addition to this, the Advanced Content Filter system was expanded with blacklisting and wildcard support. Read on for an overview of all the new features that the CKEditor team has been working on for the past few months and also see the demo of new widget features!
New Code Snippet Plugin(s)
The new editor version brings the ability to insert rich code snippets with syntax highlighting directly into CKEditor content. This feature is implemented by the new, configurable Code Snippet plugin that by default uses the highlight.js library for syntax coloring. The new plugin is another showcase of our innovative Widget API and its capabilities.
The Code Snippet plugin can be fully customized to your needs — with the default library you can define the supported languages or choose the coloring theme. It is also possible to use another highlighting library which is best shown on the example of the second plugin from the code snippet family, namely Code Snippet GeSHi. As its name suggests, it is an extension of the basic plugin that implements the popular server-side GeSHi library. See more details in its documentation.
Both plugins are optional, so if you want to use them, you need to add them to your build with CKBuilder.
Widget Styling and Style System Changes
Thanks to the serious overhaul of the style system, styles can now be applied to widgets as well. The definition of a style which can be applied to a specific widget must contain two additional properties — type and widget. Additionally, lots of new methods and properties were introduced to the Widget API to make style handling fully customizable.
The editor style system sees some major changes as well. The new CKEDITOR.style.addCustomHandler() method can now be used to register custom style handlers and the editor instance should be passed to CKEDITOR.style methods to ensure full compatibility with other features (e.g. applying styles to widgets). We ensured backward compatibility though, so CKEDITOR.style will work even when the editor instance is not provided.
Enhanced Image Plugin Improvements
CKEditor 4.4 introduces some brilliant additions to the image widget provided by the Enhanced Image plugin. First of all, it is now possible to add links to captioned or aligned images. Apart from this, the new configuration options make it possible to set the class for captioned images (config.image2_captionedClass) and to to configure the way images are aligned with CSS classes instead of inline styles (config.image2_alignClasses).
Please note that the default class of captioned images has changed from caption to image, so once edited in CKEditor 4.4+, all existing images with caption (<figure class="caption">) will be filtered out unless the config.image2_captionedClass option is set to caption.
What's New in Widgets Demo
If you are interested in seeing how new widget features work in practice, see the little demo of CKEditor 4.4 widget changes that we prepared. It contains some further explanations as well as a working editor instance that includes the Enhanced Image and Code Snippet widgets with additional styling.
Advanced Content Filter Changes
Significant changes were also brought to our content filtering system. First of all, it is now possible not only to list content allowed in the editor (whitelist), but also create a blacklist that explicitly defines all elements that will not be allowed. The config.disallowedContent option can be used to trim down the automatically generated set of ACF rules that come from enabled editor features and has precedence over the config.allowedContent and config.extraAllowedContent settings.
In addition to that it is now also possible to use wildcards in allowed content rules.
Other Notable Changes
CKEditor 4.4 contains plenty of other new features and major changes, including the following:
- A new
editor.addContentsCss()method was introduced. It can be used for adding custom CSS files. - The new
CKEDITOR.tools.htmlDecode()method can be used for decoding HTML entities. - The new
CKEDITOR.tools.transparentImageDataproperty contains transparent image data to be used in CSS or as image source. - Setting data (including switching between modes) now creates a new undo snapshot. Additionally, the
editable.statusproperty and a newforceUpdateoption for theeditor.lockSnapshotevent were introduced. - The WebSpellChecker ans SCAYT plugins were updated to the latest version.
Changelog
Check out the What's New? page for the full list of changes.
Download
Download CKEditor now and upgrade your installation or use your favorite package manager to install it!
License
CKEditor is available under Open Source and Commercial licenses. Full details can be found on our license page.
Reporting Issues
Please use the CKEditor Development site to report issues and suggestions through tickets.
Support
Community support is available through our forums. Visit the support page for additional options.