CKEditor 4.16.1 with accessibility enhancements

The newest release of CKEditor 4 is here. It brings better accessibility, right on time for the Global Accessibility Awareness Day which is exactly the third Thursday of May! An important fix for mobile users that affected the use of content styles was introduced, making CKEditor 4 even more flexible and available for all kinds of platforms. And a nuisance in widget handling was also removed. Other small fixes improve the drag and drop feature, the way colors are handled and the pasting mechanism, so read on to find out what good comes with this minor release!

# Improvements for comments in HTML parser

As a part of the 4.16.1 release, we worked on improving the way the HTML parser handles HTML comments. The comment ending (--!>) was not correctly recognized as a proper comment end tag which made HTML in CKEditor 4 differ from what was expected by the HTML specification. After the release, it was discovered that this issue could also cause an XSS security vulnerability in the editor itself. We would like to thank Or Sahar (Checkmarx) for reporting this.

The fix introduced in version 4.16.1 covers this newly found vulnerability (reported as CVE-2021-33829) and thus updating your CKEditor 4 installation to version 4.16.1 is highly recommended.

This section was added on June 7, 2021 after the recent findings described above.

# Enhancements in editor accessibility

The Autocomplete plugin provides contextual completion functionality used to suggest predefined custom text based on user input. The very same mechanism is utilized by the Mentions plugin allowing to fill in the usernames after typing @. Thanks to changes implemented in the div-based and inline editor types, those inputs are now correctly recognized and announced by screen readers, making these functionalities accessible for people with sight impairments.

Similar changes were introduced in the Rich Combo plugin, which provides the drop-down functionality for tools like font, format or styles toolbar selectors. Thanks to the enhancements, these elements will now also be correctly recognized and announced by screen readers.

This is another step toward compliance with the a11y approach to software and web design and we are glad to be able to deliver the best editing solutions to all our possible end-users, making it easier for them to work.

# Enhancements for widgets

Two pesky problems were fixed in the way widgets are handled within the editor. Thanks to that, it is now possible to remove a paragraph directly before/after the widget with Delete/Backspace keys. This makes content edition and navigating the editor window with the keyboard much easier and convenient. We would like to thank our community member bunglegrind for providing this fix!

# Integrations

The newest release brings new versions of our official integrations. The CKEditor 4 WYSIWYG editor component for Angular 2.2.0 introduces the namespaceLoaded event fired when the CKEDITOR namespace is loaded, which can be used for its easier customization. Follow the integration changelog to stay up to date with the latest changes.

With the release of React integration version 1.4.1, some issues with the initial data propagation were fixed in the editor component. And this is not all yet, as works are advancing on the next major React integration version that will support the newest iteration of the framework, React v17. This is a lot of work, so it should be expected in about three months.

# Other improvements

Based on community feedback and best practices in web development, we always try to modernize the CKEditor 4 API to make working with it a pleasure for any developer. Celebrating the Global Accessibility Awareness Day we bring the improved usage of editor styles for Android browsers. A fix was introduced affecting the way focus is handled for mobile-based instances of CKEditor 4 and thus making the experience for mobile users equal to that of the desktop ones.

# Bugs fixed

Some more bug fixes coming with this release include:

• Pasted content got overwritten when repeatedly pasted in an initially empty editor with the ENTER_DIV mode. It is no longer so and the paste mechanism works correctly.
• Incorrect handling of drag & drop inside widgets and nested editables is no longer an issue.
• Event data set to false is no longer treated as an event cancelation.
• Incorrect values for RGBA/HSLA colors were corrected in the Color Dialog.

# ckeditor4-dev npm package deprecation

The ckeditor4-dev npm package was deprecated during the version 4.16.1 release. The last version available is 4.16.0. This is the development package that duplicates the code available on GitHub and is used rarely in such form so we concluded there is no sense in keeping it on npm too. However, if you were using it, the migration should be seamless. Instead of linking to the npm package in package.json file like:

"dependencies": {
"ckeditor4-dev": "^4.16.1"
}

Link to the ckeditor/ckeditor4 GitHub repository directly:

"dependencies": {
"ckeditor4-dev": “https://github.com/ckeditor/ckeditor4#4.16.1”
}

Please always keep in mind that this is a developer package version. Always use the ckeditor4 npm package for the production environment.

# Release notes

Check out the release notes and contact us for more information.

# 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 and contributing

Please report any new issues in the CKEditor 4 development repository and follow the instructions in the issue template. You can also contribute code and provide editor patches through pull requests.

# Support

Community support is available through Stack Overflow. Visit the resources page for additional options.