TYPO3 CKE 编辑器允许 data-attribute

Question

我已经添加了

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

到我的 yaml 配置。我可以在编辑器代码中 select 数据属性（并且看到它是正确的）。但是在保存内容元素后，TYPO3 也从代码中删除了 data-tesst="test"。

我该如何解决这个问题？感谢帮助！马丁

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

页码：

RTE { default { preset = mw_theme } }`

Answer 1

这取决于很多因素和很多其他配置，但您似乎是。一种非常常见的可行方法是将 extraAllowedContent 定义为您的 yaml 中的附加配置设置，例如：

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

或者如果我对另一行理解正确，也允许 dt/dd/dl:

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

如果是后者，也许 EXT:rte_ckeditor_dl 值得一看，以便获得创建该列表的按钮。

Answer 2

我找到了解决方案：

    extraAllowedContent:
  p[data-test];

Answer 3

要允许将数据属性从 RTE 字段保存到数据库，您需要确保：

1) RTE (CKEditor) 不会剥离属性。这可以使用 extraAllowedContent 进行配置。下面是一个示例，如何在允许数据属性和类.

的默认规则之外额外允许 id 属性

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

如果你只需要添加数据属性，则不需要上面的配置，可以依赖默认配置（来自rte_ckeditor/Configuration/RTE/Editor/Base.yaml），因为那里默认允许数据属性。

要测试此配置部分，请转到您的 RTE，单击 "view source" 按钮切换回来并再次切换，看看该属性是否消失了。如果它仍然存在，则表示您的 RTE 配置允许它。

2) 然后您需要配置 PHP 方面 - 在数据保存到数据库之前发生的数据转换。参见手册章节：https://docs.typo3.org/m/typo3/reference-coreapi/master/en-us/ApiOverview/Rte/Transformations/Process.html#transformations-process

下面是允许 data-abc 属性转换的示例（取自 RTE yaml 预设）（除了默认允许的属性）。

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

所以在你的情况下，你在转换部分缺少正确的配置。

TYPO3 CKE 编辑器允许 data-attribute

TYPO3 CKE Editor allow data-attribute

typo3

ckeditor

typo3-9.x