We are happy to announce the release of CKEditor 4.14 that contains new features, bug fixes, and API improvements. Most notably, this WYSIWYG editor version introduces support for pasting from LibreOffice. It also includes security fixes for the HTML data processor and the WebSpellChecker Dialog plugin, so an upgrade is highly recommended.
# Paste from LibreOffice Writer
CKEditor 4 is famous for its best-in-class support for pasting content from Word, Excel and Google Docs. The Paste from LibreOffice plugin lets you copy your content from LibreOffice Writer, clean up the resulting source HTML, and add it to your WYSIWYG editor content. What is extremely important, though, is that CKEditor 4 lets you preserve the author’s intentions by retaining the original structure and formatting, and adjusting it to the styles you are using in your editor.
# Security issues fixed
CKEditor 4.14 fixes an XSS vulnerability in the HTML data processor reported by Michał Bentkowski of Securitum. The vulnerability stemmed from the fact that it was possible to execute XSS inside CKEditor after persuading the victim to: (i) switch CKEditor to source mode, then (ii) paste a specially crafted HTML code, prepared by the attacker, into the opened CKEditor source area, and (iii) switch back to WYSIWYG mode or (i) copy the specially crafted HTML code, prepared by the attacker and (ii) paste it into CKEditor in WYSIWYG mode. Although this is an unlikely scenario, we recommend upgrading to the latest editor version.
This editor release also fixes an XSS vulnerability in the third-party WebSpellChecker Dialog plugin that is included in the Standard and Full presets of CKEditor 4. The vulnerability was reported by Pham Van Khanh from Viettel Cyber Security and was present in plugin versions up to 220.127.116.11. It is related to the specific internals of the plugin, where it was possible to execute XSS after persuading the victim to: (i) switch CKEditor to source mode, then (ii) paste a specially crafted HTML code, prepared by the attacker, into the opened CKEditor source area, then (iii) switch back to WYSIWYG mode, and (iv) preview the CKEditor content outside of the CKEditor editable area on a page where the WebSpellChecker Dialog plugin files are available. Please note that this is a highly unlikely scenario as it requires a few very specific conditions to be present. Still, upgrading to the latest CKEditor 4 version is recommended.
# Print and preview improvements
If you rely on writing your documents in CKEditor 4 and then printing them, you will be happy to learn that we have significantly improved this aspect of the editor functionality. We have recently noticed that some of the fake objects that are used in the WYSIWYG editor to symbolize various rich content elements, such as page breaks, anchors or iframe placeholders, were actually output in the print in their symbolic form. We have thus revamped the Preview and Print plugins to fix this and to make them much more useful.
We are happy to share that thanks to the new implementation you will also be able to add the print functionality to inline editors!
# Other improvements
Here are some other important enhancements that were added in this release:
- The active dialog tab now has the
aria-selected="true"attribute to improve accessibility.
- The color button state was improved to reflect the selected editor content color.
- The Font plugin no longer creates nested
<span>elements when reapplying the same font multiple times.
- The emoji suggestion box now shows the matched emoji name instead of the ID.
- We introduced significant Widget plugin improvements related to selection containing multiple widgets and widget partial selection in the context of copy-paste and drag&drop operations. This change positively affects all widget-based plugins, including Easy Image, Enhanced Image, Media Embed and Code Snippet.
# WYSIWYG editor Vue.js integration
We are also happy to report that the beta release of the official CKEditor 4 WYSIWYG editor Vue.js integration has recently been published. You can read more about it the documentation as well as try out some samples.
This integration complements similar CKEditor 4 WYSIWYG editor integrations for React and Angular. We are looking forward to hearing what other frameworks we should support with a native CKEditor 4 WYSIWYG editor integration.
# API changes and 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. As a result, in this release, we have introduced some API improvements:
- Introduced the
CKEDITOR.ui.richCombo.select()method allowing for easy control of rich combo editor toolbar elements.
- Introduced the
bgColoreditor commands in the Color Button plugin that allow for applying the selected color for the current editor selection.
- Introduced the
fontSizeeditor commands in the Font plugin that allow for applying the selected font style for the current editor selection.
- Introduced the
editor.getSelectedRanges()alias for smoother work with the editor selection API.
- Introduced an API for dynamically refreshing widget
partsproperties, allowing for an easier integration with widgets with dynamic content.