TYPO3 11.5：CKEditor加载HTML时替换特定标签为非换行空格问题求助

问题背景 #

在Composer安装的TYPO3 11.5.20项目中，需让内置CKEditor兼容boxicons格式标签（如<i class="bxs bx-bank"></i>，无需编辑器内显示图标）。当前状态：

• RTE处理选项已允许该标签
• 前端页面及内容元素加载时的网络数据均正确包含该标签
  但切换至CKEditor源码视图后，<i>标签会被替换为 。

尝试在自定义RTE预设中设置editor.config.allowedContent: true禁用Advanced Content Filter，无效果。自定义预设基于默认CKEditor预设修改，代码如下：

imports:
    # - { resource: "EXT:lraffb_intern/Configuration/RTE/Processing.yaml" }
    - { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Base.yaml" }
    - { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Plugins.yaml" }
    - { resource: "EXT:rte_ckeditor_image/Configuration/RTE/Plugin.yaml" }

editor:
  config:
    allowedContent: true

    format_tags: "p;h1;h2;h3;h4;h5;pre"

    toolbarGroups:
      - { name: styles, groups: [ styles, format ] }
      - { name: basicstyles, groups: [ basicstyles ] }
      - { name: paragraph, groups: [ list, indent, blocks, align ] }
      - { name: links, groups: [ links ] }
      - { name: clipboard, groups: [ clipboard, cleanup, undo ] }
      - { name: editing, groups: [ spellchecker ] }
      - { name: insert, groups: [ insert ] }
      - { name: tools, groups: [ table, specialchar, insertcharacters ] }
      - { name: document, groups: [ mode ] }

    justifyClasses:
      - text-left
      - text-center
      - text-right
      - text-justify

    extraPlugins:
      - justify
      - autolink
      - editorplaceholder

    removeButtons:
      - Anchor
      - Underline
      - Strike
      - Styles

注：原自定义Processing.yaml因部分选项不可靠已停用，改用TSConfig处理旧版RTE，TSConfig代码需用时可提供。

问题原因 #

1. CKEditor 4（TYPO3 11内置版本）默认会清理无内容的内联元素，空<i>标签会被识别为无效内容替换。
2. 直接设置allowedContent: true可能被TYPO3基础预设的ACF规则覆盖，未真正生效。
3. 后端HTMLparser（即便用TSConfig）若未明确允许<i>标签及class属性，也会在保存时处理标签。

解决方法 #

1. 精确配置CKEditor ACF规则 #

替换allowedContent: true为明确允许<i>标签及class属性，避免被基础预设覆盖：

editor:
  config:
    # 允许<i>标签及其class属性
    allowedContent:
      i[class]: true
    # 保留原有其他配置...

2. 保护空<i>标签不被清理 #

添加protectedSource配置，让CKEditor忽略对空<i>标签的内容检查：

editor:
  config:
    protectedSource:
      - /<i[^>]*><\/i>/g
    # 配合上述allowedContent配置

3. 配置TSHTMLparser允许<i>标签 #

在TSConfig中添加规则，确保后端处理时保留标签：

RTE.default.proc {
  # 添加允许的标签
  allowTags := addToList(i)
  # 添加允许的属性
  allowAttribs := addToList(class)
  # 保留未匹配的标签
  keepNonMatchedTags = 1
  dontRemoveUnknownTags_db = 1
}

4. 清除缓存 #

修改配置后需清除TYPO3全部缓存（页面缓存、配置缓存、CKEditor缓存），确保新配置生效。

验证步骤 #

1. 保存修改后的RTE预设与TSConfig
2. 清除所有缓存
3. 新建/编辑内容元素，在源码视图插入<i class="bxs bx-bank"></i>
4. 切换至可视化视图再切回源码，检查标签是否保留

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