Add CSS-class on ck_editor

Neue Link-Klasse hinzufügen

In meinem Fall will ich einem Link eine neue Klasse hinzufügen, um ihn entsprechend im Frontend stylen zu können.

Neue YMAL-Datei für ck_editor

Es muss eine neue YAML-Datei angelegt werden, z. B. extName\Configuration\TSconfig\RTE\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 docs.ckeditor.com
editor:
  config:

    stylesSet:
      - { name: "Download", element: "a", attributes: { class: "download"} }
      - { name: "PDF", element: "a", attributes: { class: "pdf"} }
      - { name: "E-Mail", element: "a", attributes: { class: "e-mail"} }
      - { name: "Button PDF Orange", element: "a", attributes: { class: "min_btn orange"} }
      - { name: "Hervorhebung Orange", element: "p", attributes: { class: "orange"} }


    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, insertcharacters ] }
      - { name: document, groups: [ mode ] }

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

    extraPlugins:
      - justify
      - autolink

    removePlugins:
      - image

    removeButtons:
      - Anchor
      - Underline
      - Strike

# Include custom CSS
    contentsCss: "EXT:chansonecole/Resources/Public/Css/frontend.css"

 

 

Unter stylesSet habe ich die neuen Link-Klassen definiert.

Ganz zum Schluss gebe ich die CSS-Datei für den Editor im Backend an.

Yaml-Konfiguration registrieren

in der ext_localconf.php der Extension:

 

$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['custom'] = 'EXT:extName/Configuration/TSconfig/RTE/custom.yaml';

 

und in extName\Configuration\TSconfig\pages.typoscript:

 

RTE {
   default.preset = custom
}