« See all

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.

CKEditor 4 WYSIWYG editor with support for pasting from Google Docs.
CKEditor 4 WYSIWYG editor with support for pasting from Google Docs.

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

During the development of dialog positioning improvements, we have switched from extensively using JavaScript in favor of CSS, allowing browsers to do their job when it comes to positioning. This also improves the performance of the solution and makes it work much smoother. And since we liked the result a lot, the final fix is a generic one, improving not only the mobile experience but also CKEditor 4 dialogs in general for all modern desktop browsers.

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

Creating math formulas in CKEditor 4 WYSIWYG editor.
Creating math formulas in CKEditor 4 WYSIWYG editor.

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.

Spelling and grammar checking in CKEditor 4 WYSIWYG editor.
Spelling and grammar checking in CKEditor 4 WYSIWYG editor.

This solution is an alternative to two other WebSpellChecker plugins, Spell Check As You Type (SCAYT) and WebSpellChecker Dialog, that are included in all CKEditor 4 presets.

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:

# 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 getMode() method.
  • 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 CKEDITOR.tools helpers.

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

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

Spreadsheets coming to CKEditor 4 WYSIWYG editor in October 2019
Spreadsheets coming to CKEditor 4 WYSIWYG editor in October 2019

It is coming in October 2019 — contact us if you would like to gain access to an early preview!

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

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!

Share this post

Linkedin Reddit

Discuss on

Future of content calls for the best rich text editor - DCX 2019
Collaboration journey of CKEditor 5 - What were we up to