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
Using a dedicated class to handle this is more efficient, stable and convenient for developers. Separating this class decreases the workload of the
# 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.
# 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
tabindexattribute. 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.