TYPO3 CKE Editor allow data-attribute

Question

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

Answer 1

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.

Answer 2

This depends on a whole lot of factors and a whole lot of your other configuration, but you seem to be. One quite common way, which could work would be to define extraAllowedContent as an additional config setting in your yaml like:

editor:
  config:
    extraAllowedContent: '*(*)[data-*]'

Or if i understood the other line right, also allow dt/dd/dl:

editor:
  config:
    extraAllowedContent:
      - '*(*)[data-*]'
      - dd
      - dl
      - dt

If the latter is the case, perhaps EXT:rte_ckeditor_dl might be worth a look, in order to get buttons to create that list.

Answer 3

I found solution:

    extraAllowedContent:
  p[data-test];