Warning message

Documentation is currently being migrated into the new system. Some pages might be temporarily missing, and some guides might appear empty. Thank you for your patience while we are improving Drupal.org documentation.

CKEditor module overview

Last updated on
November 21, 2016 - 20:38

The CKEditor module is included in Drupal 8 core, and is located in the codebase at [D8-root]/core/assets/vendor/ckeditor.

It is inspired by the Drupal 7 Wysiwyg module, and is the spiritual successor to the Drupal 7 CKEditor module. Think of it as the best of both, and then much better still!

Features

The CKEditor module builds on Drupal 8's Text Editor module to provide a deeply integrated CKEditor text editor out of the box. Unlike the contributed module in Drupal 7, the CKEditor module in Drupal 8 core:

  • still ensures structured content and clean markup (and works with rather than around the filter system)
  • significantly improved support for pasting from Microsoft Word, Google Docs, etc.
  • has an easy-to-use drag-and-drop based UI to configure CKEditor's toolbar (and automatically updates your filter settings, so you don't have to worry about it: just dragging and dropping the buttons you want is enough 99% of the time) — also: no more need to modify JavaScript files to change certain things
  • has strong safety guarantees that protect content editors

Noteworthy technical background information

In order to achieve this, Drupal contributors have closely collaborated with the CKEditor team (and continue to do so: it is maintained by both members of the Drupal community and the CKEditor team!). The CKEditor team has developed significant new features especially for Drupal 8. Here are the two most important ones:

  1. ACF, or Advanced Content Filter (in CKEditor 4.1), which allows Drupal to guarantee CKEditor generates clean markup, and only markup that is allowed by Drupal's filters, which means CKEditor's markup preview matches the output exactly.
  2. The CKEditor Widget system (in CKEditor 4.3), which allows Drupal to provide a great UX for filters that apply transformations. For example, Drupal 8 allows you to align and caption images via filters (using the data-align and data-caption attributes). By implementing that as data- attributes that filters can process on output, we continue to store semantic, structured content that can easily be transformed in different ways on output (and even uses a themable template!). To not burden content authors with that, Drupal 8 uses the CKEditor Widget API to to provide an intuitive way to add a caption to an image.

Using CKEditor Widgets for a better, tailored authoring experience

The two aforementioned features are essential to using a text editor with Drupal for a better UX, while still supporting the same robust structured content/data modeling. Drupal 8 sites can implement custom filters (like before) to fulfill their content authoring needs, but now can provide a much better experience by writing a CKEditor plugin that hugely improves the authoring experience for those site-specific needs, by using both the Widget and ACF APIs.

Think callouts, footnotes, e-commerce product references, code snippets, mathematical formulas, and more.

Issue queue

http://drupal.org/project/issues/drupal?component=ckeditor.module

See also

Tags