TYPO3 + CKEditor: Everything You Need To Know

The world’s most popular CKEditor has been integrated into TYPO3 and it was one of the great decisions. Here, I want to guide from basic to advanced level CKEditor integration and customization into TYPO3 CMS.

CKEditor helps TYPO3 developers as well as editors - as compared to old so-called htmlArea RTE editors. Since a TYPO3 v8, CKEditor is part of the TYPO3 core by replacing old RTE.”

Let’s get started with a step-by-step guide of TYPO3 CKEditor with setup, configurations, customization, install plugins, and much more.

What is CKEditor?

Basically it is an enterprise-grade WYSIWYG HTML editor with wide browser compatibility and legacy browsers.

Simply copy/paste from Word and Excel, spell check, accessibility checker, tables.
Wide-range of third party plugins eg., autocomplete, widgets, code snippets, emoji ? plugins.
Better control over content: HTML filters and mode of view source code
Excellent accessibility: WCAG 2.0 AA and Section 508 compliant.
Long-term support (LTS) versions

Read more at official website CKEditor.com

What does CKEditor do in TYPO3 CMS?

CKEditor is a third-party feature that is ready-to-go in TYPO3 via the system extension called EXT:rte_ckeditor. TYPO3 people now have cool-editors to easily manage their content.

Why was CKEditor needed in TYPO3?

21.000+ tests

The automated, manual, unit, and integration tests for CKEditor 4 and CKEditor 5.

27M+ downloads

The number of CKEditor downloads. The number of users exceeds hundreds of millions

400+ plugins

The community created over 400 publicly available plugins for CKEditor 4 thanks to such an approach.

23.000+ questions

The number of StackOverflow questions related to CKEditor.

Are you new to CKEditor?

No problem, Try by your self this quick demo now https://CKEditor.com/CKEditor-4/demo/#article

What are the features of CKEditor into TYPO3?

The extension rte_ckeditor incorporates the features of CKEditor and adds additional functionality, configuration presets, and plugins.

Sample Key Features

Configurable via YAML files
Default three ready-to-use CKEditor preset in TYPO3
Flexible to modify of TYPO3 CKEditor Toolbar
Integrated with TYPO3 link wizard
Integrated most popular word count CKEditor plugin into TYPO3

Why TYPO3 switched from htmlArea RTE to CKEditor?

Don’t have to fully maintain it by the TYPO3 community, Because other cool OpenSource projects already well developed and maintained eg., CKEditor.
CKEditor has good cross-browser & cross-compatibility support
Complying with the latest web accessibility standard.
Cool in-line editing features which help to make better Frontend inline editing
Support advanced content filter

But! wait... You don’t want to switch?

The old htmlArea RTE has been deprecated since TYPO3 v8.

If you have an old TYPO3 website with RTE htmlArea and it’s hard to migrate to CKEditor, then no problem, you can find updates and further maintenance at FriendsOfTYPO3/rtehtmlarea

CKEditor for TYPO3 Editors

TYPO3 RTE Editing Modes

Mode 1: Classic Article Mode
The default RTE integrated into TYPO3 backend eg., Add text element get RTE.

Mode 2: Document Editor mode
Editing is done as in Microsoft Word or Google Docs, where the document itself mimics a sheet of paper. The focus is on structuring content and not mainly on the layout itself.

Mode 3: Inline Editor mode
Unfortunately, TYPO3 did not get frontend_editing awesome projects within TYPO3 core, You may use it from TER.

Take a test-drive of each mode at CKEditor Demo.

Basic features of CKEditor in TYPO3

Example: Use bold
Select text and click on the B (for bold) button:

Example: Create a link
Select text and click on the Link button:

What are the big changes in TYPO3 >= v8 with CKEditor?

No more TypoScript, Everything will well manage through popular YAML
Doest not available automatic migration of your existing configurations
<p> are not saved in database
No <typolink> anymore

Oh, You don’t know, what’s YAML?

As CKEditor comprises YAML configuration, it is essential to gain preliminary knowledge about YAML files.

YAML (a recursive acronym for "YAML Ain't Markup Language") is a human-readable data serialization language. It is commonly used for configuration files and in applications where data is being stored or transmitted.

It’s very simple, Try Google with some examples to learn the concept and syntax.

Why TYPO3 Choose YAML?

