How to allow css class in RTE in typo3 backend?

Question

I want to allow my own CSS class into RTE (Rich Text Editor) in Typo3 backend. Please describe it me step by step.

I don't know how to add CSS class in RTE which is created by us in default.yaml . Please teach me specifically.

Answer 1

Let's assume we want to add the class button to our <a> element.

First things first we will need to define a new preset for our RTE as follows:

1. Create a new file in your_extension/Configuration/CkEditor/. For this example we will call it custom.yaml. This will be your custom RTE preset.
2. Add the new preset to your_extension/ext_localconf.php as follows:

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

3. Configure your custom RTE preset. Here's a very simple example configuration taken from they TYPO3 Documentation

# 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:my_extension/Resources/Public/Css/rte.css"

After we have defined the custom RTE preset we can go ahead and add our button class. To do that simply extend the preset with the following code:

editor:
  config:
    stylesSet:
      - { name: "Button", element: "a", attributes: { class: "button"} }

Here we simply define a new style with the name Button that we can apply to all elements of the type . This then gives that element the class button.

Put together the custom RTE preset, custom.yaml, would look something like this:

# 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:my_extension/Resources/Public/Css/rte.css"
    stylesSet:
      - { name: "Button", element: "a", attributes: { class: "button"} }

In our RTE we will now be able to pick our Button style from the styles dropdown as soon as we highlight a link element.