Skip to content
  • Oliver Hader's avatar
    [!!!][FEATURE] Integrate CKEditor5 as new RTE · 4c6d5fdf
    Oliver Hader authored
    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>
    4c6d5fdf
Analyzing file…