CKEditor in TYPO3


Die neue LTS von TYPO3 in der Version 8.7 bringt einen neuen Helfer für Editoren mit. Texte können ab jetzt mit dem CKEditor editiert werden.

Neben einer angenehmen Konfiguration bringt der CKEditor vor allem eine große Menge an Plugins für die verschiedensten Anwendungsbereiche mit (beispielsweise einfügen von Bildern aus der Zwischenablage). Für TYPO3 gibt es bereits ein paar mitgelieferte Plugins, wie beispielsweise den gewohnten typolink Wizard.

Der CKEditor ist ab TYPO3 LTS 8.7 als Standard eingestellt.

Eine größtenteils zurechtgeschnittene YAML Konfiguration für den CKEditor könnte etwas so aussehehn (Default.yaml):

imports:
    - { resource: "EXT:rte_ckeditor/Configuration/RTE/Processing.yaml" }
    - { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Base.yaml" }
editor:
  externalPlugins:
    typo3link: { resource: "EXT:rte_ckeditor/Resources/Public/JavaScript/Plugins/typo3link.js", route: "rteckeditor_wizard_browse_links" }
  config:
    # css definitions for the editor
    contentsCss: "EXT:vendor_extname/Resources/Public/css/rte.css"
    # can be "default", but a custom stylesSet can be defined here, which fits TYPO3 best
    stylesSet:
      # custom block level style
      - { name: "Button", element: "a", attributes: { class: "your-css-class" } }
    # limited selection of block formats
    format_tags: "h3;h4;h5;p"

    # configuration of the editors toolbar
    toolbarGroups:
      - { name: clipboard, groups: [clipboard, undo] }
      - { name: links }
      - "/"
      - { name: styles }
      - { name: basicstyles, groups: [ basicstyles, cleanup ] }
      - { name: paragraph,   groups: [ list, blocks ] }
      # uncomment below for html display of rte
      #- { name: mode }

    # these are the names of the plugins to disable
    removeButtons:
      - Anchor
      - Superscript
      - Subscript
      - Underline
      - Strike
      - NumberedList

Eigene Konfigurations Vorenistellungen können in der ext_localconf.php registriert werden:

/**
     * Register RTE preset config to use with CKEditor
     */
    $GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['your_preset'] = 'EXT:verndor_extname/Configuration/Yaml/RTE/Default.yaml';

Die Voreinstellungen können dann per default oder expliziet für einzelne Felder

# In ext_localconf.php registered preset.
RTE.default.preset = your_preset

# Preset for tt_content textmedia
RTE.tt_content.types.textmedia.bodytext.preset = full
# Preset for ext:tx_news
RTE.config.tx_news_domain_model_news.bodytext.preset = default

Hat dir der Artikel gefallen?

Werkraum News: