TYPO3 + CKEditor: Everything You Need To Know

<?php
// EXT:my_sitepackage/ext_localconf.php
$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['my_preset']
    = 'EXT:my_sitepackage/Configuration/RTE/MyPreset.yaml';

# EXT:my_sitepackage/Configuration/RTE/MyPreset.yaml
# TYPO3 v13.4 LTS and v14.3 LTS (CKEditor 5), indent with 2 spaces
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" }

editor:
  config:
    contentsCss:
      - "EXT:rte_ckeditor/Resources/Public/Css/contents.css"
      - "EXT:my_sitepackage/Resources/Public/Css/rte.css"

    toolbar:
      items:
        - style
        - heading
        - '|'
        - bold
        - italic
        - '|'
        - bulletedList
        - numberedList
        - blockQuote
        - '|'
        - link
        - insertTable
        - '|'
        - removeFormat
        - undo
        - redo
        - sourceEditing

    heading:
      options:
        - { model: 'paragraph', title: 'Paragraph' }
        - { model: 'heading2', view: 'h2', title: 'Heading 2' }
        - { model: 'heading3', view: 'h3', title: 'Heading 3' }

    style:
      definitions:
        - { name: "Lead", element: "p", classes: ['lead'] }
        - { name: "Muted", element: "span", classes: ['text-muted'] }

    htmlSupport:
      allowEmpty: ['i']
      allow:
        - { name: 'i', classes: [ 'fa-brands', 'fa-typo3' ] }

# EXT:my_sitepackage/Configuration/page.tsconfig
# or: Page properties > Resources > Page TSconfig
RTE.default.preset = my_preset

# Optional: smaller editor for the bodytext of "Text" elements only
RTE.config.tt_content.bodytext.types.text.preset = minimal

// EXT:my_sitepackage/Resources/Public/JavaScript/Ckeditor/timestamp-plugin.js
import { Plugin } from '@ckeditor/ckeditor5-core';
import { ButtonView } from '@ckeditor/ckeditor5-ui';

export class Timestamp extends Plugin {
  static pluginName = 'Timestamp';

  init() {
    const editor = this.editor;

    // Register the button so it can be used as toolbar item
    editor.ui.componentFactory.add(Timestamp.pluginName, () => {
      const button = new ButtonView();

      button.set({
        label: 'Timestamp',
        withText: true
      });

      // Insert the current date and time at the cursor position
      button.on('execute', () => {
        const now = new Date();
        editor.model.change(writer => {
          editor.model.insertContent(writer.createText(now.toString()));
        });
      });

      return button;
    });
  }
}

<?php
// EXT:my_sitepackage/Configuration/JavaScriptModules.php
return [
    'dependencies' => ['backend'],
    // The TYPO3 v13.4 docs add this tag, the v14.3 docs no longer list it
    'tags' => [
        'backend.form',
    ],
    'imports' => [
        '@my-vendor/my-package/timestamp-plugin.js' => 'EXT:my_sitepackage/Resources/Public/JavaScript/Ckeditor/timestamp-plugin.js',
    ],
];

# EXT:my_sitepackage/Configuration/RTE/MyPreset.yaml
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" }

editor:
  config:
    importModules:
      - { module: '@my-vendor/my-package/timestamp-plugin.js', exports: [ 'Timestamp' ] }
    toolbar:
      items:
        - bold
        - italic
        - '|'
        - clipboard
        - undo
        - redo
        - '|'
        - timestamp

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

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

RTE {
    default.preset = default
}

RTE {
    default.preset = full
}

RTE {
    default.preset = minimal
}

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

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

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

# 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

if (empty($GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets'][MyPreset])) {
    $GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets'][MyPreset] = 'EXT: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"

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

// yourextension/Configuration/TCA/tx_yourextension_domain_model_table.php

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

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

# 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 ] }

#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" }

# Your PageTSConfig

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

# Page TSConfig
RTE.default.preset = MyPreset

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

styles.content.textmedia.linkWrap.lightboxEnabled = 1

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

# 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

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

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

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:
    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

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

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

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

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

# 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" }

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

RTE {
    default {
        preset = MyPreset
    }
}

# 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'
        );
    })
}

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

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

});

#  /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" }

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

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

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

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

editor:
  config:
    wordcount:
      showCharCount: true

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"

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

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

# 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

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

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

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

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