时间戳

首页 > 解决方案 > TYPO3 CKE 编辑器允许数据属性

ckeditor - TYPO3 CKE 编辑器允许数据属性

问题描述

我已经添加了

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

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

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

纽扣：
  关联：
    rel属性：
      启用：真
    目标选择器：
      禁用：假
    特性：
      班级：
        allowedClasses: '按钮，button_hell'
      标题：
        只读：假

进口：
- {资源：“EXT：rte_ckeditor/Configuration/RTE/Processing.yaml”}
- {资源：“EXT：rte_ckeditor/Configuration/RTE/Editor/Base.yaml”}
- {资源：“EXT：rte_ckeditor/Configuration/RTE/Editor/Plugins.yaml”}


编辑：
  配置：
    # 编辑器的 CSS 定义
    contentsCss：“EXT：mw_theme/Resources/Public/Css/rte.css”
    # 可以是“默认”，但是这里可以定义一个自定义样式集，最适合TYPO3
    格式标签：“p;h1;h2;h3;h4;h5;h6;pre;地址”

    样式集：
      # 自定义块级样式
      - {名称：“按钮”，元素：“a”，属性：{“类”：“按钮”}}
      - {名称：“测试”，元素：“p”，属性：{“数据测试”：“测试”}}

    工具栏：
      - ['格式'，'样式']
      - ['粗体'，'斜体'，'下划线'，'块引用'，'下标'，'上标']
      - ['JustifyLeft'，'JustifyCenter'，'JustifyRight'，'JustifyBlock'，'Horizo​​ntalRule']
      - ['编号列表'，'子弹列表']
      - ['Link', 'Unlink', 'Anchor', 'Table', 'SpecialChar', 'CodeSnippet', 'Youtube' ]
      - ['剪切'，'复制'，'粘贴'，'PasteText'，'PasteFromWord']
      - ['撤消'，'重做'，'RemoveFormat'，'ShowBlocks']
      - ['来源'，'最大化'，'关于']
    删除插件：
      - 图片
    额外插件：
      - 证明合法
    证明类：
      - 文本左
      - 文本中心
      - 文本右
      - 文本对齐
允许标签
加工：
  允许标签：
    - dl
    -dt
    -dd

页面 ts：

RTE { default { preset = mw_theme } }`

标签： ckeditortypo3typo3-9.x

解决方案

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

1）RTE（CKEditor）不会剥离属性。这可以使用 extraAllowedContent 进行配置。下面是一个示例，如何在允许数据属性和类的默认规则之外允许 id 属性。

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

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

测试这个配置部分，去你的RTE，点击“查看源码”按钮切换回来再切换，看看属性是不是没了。如果它仍然存在，则意味着您的 RTE 配置允许它。

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

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

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

因此，在您的情况下，您在转换部分缺少正确的配置。

推荐阅读