« See all

CKEditor 4.14 with Paste from LibreOffice released

Pasting from Libreoffice to CKEditor 4

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.

CKEditor 4 WYSIWYG editor with support for pasting from LibreOffice.
CKEditor 4 WYSIWYG editor with support for pasting from LibreOffice.

You can read more about this feature in the documentation and try out the Paste from LibreOffice sample. This feature is available by default in the Standard and Full editor presets.

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

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.

CKEditor

# 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 textColor and bgColor editor commands in the Color Button plugin that allow for applying the selected color for the current editor selection.
  • Introduced the font and fontSize editor 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 mask and parts properties, allowing for an easier integration with widgets with dynamic content.

# 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
Aborting a signal: How to cancel an asynchronous task in JavaScript
Collaborative writing and how to implement it in your application