Custom CKEditor TYPO3 configuration

Custom.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:
    contentsCss: EXT:my_site/Resources/Public/Css/extHtmlArea.css
    format_tags: "p;address;h2;h3"

    stylesSet:
      - { name: "Kleinere Schrift", element: "p", attributes: { 'class': 'small' }}
      - { name: "Mobil nicht anzeigen", element: "p", attributes: { 'class': 'hidden-phone' }}

    toolbarGroups:
      - { name: styles, groups: [ styles, format, cleanup ] }
      - { name: basicstyles, groups: [ basicstyles ] }
      - { name: paragraph, groups: [ list, indent, blocks, align ] }
      - { name: links, groups: [ links ] }
      - { name: clipboard, groups: [ clipboard, undo ] }
      - { name: editing, groups: [ spellchecker ] }
      - { name: insert, groups: [ insert ] }
      - { name: tools, groups: [ specialchar ] }
      - { name: document, groups: [ mode ] }

    justifyClasses:
      - align-left
      - align-center
      - align-right

    extraPlugins:
      - justify

    removePlugins:
      - image

    removeButtons:
      - Anchor
      - Table
      - JustifyBlock
      - Blockquote

# https://www.thomaskieslich.de/blog/135-links-im-ckeditor-mit-eigenen-css-klassen/
classes.:
  button.:
    name: Button Link

buttons.:
  link.:
    relAttribute.:
      enabled: true
    properties.:
      class.:
        allowedClasses: 'button'