“Did you know?
The RTE CKEditor has not been configured in PageTSConfig TypoScript anymore, Everything is managed through cool-YAML."

Instead of a bit complicated TypoScript, TYPO3 core team and community choose to have famous well-structured YAML configurations.

CKEditor uses JavaScript for Integration
TypoScript with TSConfig is bit hard new TYPO3 integrators and developers
A new start for a new structure to separate processing and Editor-related configuration
Allow options to be extended (but no condition or unsetting values)

What are the presets of CKEditor in TYPO3?

CKEditor has default presets to easily configure different variance, What’s preset?

Define editor look and layout
Define what tags and styles are allowed
Define which plugins to load
Define database processing RTE.proc

Default: TYPO3 CKEditor Preset

Minimal: TYPO3 CKEditor Preset

Full: TYPO3 CKEditor Preset

How can I identify my current CKEditor preset in TYPO3?

Step 1. Go to System > Configuration
Step 2. Choose $GLOBALS[‘TYPO3_CONF_VARS’] (Global Configuration)

Similar Structure of CKEditor’s JavaScript and TYPO3’s YAML

JavaScript Code of CKEditor

CKEDITOR.editorConfig = function(config) {
    config.toolbarGroups = [
        {name: 'basicSyles', groups: ['basicStyles']}
    ];
    config.removeButtons := 'Underline,Strike';
}

CKEDITOR.editorConfig = function(config) {
    config.toolbarGroups = [
        {name: 'basicSyles', groups: ['basicStyles']}
    ];
    config.removeButtons := 'Underline,Strike';
}

YAML code of CKEditor for TYPO3

editor:
    config:
        toolbarGroups:
            - {name: basicSyles, groups: [basicStyles]}
        removeButtons:
            - Underline
            - Strike

editor:
    config:
        toolbarGroups:
            - {name: basicSyles, groups: [basicStyles]}
        removeButtons:
            - Underline
            - Strike

How can I create my custom CKEditor Preset in TYPO3?

Yes, Of course!

Step 1. Go to the Page module, Click on the root page.
Step 2. Edit your page properties, Go to Resources tab and Page TSConfig

Step 3. Configure your preset, here are examples.

Default: CKEditor Preset

Step 3. Configure your preset, here are examples.

Default: CKEditor Preset

RTE {
    default.preset = default
}

RTE {
    default.preset = default
}

Full: CKEditor Preset

RTE {
    default.preset = full
}

RTE {
    default.preset = full
}

Minimal: CKEditor Preset

RTE {
    default.preset = minimal
}

RTE {
    default.preset = minimal
}

Override One Field

// Syntax: RTE.config.[tableName].[fieldName].preset
RTE {
    config {
        tt_content {
            bodytext.preset = myFavouritePreset
        }
    }
}

// Syntax: RTE.config.[tableName].[fieldName].preset
RTE {
    config {
        tt_content {
            bodytext.preset = myFavouritePreset
        }
    }
}

Override One Field: If Type Match

// Syntax: RTE.config.tt_content.bodytext.types.textmedia.preset = minimal
RTE {
    config {
        tt_content {
            bodytext {
                types {
                    textmedia.preset = myFavouritePreset
                }
            }
        }
    }
}

// Syntax: RTE.config.tt_content.bodytext.types.textmedia.preset = minimal
RTE {
    config {
        tt_content {
            bodytext {
                types {
                    textmedia.preset = myFavouritePreset
                }
            }
        }
    }
}

Override News Extension Field

RTE {
    config {
        tx_news_domain_model_news {
            bodytext.preset = minimal
        }
    }
}

RTE {
    config {
        tx_news_domain_model_news {
            bodytext.preset = minimal
        }
    }
}

How does the default TYPO3 core CKEditor preset look-a-like?

You don’t require to start and learn each property by heart. A good way to learn from the TYPO3 core’s default configuration.

Just copy TYPO3 core’s YAML /typo3/sysext/rte_ckeditor/Configuration/RTE/Default.yaml to your custom extension /yourextension/Configuration/RTE/

# typo3/sysext/rte_ckeditor/Configuration/RTE/Default.yaml

# 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 http://docs.CKEditor.com/#!/api/CKEditor.config

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

# typo3/sysext/rte_ckeditor/Configuration/RTE/Default.yaml

# 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 http://docs.CKEditor.com/#!/api/CKEditor.config

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

