CKEditor 4.13 with Paste from Google Docs released
We are happy to announce the release of CKEditor 4.13 that contains over 60 tickets, from new features through bug fixes to API improvements. Most notably, this WYSIWYG editor version introduces support for pasting from Google Docs. It also includes major improvements for selection handling and dialogs.
# Paste from Google Docs
CKEditor 4 is famous for its best-in-class support for pasting content from Word and Excel. The Paste from Google Docs plugin lets you copy your content from Google Docs, 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 WYSIWYG editor.
# Selection improvements
Selection handling is a tricky part of WYSIWYG editing due to various web browser quirks. This release improves a few aspects of working with a selection, especially for applying styles and modifying the selected content.
The most visible improvement is a fix for browser behavior when selecting an entire paragraph (or a similar content section) via the mouse triple or double click, keyboard, or regular mouse selection. This often resulted in a selection that also contained the consecutive content section in a way that often made it difficult to spot for the end-users. In such cases applying styles and formatting, moving or deleting content resulted in the browser applying changes to the successive content section, too.
Now, with the new selection normalization mechanism, the selection behavior is much more predictable and better reflects the user intentions.
# Dialog improvements
While CKEditor 4 dialogs work well in all screen resolutions, there are some cases where small improvements in how dialogs are positioned mean big improvements from the user perspective.
One such case is mobile environments with smaller screens and a virtual keyboard that makes the visible area even smaller.
Since dialogs usually require user input, the virtual keyboard will probably be present there, too. We have improved the way dialogs are positioned, so even when the virtual keyboard appears, the active dialog part and its active input stay visible. Additionally, scrolling got much easier as now you will be able to only scroll the dialog part while making it impossible to scroll the dialog out of the viewport. This used to be a common problem in the past.
# Math equations and chemical formulas
MathType is a popular mathematical and science formula editor with classical and handwriting input modes. You can use it to create math equations or chemical formulas right inside the CKEditor 4 content.
MathType is based upon standards like MathML for internal representation and the PNG image format for displaying formulas. It can also handle other formats like LaTeX, Flash, SVG and EPS.
Additionally, MathType offers a special tool designed to help you work with chemical notation. When enabled, ChemType adds a specialized toolbar with the common chemical symbols as well as changes the notation to make it more intuitive to work with chemical formulas.
This feature is provided as a commercial solution delivered by our partner, Wiris. You can read more about it in the Creating Mathematical and Chemical Formulas with MathType guide and purchase a license here.
# Proofreader — a new spell and grammar checking solution
We have also partnered with WebSpellChecker to provide a modern spell checker solution for CKEditor 4. 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, distraction-free UI. Spelling and grammar suggestions are available on hover with no clicking needed.
Just like the previous solutions, by default, the spell checker is available for 17 languages, with a grammar checker for 15 of them. Support for 150 more languages and specialized dictionaries can be added for an additional fee. It can be used as both a cloud solution and installed locally on your server. You can read more about it in the Proofreading, Spelling and Grammar Checking guide. Note that this is a commercial product and you can purchase a license here.
# More new features
This release also contains some smaller new features that supplement the existing functionality:
- Support for strikethrough in the BBCode plugin. Thanks to Alexander Kahl!
- The new
config.linkDefaultProtocolconfiguration option allows setting the default URL protocol for the Link plugin dialog.
- The possibility to use the
widgetDefinition.getClipboardHtml()method to customize the widget HTML during copy, cut and drag operations.
CKEDITOR.plugins.widget#maskproperty was extended to allow masking only the specified part of a widget.
# iOS 13 compatibility
The latest edition of Apple’s mobile operating system was released on September 19, 2019 and among various improvements, it also broke pasting into the editor. It turns out that this was caused by Apple fixing an old WebKit bug in the latest iOS which means that a custom workaround that we needed to introduce a while ago is no longer needed.
We were happy to be able to proceed quickly and fix this issue just days after the public release of iOS 13. Update your CKEditor 4 installation to the latest version for an unhindered iOS experience.
# 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 a lot of API improvements that will let you:
- Integrate more closely with Undo Manager through new undo snapshots filtering mechanisms.
- Get the current dialog data with one simple
getModel()method call and check the dialog state (creation or editing mode) via the
- Develop plugins and custom features even faster by using some new methods in the DOM API, for example for checking if an element is detached, triggering element event handlers without firing the event itself or by using improved
# Translations updated
This editor release also brings updates to a few language versions, like Arabic, Danish and German. We would like to thank all the translators for their contributions!
CKEditor 4 is available in 70 language versions thanks to the fantastic community of translators. If you would like to help add a new localization or improve an existing one, join us in the CKEditor UI Translation Center at Transifex. We will be thankful for your contribution!
# Repository and package renaming
Since we are maintaining two CKEditor lines, version 4 and 5, with different code bases and target use cases, we have decided to rename the CKEditor 4 resources such as GitHub repositories or npm packages. From now on, they will be using the
# Coming up next: Spreadsheets
For a while now, we have been working on a CKEditor 4 plugin that would make it possible to add spreadsheets to documents. Although it is already possible to add tables to documents, these are only good for displaying static data. The new plugin, CKEditor 4 Spreadsheets, will let you create intelligent, data-driven documents and will be perfect for financial, auditing, engineering, technical and science industries.
It is coming in October 2019 — contact us if you would like to gain access to an early preview!
# Release notes
# Reporting issues and contributing
As explained above, CKEditor 4.13 introduces a new mechanism of handling pasting into the WYSIWYG editor. It is based on a battle-tested idea of middlewares and simplifies the process of adding new paste handlers. We have decided to play around a little bit more with this concept and created a simple library for handling pasting and dropping content into a web page. Read more about
clipboar 🐗 and feed it with your clipboard to try it out!