TYPO3 + CKEditor: Alles, was Sie wissen müssen

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

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

# 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', 
    ], 
],

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

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

# 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