TYPO3 CKE Editor allow data-attribute

I have added

- { name: "Data Test", element: "p", attributes: { 'data-test': "test" } }

to my yaml config. I can select data attribute (and see it correct) in editor code. But after saving content elment TYPO3 is also deleting data-tesst="test" from code.

How can I solve this? Thanks for help! Martin

buttons:
  link:
    relAttribute:
      enabled: true
    targetSelector:
      disabled: false
    properties:
      class:
        allowedClasses: 'button, button_hell'
      title:
        readOnly: false

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


editor:
  config:
    # css definitions for the editor
    contentsCss: "EXT:mw_theme/Resources/Public/Css/rte.css"
    # can be "default", but a custom stylesSet can be defined here, which fits TYPO3 best
    format_tags: "p;h1;h2;h3;h4;h5;h6;pre;address"

    stylesSet:
      # custom block level style
      - { name: "Button", element: "a", attributes: { 'class': "button" } }
      - { name: "Test", element: "p", attributes: { 'data-test': "test" } }

    toolbar:
      - [ 'Format', 'Styles' ]
      - [ 'Bold', 'Italic', 'Underline', 'Blockquote', 'Subscript', 'Superscript']
      - [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', 'HorizontalRule' ]
      - [ 'NumberedList', 'BulletedList']
      - [ 'Link', 'Unlink', 'Anchor', 'Table', 'SpecialChar', 'CodeSnippet', 'Youtube' ]
      - [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord' ]
      - [ 'Undo', 'Redo', 'RemoveFormat', 'ShowBlocks' ]
      - [ 'Source', 'Maximize', 'About']
    removePlugins:
      - image
    extraPlugins:
      - justify
    justifyClasses:
      - text-left
      - text-center
      - text-right
      - text-justify
Allow tags
processing:
  allowTags:
    - dl
    - dt
    - dd

page ts:

RTE { default { preset = mw_theme } }`

Solution

To allow saving data attributes to db from RTE fields, you need to ensure that:

1) RTE (CKEditor) will not strip the attributes. This is configurable using extraAllowedContent. Below is an example how to allow id attributes additionally to the default rule which allows data attributes and classes.

editor:
  config:
    extraAllowedContent:
      - "*(*)[data-*]"
      - "*[id]"

If you only need to add data attributes, you don't need the configuration above and can relay on default configuration (from rte_ckeditor/Configuration/RTE/Editor/Base.yaml), as data attributes are allowed by default there.

To test this configuration part, go to your RTE, click on the "view source" button switch back and switch again and see if the attribute is gone. If it's still there it means your RTE config allows it.

2) then you need to configure PHP side of things - data transformation which happens before data is saved to db. See manual chapter: https://docs.typo3.org/m/typo3/reference-coreapi/master/en-us/ApiOverview/Rte/Transformations/Process.html#transformations-process

Below is an example (taken from RTE yaml preset) of allowing data-abc attribute in transformation (in addition to attributes which are allowed by default).

processing:
  allowAttributes: [class, id, title, dir, lang, xml:lang, itemscope, itemtype, itemprop, data-abc]

So in your case you were missing proper configuration on the transformation part.