How can I configure my own CKEditor Preset in TYPO3?

Step 1. /typo3conf/ext_localconf.php

if (empty($GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets'][MyPreset])) {
    $GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets'][MyPreset] = 'EXT:yourextension/Configuration/RTE/MyPreset.yaml';
}

if (empty($GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets'][MyPreset])) {
    $GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets'][MyPreset] = 'EXT:yourextension/Configuration/RTE/MyPreset.yaml';
}

Tip: You can also add the above code into typo3conf/AdditionalConfiguration.php

Step 2. /yourextension/Configuration/RTE/MyPreset.yaml

# Import basic configuration
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 http://docs.CKEditor.com/#!/api/CKEditor.config
editor:
  config:
    # Include custom CSS
    contentsCss: "EXT:yourextension/Resources/Public/Css/rte.css"

# Import basic configuration
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 http://docs.CKEditor.com/#!/api/CKEditor.config
editor:
  config:
    # Include custom CSS
    contentsCss: "EXT:yourextension/Resources/Public/Css/rte.css"

Step 3. Assign your Custom Preset to CKEditor RTE eg., RTE.default.preset = MyPreset at PageTS.

There are multiple options to perform Step 3 (assign custom preset to RTE) as below.

Option 1: Globally Applied with PageTSConfig

// Page > Properties > Resources > PageTS field
RTE {
    default {
        preset = MyPreset
    }
}

// Page > Properties > Resources > PageTS field
RTE {
    default {
        preset = MyPreset
    }
}

Option 2: Setup through TCA

// yourextension/Configuration/TCA/tx_yourextension_domain_model_table.php

'content' => [ 
    'label' => 'YourLabel', 
    'config' => [ 
        'type' => 'text', 
        'cols' => 48, 
        'rows' => 5, 
        'enableRichtext' => true, 
        'richtextConfiguration' => 'minimal', 
    ], 
],

// yourextension/Configuration/TCA/tx_yourextension_domain_model_table.php

'content' => [ 
    'label' => 'YourLabel', 
    'config' => [ 
        'type' => 'text', 
        'cols' => 48, 
        'rows' => 5, 
        'enableRichtext' => true, 
        'richtextConfiguration' => 'minimal', 
    ], 
],

Option 3. Assign Preset to Particular Table/Field with PageTSConfig

// Page > Properties > Resources > PageTS field

// Syntax
RTE {
    config {
        [table].[field].preset = default
        [table].[field].types.[type].preset = full
    }
}

// Example
RTE {
    config {
        tt_content {
            bodytext {
                preset = minimal
                types {
                    textmedia.preset = default
                    myfield.preset = full
                }
            }
        }
    }
}

// Page > Properties > Resources > PageTS field

// Syntax
RTE {
    config {
        [table].[field].preset = default
        [table].[field].types.[type].preset = full
    }
}

// Example
RTE {
    config {
        tt_content {
            bodytext {
                preset = minimal
                types {
                    textmedia.preset = default
                    myfield.preset = full
                }
            }
        }
    }
}

Configure through CKEditor’s toolbarGroups

In CKEditor, each button is configured in a number of toolbar group.

Example:

# yourextension/Configuration/RTE/MyPreset.yaml

# 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 http://docs.CKEditor.com/#!/api/CKEditor.config
editor:
  config:
    toolbarGroups:
        - { name: clipboard, groups: [ clipboard, cleanup, undo ] }

# yourextension/Configuration/RTE/MyPreset.yaml

# 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 http://docs.CKEditor.com/#!/api/CKEditor.config
editor:
  config:
    toolbarGroups:
        - { name: clipboard, groups: [ clipboard, cleanup, undo ] }

In the above example, the clipboard toolbar group contains three buttons. In this ways, you can configure your favorite editor :)

Explore awesome CKEditor’s UI based to get each button and toolbar at Toolbar Configurator

How can we allow images into CKEditor TYPO3?

Many people may be wondering how we can integrate images into CKEditor. In TYPO3 core, by default such a feature is not available with CKEditor.

Same image handling as rtehtmlarea (magic images, usual RTE TSConfig supported)
Image browser as usual in e.g. FAL file selector
Dialog for changing width, height, alt and title (aspect ratio automatically maintained)

Step 1. Install TYPO3 extension EXT:rte_ckeditor_image

Step 2. Configuration

#1 EXT:yourextension/ext_localconf.php

$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['default'] = 'EXT:yourextension/Configuration/RTE/MyPreset.yaml';

#1 EXT:yourextension/ext_localconf.php

$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['default'] = 'EXT:yourextension/Configuration/RTE/MyPreset.yaml';

#2 EXT:yourextension/Configuration/RTE/MyPreset.yaml

imports:
  # Import default RTE config (for example)
  - { resource: "EXT:rte_ckeditor/Configuration/RTE/Default.yaml" }
  # Import the image plugin configuration
  - { resource: "EXT:rte_ckeditor_image/Configuration/RTE/Plugin.yaml" }

#2 EXT:yourextension/Configuration/RTE/MyPreset.yaml

imports:
  # Import default RTE config (for example)
  - { resource: "EXT:rte_ckeditor/Configuration/RTE/Default.yaml" }
  # Import the image plugin configuration
  - { resource: "EXT:rte_ckeditor_image/Configuration/RTE/Plugin.yaml" }

# Your PageTSConfig

editor:
  config:
    # RTE default config removes image plugin - restore it:
    removePlugins: null

# Your PageTSConfig

editor:
  config:
    # RTE default config removes image plugin - restore it:
    removePlugins: null

Step 3. Enable RTE config preset

# Page TSConfig
RTE.default.preset = MyPreset

# Page TSConfig
RTE.default.preset = MyPreset

Step 4. (Optional) Configuration

Maximum width/height
The maximum dimensions relate to the configuration for magic images which have to be set in Page TSConfig:

# Page TSConfig
RTE.default.buttons.image.options.magic {
    maxWidth = 1020  # Default: 300
    maxHeight = 800  # Default: 1000
}

# Page TSConfig
RTE.default.buttons.image.options.magic {
    maxWidth = 1020  # Default: 300
    maxHeight = 800  # Default: 1000
}

Usage as lightbox with fluid_styled_content

# Template Constants

styles.content.textmedia.linkWrap.lightboxEnabled = 1

styles.content.textmedia.linkWrap.lightboxEnabled = 1

Allowed extensions
By default the extensions from $TYPO3_CONF_VARS['GFX']['imagefile_ext'] are allowed. However you can override this for CKEditor by adding the following to your YAML configuration:

editor:
  externalPlugins:
      typo3image:
        allowedExtensions: "jpg,jpeg,png"

editor:
  externalPlugins:
      typo3image:
        allowedExtensions: "jpg,jpeg,png"

Managing Various Options of CKEditor in TYPO3

1. Enable/Disable Advanced Content Filter

# yourextension/Configuration/RTE/MyPreset.yaml

# 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 http://docs.CKEditor.com/#!/api/CKEditor.config
editor:
    config:
        allowedContent: true

# yourextension/Configuration/RTE/MyPreset.yaml

# 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 http://docs.CKEditor.com/#!/api/CKEditor.config
editor:
    config:
        allowedContent: true

What is an Advanced Content Filter?

Only tags/classes/styles that are configured should be kept
Filter content during editing and paste
Enabled by default
Makes 'processing' config most of the times obsolete 'RTE.proc'

2. Format HTML Tags:

Format the HTML tags by selecting the desired option from a dropdown menu.

editor:
  config:
  	format_tags: "p;h1;h2;h3;h4;h5;pre;address;div"

editor:
  config:
  	format_tags: "p;h1;h2;h3;h4;h5;pre;address;div"

3. The Toolbar Groups

The Toolbar Groups option will help you define the layout and structure of toolbars on the top portion of the editor.

editor:
   config:
 	toolbarGroups:
     	- { name: clipboard, groups: [clipboard, undo] }
     	- "/"
     	- { name: styles }

editor:
   config:
 	toolbarGroups:
     	- { name: clipboard, groups: [clipboard, undo] }
     	- "/"
     	- { name: styles }

4 stylesSet

Provide different styles to format and customize the text in an appealing manner. You may want to use the “Styles” drop-down menu to go about the task.

editor:
  config:
     stylesSet:
  	- { name: "quote-style", element: "p", attributes: { class: "quote-style"}}
  	- { name: "Load More Button", element: "a", attributes: { class: "load-more"}}
  	- { name: "More Content", element: "div", attributes: { class: "more-content"}}

editor:
  config:
     stylesSet:
  	- { name: "quote-style", element: "p", attributes: { class: "quote-style"}}
  	- { name: "Load More Button", element: "a", attributes: { class: "load-more"}}
  	- { name: "More Content", element: "div", attributes: { class: "more-content"}}

5. extraPlugins

editor:
  config:
    allowTags: 
      - address
      - label

editor:
  config:
    allowTags: 
      - address
      - label

allowTagsOutside: 
      - address
      - label

allowTagsOutside: 
      - address
      - label

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

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

extraPlugins:
      - justify

removePlugins:
      - image

extraPlugins:
      - justify

removePlugins:
      - image

removeButtons:
      - Anchor
      - Underline
      - Strike

removeButtons:
      - Anchor
      - Underline
      - Strike

6 contentsCss

The ContentsCSS feature allows you to define various CSS styles for direct usage and viewing in CKEditor.

7. removeButtons

RemoveButtons helps in the removal of individual functions and buttons that result due to the importing of Base.yaml.

8. Buttons and Classes Configuration

buttons:
  link:
    url:
      properties:
        class:
          default: 'external-link'
    properties:
      class:
        allowedClasses: 'external-link'

buttons:
  link:
    url:
      properties:
        class:
          default: 'external-link'
    properties:
      class:
        allowedClasses: 'external-link'

classes:
  external-link:
    name: 'External Link'

classes:
  external-link:
    name: 'External Link'

classesAnchor:
  externalLink:
    class: 'external-link'
    type: 'url'
    target: '_blank'

classesAnchor:
  externalLink:
    class: 'external-link'
    type: 'url'
    target: '_blank'

How can you integrate a custom TYPO3 Extension in CKEditor TYPO3?

Add Sample Button

Step 1. /yourextension/Resources/Public/CkEditorPlugins/myplugin.js

'use strict';

(function ()) {
    CKEDITOR.plugins.add('example_plugin', {
        init: function (editor) {
            // Let's add CKEditor Icon
            // Note: Please put icon file at /Resources/Public/CkEditorPlugins/icons/mycustom.png
            icons: 'mycustom',
            
            // Add button to CKEditor
            editor.ui.addButton('MyPreset',{
                label: 'My Button',
                toolbar: 'basicStyles',
                command: 'insertTimestamp'
            });

            // Execute CKEditor Command
            editor.addCommand('insertTimestamp',{
                exec: function (editor){
                    var now = new Date();
                    editor.insertHtml (
                        'The current date and time is: <em>' + now.toString() + '</em>'
                    )
                }
            });
        }
    })
}

'use strict';

(function ()) {
    CKEDITOR.plugins.add('example_plugin', {
        init: function (editor) {
            // Let's add CKEditor Icon
            // Note: Please put icon file at /Resources/Public/CkEditorPlugins/icons/mycustom.png
            icons: 'mycustom',
            
            // Add button to CKEditor
            editor.ui.addButton('MyPreset',{
                label: 'My Button',
                toolbar: 'basicStyles',
                command: 'insertTimestamp'
            });

            // Execute CKEditor Command
            editor.addCommand('insertTimestamp',{
                exec: function (editor){
                    var now = new Date();
                    editor.insertHtml (
                        'The current date and time is: <em>' + now.toString() + '</em>'
                    )
                }
            });
        }
    })
}

Step 2. /yourextension/Configuration/RTE/MyPreset.yaml

# Load default processing options
imports:
    - { resource: "EXT:rte_ckeditor/Configuration/RTE/Default.yaml" }

# Load default processing options
imports:
    - { resource: "EXT:rte_ckeditor/Configuration/RTE/Default.yaml" }

editor:
    # Let's load our sample custom plugin
    externalPlugins:
        myplugin: { resource: "EXT:yourextension/Resources/Public/CkEditorPlugins/myplugin.js" }

editor:
    # Let's load our sample custom plugin
    externalPlugins:
        myplugin: { resource: "EXT:yourextension/Resources/Public/CkEditorPlugins/myplugin.js" }

Step 3. Register CKEditor Sample Custom Plugin

$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['MyPreset'] = 'EXT:yourextension/Configuration/RTE/MyPreset.yaml';

$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['MyPreset'] = 'EXT:yourextension/Configuration/RTE/MyPreset.yaml';

Step 4. Test-drive with RTE

RTE {
    default {
        preset = MyPreset
    }
}

RTE {
    default {
        preset = MyPreset
    }
}

Advanced Example of Custom TYPO3 CKEditor Plugin

# Create yourextension/Resources/Public/CkEditorPlugins/myplugin.js
'use strict';

(function ()) {
    CKEDITOR.plugins.add('example_plugin', {
        init: function (editor) {
            // Let's add CKEditor Icon
            // Note: Please put icon file at /Resources/Public/CkEditorPlugins/icons/mypreset.png
            icons: 'mypreset',
            
            // Add button to CKEditor
            editor.ui.addButton('MyPreset',{
                label: 'My Button',
                toolbar: 'basicStyles',
                command: 'openExampleModal'
            });

            // Execute CKEditor Command
            editor.addCommand('openExampleModal',{
                exec: openModal
            });
        }
    })
}

function openModal() {
    require([
        'TYPO3/CMS/Backend/Modal'
    ], function(Modal) {
        Modal.show(
            'Sample Plugin',
            'Hello'
        );
    })
}

# Create yourextension/Resources/Public/CkEditorPlugins/myplugin.js
'use strict';

(function ()) {
    CKEDITOR.plugins.add('example_plugin', {
        init: function (editor) {
            // Let's add CKEditor Icon
            // Note: Please put icon file at /Resources/Public/CkEditorPlugins/icons/mypreset.png
            icons: 'mypreset',
            
            // Add button to CKEditor
            editor.ui.addButton('MyPreset',{
                label: 'My Button',
                toolbar: 'basicStyles',
                command: 'openExampleModal'
            });

            // Execute CKEditor Command
            editor.addCommand('openExampleModal',{
                exec: openModal
            });
        }
    })
}

function openModal() {
    require([
        'TYPO3/CMS/Backend/Modal'
    ], function(Modal) {
        Modal.show(
            'Sample Plugin',
            'Hello'
        );
    })
}

Advanced AJAX-based Custom TYPO3 CKEditor Plugin

# /yourextension/Configuration/RTE/MyPreset.yaml
# Let's configure AJAX route of TYPO3
editor:
    # Let's load our sample custom plugin
    externalPlugins:
        myplugin: { 
            resource: "EXT:yourextension/Resources/Public/CkEditorPlugins/myplugin.js" 
            route: "configsample_route"
        }

# yourextension/Resources/Public/CkEditorPlugins/myplugin.js

function openModal() {
    // Get AJAX URL
    var url = editor.config.myplugin.routeUrl;

    require([
        'TYPO3/CMS/Backend/Modal'
    ], function(Modal) {
        // Display modalbox
        Modal.cdvanced({
            type: Modal.types.iframe,
            title: 'Sample Plugin',
            content: url,
            size: Modal.sizes.large
        })
    })
}

# /yourextension/Configuration/RTE/MyPreset.yaml
# Let's configure AJAX route of TYPO3
editor:
    # Let's load our sample custom plugin
    externalPlugins:
        myplugin: { 
            resource: "EXT:yourextension/Resources/Public/CkEditorPlugins/myplugin.js" 
            route: "configsample_route"
        }

# yourextension/Resources/Public/CkEditorPlugins/myplugin.js

function openModal() {
    // Get AJAX URL
    var url = editor.config.myplugin.routeUrl;

    require([
        'TYPO3/CMS/Backend/Modal'
    ], function(Modal) {
        // Display modalbox
        Modal.cdvanced({
            type: Modal.types.iframe,
            title: 'Sample Plugin',
            content: url,
            size: Modal.sizes.large
        })
    })
}

Simple Insert Icon in CKEditor TYPO3

Step 1. Setup JS Code

# Create yourextension/Resources/Public/CkEditorPlugins/myplugin.js

'use strict';
(function () {

	CKEDITOR.dtd.$removeEmpty.em = 0;
	CKEDITOR.dtd.$removeEmpty.i = 0;

	CKEDITOR.plugins.add('icon-envelope', {
		icons: 'iconenvelope',
		init: function (editor) {
			editor.ui.addButton( 'IconEnvelope', {
				label: 'Icon E-Mail',
				toolbar: 'insert',
				command: 'insertIconEnvelope'
			});

			editor.addCommand( 'insertIconEnvelope', {
				exec: function (editor) {
					var icon = editor.document.createElement('i');
					icon.setAttribute('class', 'fa fa-envelope');
					editor.insertElement(icon);
				}
			});
		}
	});

});

# Create yourextension/Resources/Public/CkEditorPlugins/myplugin.js

'use strict';
(function () {

	CKEDITOR.dtd.$removeEmpty.em = 0;
	CKEDITOR.dtd.$removeEmpty.i = 0;

	CKEDITOR.plugins.add('icon-envelope', {
		icons: 'iconenvelope',
		init: function (editor) {
			editor.ui.addButton( 'IconEnvelope', {
				label: 'Icon E-Mail',
				toolbar: 'insert',
				command: 'insertIconEnvelope'
			});

			editor.addCommand( 'insertIconEnvelope', {
				exec: function (editor) {
					var icon = editor.document.createElement('i');
					icon.setAttribute('class', 'fa fa-envelope');
					editor.insertElement(icon);
				}
			});
		}
	});

});

Step 2. Include in YAML Configuration

#  /yourextension/Configuration/RTE/MyPreset.yaml

# 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 http://docs.ckeditor.com/#!/api/CKEDITOR.config
editor:
  externalPlugins:
    icon-envelope: { resource: "EXT:mytheme/Resources/Public/CkEditorPlugins/icon-envelope/plugin.js" }

#  /yourextension/Configuration/RTE/MyPreset.yaml

# 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 http://docs.ckeditor.com/#!/api/CKEDITOR.config
editor:
  externalPlugins:
    icon-envelope: { resource: "EXT:mytheme/Resources/Public/CkEditorPlugins/icon-envelope/plugin.js" }

How can you install CKEditor community plugins in TYPO3?

Code Snippet TYPO3 CKEditor

Step 1. Search CKEditor plugin which you want to integrate into TYPO3 from ckeditor.com/cke4/addons/plugins/all

Step 2. Let's imagine you want to integrate this Codesnippet plugin ckeditor.com/cke4/addon/codesnippet

Step 3. Download & Unzip the plugin
Put the plugin at yourextension/Resources/Public/CKeditor/Plugins/codesnippet/

Step 4. Configuration/RTE/Plugin.yaml

editor:
   externalPlugins:
       codesnippet:
           resource: "EXT:yourextension/Resources/Public/CKeditor/Plugins/codesnippet/"

editor:
   externalPlugins:
       codesnippet:
           resource: "EXT:yourextension/Resources/Public/CKeditor/Plugins/codesnippet/"

Step 5. Any extra configuration require in the plugin, check their documentation

Step 6. Clear the cache! You should able to see "Insert Code Snippet"

Youtube TYPO3 CKEditor

Source

Step 1.Download & Unzip plugin ckeditor.com/cke4/addon/youtube
Put the plugin at yourextension/Resources/Public/CKeditor/Plugins/youtube/

Step 2. Configuration/RTE/Plugin.yaml

editor:
  externalPlugins:
    youtube: { resource: "EXT:mx_ext/Resources/Public/RTE/Plugins/youtube/plugin.js" }
  config:
    youtube_width: '550'
    extraAllowedContent: '*(*)[data-*]; iframe'

editor:
  externalPlugins:
    youtube: { resource: "EXT:mx_ext/Resources/Public/RTE/Plugins/youtube/plugin.js" }
  config:
    youtube_width: '550'
    extraAllowedContent: '*(*)[data-*]; iframe'

Step 3. Clear the cache! You should able to see "Youtube Video Button"

Word Count TYPO3 CKEditor

Step 1. Download & Unzip plugin https://ckeditor.com/cke4/addon/wordcount

Put the plugin at yourextension/Resources/Public/CKeditor/Plugins/wordcount/

Step 2. Configuration/RTE/Plugin.yaml

# Register wordcount plugin for ckeditor
editor:
  externalPlugins:
    wordcount:
      resource: "EXT:rte_ckeditor_wordcount/Resources/Public/JavaScript/Plugins/wordcount/"

# Register wordcount plugin for ckeditor
editor:
  externalPlugins:
    wordcount:
      resource: "EXT:rte_ckeditor_wordcount/Resources/Public/JavaScript/Plugins/wordcount/"

Step 3. Import into RTE Preset

imports:
  - resource: { "EXT:rte_ckeditor_myplugin/Configuration/RTE/Plugin.yaml" }

editor:
  config:
    wordcount:
      showCharCount: true

imports:
  - resource: { "EXT:rte_ckeditor_myplugin/Configuration/RTE/Plugin.yaml" }

editor:
  config:
    wordcount:
      showCharCount: true

Step 4. Clear the cache! You should be able to see the "WordCount” button.

Spell Check As You Type (SCAYT) CKEditor TYPO3

This plugin is pre-installed in the CKEditor and, as the name suggests, checks the spelling while you type. However, you have to reactivate it for every text, but you can activate it by default with the following code snippet.

editor:
  config:
    defaultContentLanguage: "de"
    defaultLanguage: "de"
    contentsLanguage: "de"
    language: "de"
    scayt_autoStartup: true # Spellcheck always on
    scayt_sLang: "de_DE" # spellcheck language
    wsc_lang: "de_DE"

editor:
  config:
    defaultContentLanguage: "de"
    defaultLanguage: "de"
    contentsLanguage: "de"
    language: "de"
    scayt_autoStartup: true # Spellcheck always on
    scayt_sLang: "de_DE" # spellcheck language
    wsc_lang: "de_DE"

Popular TYPO3 CKEditor Extensions

Font Awesome Icons into TYPO3 CKEditor

Step 1. Install TYPO3 Extension rte_ckeditor_fontawesome

Step 2. TS Config

# For the default template to the CKE-Editor
RTE.default.preset = defaultFA4

# For the full template of CKE-Editor
RTE.default.preset = fullFA4

# For the default template to the CKE-Editor
RTE.default.preset = defaultFA4

# For the full template of CKE-Editor
RTE.default.preset = fullFA4

Step 3. TYPO3 Constants

# Include your font-awesome path
plugin.tx_ckeditor_fontawesome.css = {$path}

# Inlcude font-awesome through CDN
plugin.tx_ckeditor_fontawesome.css = https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

# Include your font-awesome path
plugin.tx_ckeditor_fontawesome.css = {$path}

# Inlcude font-awesome through CDN
plugin.tx_ckeditor_fontawesome.css = https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

Step 4. Import to Your RTE Config
To add this Plug-In in your own RTE Config. Import the Config in your preset.

imports:
    - { resource: "EXT:rte_ckeditor_fontawesome/Configuration/RTE/PluginFA5.yaml" }

imports:
    - { resource: "EXT:rte_ckeditor_fontawesome/Configuration/RTE/PluginFA5.yaml" }

At the next step, you need to extend your individual Toolbar-Config to add the Clickable Icon.

editor:
  config:
    toolbar:
        - [ 'Bold', 'Italic', .....]
        ...
        - [ 'ckeditor_fa5' ]

editor:
  config:
    toolbar:
        - [ 'Bold', 'Italic', .....]
        ...
        - [ 'ckeditor_fa5' ]

Explore More TYPO3 CKEditor Extensions

Do you want to migrate RTE htmlArea to CKEditor in TYPO3?

Unfortunately, TYPO3 does not provide any automatic migration from old RTE htmlArea to CKEditor.

You should carefully migrate it manually, but no worries, It’s not that much hard. Because, most of them are looking very similar so go one by one each configuration.

RTE htmlArea PageTSConfig

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      
  )
}

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      
  )
}

RTE CKEditor 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

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

Video Tutorial of CKEditor TYPO3

Wrap-up!

Thanks for reading a long article.

I hope you enjoyed and explored more about cool CKEditor with our beloved awesome TYPO3 CMS.

What’s your favorite feature in CKEditor? Do you have any questions on CKEditor integration with TYPO3? Did we miss any important feature integration of CKEditor in TYPO3?
Please feel free to write any questions, feedback, or issues at the below comment box. We will be happy to write you back.

Have a Happy Editing!

Your One Stop Solutions for Custom TYPO3 Development

A Decade of TYPO3 Industry Experience
250+ Successful TYPO3 Projects
87% Repeat TYPO3 Customers

Get Your Free Quote

Sanjay Chauhan

CTO at T3Planet & NITSAN

Sanjay Chauhan, Co-Founder of NITSAN (Award winning TYPO3 agency) and Pioneer of T3Planet (first-ever TYPO3 Store).

A true TYPO3 fanatic since 2010. I bring strong TYPO3 experience in building customer-business…