Simple Steps to Configure CKEditor in TYPO3

With the launch of TYPO3 8 LTS, TYPO3 developers and editors have been introduced to more effective backend editing solutions such as those presented by CKEditor.

You have to migrate to rte_ckeditor when updating/upgrading TYPO3 from previous TYPO3 versions (=< v8).

Download Now: Free TYPO3 Update/Upgrade Kit 

Here we help you take a quick look at the primary configuration levels of CKEditor in TYPO3 CMS.

CKEditor is a WYSIWYG RTE that permits the direct addition of JavaScript based codes within online applications or web pages. It can be procured under commercial and open source licenses.

In most cases, RTEs offer text areas wherein you can manipulate and format content, apply styles and create files as per your needs. With TYPO3 Version 8.6, you can configure RTE via YAML files in the simplest of ways.

Source: https://docs.ckeditor.com/ckeditor4/latest/guide/dev_installation.html

1. Overridden of default preset configuration

RTE.default.preset = default
# or
RTE.default.preset = full
# or
RTE.default.preset = minimal

2. Textmedia Element

RTE.tt_content.types.textmedia.bodytext.preset = minimal 

3. News Extension Field

RTE.config.tx_news_domain_model_news.bodytext.preset = default

The YAML configuration format for CKEditor in TYPO3 comprises of three sections.

• Processing.yaml contains instructions for code processing for writing to the database.
• Base.yaml refers to the basic default settings of the appearance / display of the RTE and ways to modify the same.
• Plugins.yaml allows for new options to be added to the configuration.

# Load default processing options
imports:
- { resource: "EXT:site_default/Configuration/PageTSconfig/TceForm/Processing.yaml"}
- { resource: "EXT:site_default/Configuration/PageTSconfig/TceForm/Base.yaml" }
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Plugins.yaml" }

4. Configuring Plugins

Enhance the extensibility of CKEditor with over 200 plugins that can be accessed via the plugin directory. A simple code can be included in CKEditor for incorporating non-default plugins via a designated layout extension.

editor:
  config:
    allowTags: 
      - address
      - label

    allowTagsOutside: 
      - address
      - label 

    justifyClasses:
      - text-left
      - text-center
      - text-right
      - text-justify
      - quote-style

    extraPlugins:
      - justify

    removePlugins:
      - image

    removeButtons:
      - Anchor
      - Underline
      - Strike

# Load default processing options
imports:	
    - { resource: "EXT:rte_ckeditor/Configuration/RTE/Processing.yaml" }
    - { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Base.yaml" }
    - { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Plugins.yaml" }
# Add configuration for the editor
# For complete documentation see docs.ckeditor.com
editor:
  config:
    format_tags: "p;h1;h2;h3;h4;h5;pre"
    toolbarGroups:
      - { name: styles, groups: [ styles, format ] }
      - { name: basicstyles, groups: [ basicstyles ] }
      - { name: paragraph, groups: [ list, indent, blocks, align ] }
      - { name: links, groups: [ links ] }
      - { name: clipboard, groups: [ clipboard, cleanup, undo ] }
      - { name: editing, groups: [ spellchecker ] }
      - { name: insert, groups: [ insert ] }
      - { name: tools, groups: [ table, specialchar ] }
      - { name: document, groups: [ mode ] }
    justifyClasses:
      - text-left
      - text-center
      - text-right
      - text-justify
    extraPlugins:
      - justify
    removePlugins:
      - image
    removeButtons:
      - Anchor
      - Underline
      - Strike
      - Styles

When you wish to convert the HTML code present in the HTMLArea of RTE to the database of CKEditor, the Upgrade Wizard of TYPO3 comes into play during the upgrading process. In order to save data loss, it is essential to configure the CKEditor as per the existing settings of your RTE’s HTMLArea. It is equally important to open and save the RTE-text in the backend with utmost care.

pageTS

RTE.default {
  showButtons(
    bold, italic, underline,
    left, center, right, justifyfull,
    orderedlist, unorderedlist, indent, outdent, 
         line, link, removeformat,
    copy, cut, paste, undo, redo     
  )
  toolbarOrder(
    bold, italic, underline, bar, 
    left, center, right, justifyfull,
    orderedlist, unorderedlist, bar, indent, outdent, linebreak,
         line, link, removeformat, bar,
    copy, cut, paste, bar, undo, redo      
  )
}

yaml

editor:
  config:
    toolbar:
      - [ 'Bold', 'Italic', 'Underline', '-' ] 
      - [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] 
      - [ 'NumberdList', 'BulletedList', '-', 'Indent', 'Outdent' ] 
      - '/'
      - [ 'HorizontalRule', 'Link', 'RemoveFormat', '-' ] 
      - [ 'Copy', 'Cut', 'Paste', '-' , 'Undo', 'Redo'] 
    extraPlugins:  
      - justify

Advanced Content Filter

• The configured tags, classes and styles are retained.
• It is possible to filter content during the processes of edits and pastes.
• The advanced features of the content filter are enabled by default.

editor:
  config:
     allowedContent: true

TYPO3 + CKEditor Video

Tutorial - Rich Text Editor