« See all

CKEditor 4.16 with improved image pasting, High Contrast support and a new color API

We are happy to announce the release of CKEditor 4.16. Apart from the security fixes, we focused on improving image pasting as well as the new color API and extended High Contrast support. There are also a few other bug fixes that will enrich your CKEditor 4 WYSIWYG editing experience.

# Security comes first

Recently, we have been contacted by the GitHub Security Lab regarding ReDoS vulnerabilities in the project. After investigating the issue and reviewing the entire code base, we have identified two plugins susceptible to this type of attack and patched them.

CKEditor 4.16 fixes a ReDoS vulnerability in the Autolink plugin (CVE-2021-26272). Prior to this version, it was possible to execute the attack if the victim pasted a specially crafted URL-like text into the editor and pressed Enter or Space.

CKEditor 4.16 also fixes a ReDoS vulnerability in the Advanced Tab for Dialogs plugin (CVE-2021-26271). A ReDoS-type attack could be executed in prior versions if the user pasted a specially crafted text into the Styles dialog.

Even though these are low impact issues only affecting the victim’s browser with no risk of data leakage, an upgrade is highly recommended!

# Improved image pasting from Word

Pasting images from other applications such as Word or LibreOffice is always challenging as the copied content that you can find in the clipboard sometimes does not accurately reflect what you would like to have in your editor content. Still, this is a crucial area of any WYSIWYG editor and we are happy to report that we managed to resolve a few annoyances that bothered our users.

As a result of our changes, an image in an unsupported format no longer breaks other images when pasted from Word or LibreOffice. Additionally, we added support for pasting images from Word in Safari.

# Improved High Contrast Mode for better accessibility

Addressing the needs of all our users has always been a top priority for the CKEditor team. An annoying error has been reported by the community, making some of the interface buttons hardly visible in the High Contrast Mode. This is now fixed so you can enjoy using the High Contrast Mode in all browsers that support it (Firefox, Internet Explorer and Edge).

# Better color handling with a new API

The newest release brings a whole new CKEDITOR.tools.color API to manage color format manipulation in CKEditor 4.

The newly introduced API brings the two-way conversion which allows converting between various color formats. The conversion is possible between “named colors” (like “red”, “blue”, etc.), HEX, RGB, RGBA, HSL and HSLA. All color formats are normalized so the output is always consistent. This process also allows for defaulting to #000 if the color code is invalid or unrecognized. The color string can now be called explicitly like color.toHex() or color.toRGBA().

Using a dedicated class to handle this is more efficient, stable and convenient for developers. Separating this class decreases the workload of the CKEDITOR.tools class.

# WebSpellChecker Dialog EOL

We would like to announce that the WebSpellChecker Dialog (WSC) plugin that provides spell checking in a dialog window will reach its End of Life on December 31, 2021. This means it will not be supported any longer and may stop working after this date. We strongly encourage you to choose one of the other available spell checking solutions — Spell Check As You Type (SCAYT) or WProofreader.

Are you ready to try the modern approach to spell and grammar checking? WProofreader is an innovative proofreading tool that combines the functionality of “spell check as you type” and “spell check in a dialog” in a modern UI. Spelling and grammar suggestions are available on hover with no clicking needed — as visible below.

WProofreader, an excellent and modern spell checking solution to replace WebSpellChecker Dialog
WProofreader, an excellent and modern spell checking solution to replace WebSpellChecker Dialog

# Other improvements

Addressing our community’s feedback, we keep on enhancing the CKEditor 4 interface to make it more convenient and comfortable.

  • There were some improvements in the Autocomplete panel used by the Mentions and Emoji plugins. The panel will now be additionally positioned related to the browser viewport to be always fully visible as we introduced smart positioning (#3582).
  • An option was added to remove an iframe created with the IFrame Dialog plugin from the sequential keyboard navigation using the tabindex attribute. Thanks to Timo Kirkkala (#4388)!

# Integrations with React, Angular and Vue.js

We have put significant work into making the API of all our WYSIWYG editor integrations consistent by introducing the ckeditor4-integrations-common package which holds common functions. It is already used by the React and Vue integrations. It has also enabled the introduction of the onNamespaceLoaded property for React as well as the namespaceloaded event for Vue integrations. These are loaded prior to the CKEDITOR namespace, which allows for more flexible integrations and more customizations possible to be introduced.

# 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.

Share this post

Linkedin Reddit
CKEditor 5 v25.0.0 with flexible annotations, improved text blocks handling and performance fixes
Feature of the month - Collaborative writing in CKEditor 5