如何在TYPO3后端RTE中配置允许自定义CSS类？

1. 准备自定义CSS文件 #

• 先在项目里创建自定义CSS文件，推荐放在站点包扩展的Resources/Public/Css/目录下（比如typo3conf/ext/your_site_package/Resources/Public/Css/rte-custom.css），也可以存在fileadmin/css/rte-custom.css
• 在文件里写入你需要的自定义样式，示例：

.rte-highlight {
  background-color: #fff3cd;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
}
.rte-callout {
  border-left: 4px solid #007bff;
  padding-left: 1rem;
  margin: 1rem 0;
}

2. 配置RTE的处理规则（default.yaml） #

• 不要直接修改系统扩展rte_ckeditor里的默认配置，在自己的站点包扩展里创建覆盖配置：typo3conf/ext/your_site_package/Configuration/RTE/Processing/default.yaml（没有文件夹就手动建）
• 打开这个文件，添加以下配置，指定允许的类和预览用的CSS文件：

processing:
  # 允许使用div、span标签（根据你的需求调整）
  allowTags:
    - div
    - span
  # 允许元素带class属性
  allowAttributes:
    - class
  # 列出所有允许的自定义CSS类名
  allowedClasses:
    - rte-highlight
    - rte-callout
  # 引入自定义CSS，让RTE编辑器里能实时预览样式
  contentCSS:
    - "EXT:your_site_package/Resources/Public/Css/rte-custom.css"
    # 如果用fileadmin路径，改成：
    # - "fileadmin/css/rte-custom.css"

3. 给RTE工具栏添加样式选择按钮（可选） #

如果想让编辑者直接从工具栏选样式，不用手动输入类名，需要配置编辑器的工具栏：

• 在站点包扩展里创建typo3conf/ext/your_site_package/Configuration/RTE/Editor/Config/default.yaml
• 添加以下配置：

editor:
  config:
    # 定义样式选项，对应你的自定义类
    stylesSet:
      - { name: '高亮文本', element: 'span', attributes: { class: 'rte-highlight' } }
      - { name: '提示框', element: 'div', attributes: { class: 'rte-callout' } }
    # 调整工具栏，把Styles按钮加进去（示例放在基础样式后面）
    toolbar:
      - [ 'Bold', 'Italic', 'Underline', 'Styles' ]

4. 激活配置并清缓存 #

• 登录TYPO3后端，进入「系统」>「清除缓存」，选择「全部缓存」清除
• 刷新后端页面，打开任意带RTE的内容元素测试

5. 前端渲染样式 #

别忘了把自定义CSS文件引入到前端模板，不然前端看不到样式：

• 在站点包的setup.typoscript里添加：

page.includeCSS.rteCustom = EXT:your_site_package/Resources/Public/Css/rte-custom.css
# 用fileadmin路径的话改成：
# page.includeCSS.rteCustom = fileadmin/css/rte-custom.css

内容的提问来源于stack exchange，提问作者Manasvi Bhadiyadra