Skip to content
Snippets Groups Projects
Commit 4c6d5fdf authored by Oliver Hader's avatar Oliver Hader Committed by Benjamin Franzke
Browse files

[!!!][FEATURE] Integrate CKEditor5 as new RTE

This change adds CKEditor v5, which is a completely new
editor compared to the previous CKEditor 4. It works without
iframes, and has a new plugin API and editing API, allowing to
work faster and easier with rich text content editing.

CKEditor v4 is removed completely from TYPO3 v12, as its
support lifecycle will end in late 2023.

CKEditor v5 is created as a bundle file with a list of built-in plugins
(see ckeditor5-bundle.js).

TYPO3 ships with a typo-link custom plugin, which can be added and
loaded dynamically via the RTE configuration yaml file.

As most of the editor configuration is changed due, a migration
tool will migrate as many options as possible. However, PLEASE NOTE:
It might be possible that data loss occurs as some features have
to be enabled explicitly.

As the iframe is removed, the contents.css now needs a CSS prefix
for the editor in order to apply styling. This is done via a SCSS
parser (added as PHP dependency) for the time being, until we find
a better solution to create custom CSS files for RTEs.

This change is marked as breaking as CKEditor 4 configuration and
integration is removed, and due to the possible data loss, which
might happen due to invalid plugins (based on CKEditor 4) which then
do not render their contents anymore.

The new editor and its configuration is still experimental as
we need to stabilize our integration code to cover more scenarios.

Supported functionality:
* Configurable toolbar items via RTE presets
* Custom typolink plugin + dynamically loaded plugin architecture via ES6
* Custom contents.css file loaded
* Migration for various config settings (see CKEditor5Migrator class)

Missing features which might get added later-on:
* extended autolinking plugin
* additional attributes for typo3-link plugin

In addition, the integration code still contains various "@todo"
remarks which should get resolved during further v12 development.

CKEditor4 removal is put in a dedicated, separate patch.

Used commands:

  composer req scssphp/scssphp:^1.11
  composer req scssphp/scssphp:^1.11 -d typo3/sysext/core --no-update

  cd Build/

  npm install \
      @ckeditor/ckeditor5-alignment \
      @ckeditor/ckeditor5-autoformat \
      @ckeditor/ckeditor5-basic-styles \
      @ckeditor/ckeditor5-block-quote \
      @ckeditor/ckeditor5-clipboard \
      @ckeditor/ckeditor5-code-block \
      @ckeditor/ckeditor5-core \
      @ckeditor/ckeditor5-dev-utils \
      @ckeditor/ckeditor5-editor-classic \
      @ckeditor/ckeditor5-engine \
      @ckeditor/ckeditor5-essentials \
      @ckeditor/ckeditor5-find-and-replace \
      @ckeditor/ckeditor5-heading \
      @ckeditor/ckeditor5-horizontal-line \
      @ckeditor/ckeditor5-html-support \
      @ckeditor/ckeditor5-indent \
      @ckeditor/ckeditor5-link \
      @ckeditor/ckeditor5-list \
      @ckeditor/ckeditor5-paragraph \
      @ckeditor/ckeditor5-paste-from-office \
      @ckeditor/ckeditor5-remove-format \
      @ckeditor/ckeditor5-source-editing \
      @ckeditor/ckeditor5-special-characters \
      @ckeditor/ckeditor5-style \
      @ckeditor/ckeditor5-table \
      @ckeditor/ckeditor5-theme-lark \
      @ckeditor/ckeditor5-ui \
      @ckeditor/ckeditor5-undo \
      @ckeditor/ckeditor5-utils \
      @ckeditor/ckeditor5-word-count

  npm install --save-dev \
      @types/ckeditor__ckeditor5-alignment \
      @types/ckeditor__ckeditor5-autoformat \
      @types/ckeditor__ckeditor5-basic-styles \
      @types/ckeditor__ckeditor5-block-quote \
      @types/ckeditor__ckeditor5-clipboard \
      @types/ckeditor__ckeditor5-code-block \
      @types/ckeditor__ckeditor5-core \
      @types/ckeditor__ckeditor5-editor-classic \
      @types/ckeditor__ckeditor5-engine \
      @types/ckeditor__ckeditor5-essentials \
      @types/ckeditor__ckeditor5-find-and-replace \
      @types/ckeditor__ckeditor5-heading \
      @types/ckeditor__ckeditor5-horizontal-line \
      @types/ckeditor__ckeditor5-html-support \
      @types/ckeditor__ckeditor5-indent \
      @types/ckeditor__ckeditor5-link \
      @types/ckeditor__ckeditor5-list \
      @types/ckeditor__ckeditor5-paste-from-office \
      @types/ckeditor__ckeditor5-remove-format \
      @types/ckeditor__ckeditor5-source-editing \
      @types/ckeditor__ckeditor5-special-characters \
      @types/ckeditor__ckeditor5-table \
      @types/ckeditor__ckeditor5-ui \
      @types/ckeditor__ckeditor5-undo \
      @types/ckeditor__ckeditor5-utils \
      @types/ckeditor__ckeditor5-word-count

  npm uninstall \
    ckeditor-wordcount-plugin \
    ckeditor4

Resolves: #96874
Releases: main
Change-Id: I09134caacafe6dc084d9efc6f260047d7bf8b118
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/75480


Tested-by: default avatarcore-ci <typo3@b13.com>
Tested-by: default avatarGeorg Ringer <georg.ringer@gmail.com>
Tested-by: default avatarBenjamin Franzke <bfr@qbus.de>
Reviewed-by: default avatarGeorg Ringer <georg.ringer@gmail.com>
Reviewed-by: default avatarBenjamin Franzke <bfr@qbus.de>
parent 2d863f9b
Showing
with 4376 additions and 812 deletions
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment