如何在CKEditor4（TYPO3环境）中添加自定义字号类？

我在TYPO3中使用CKEditor4，希望自定义字号列表，用预设字号类替代内联样式。我在配置Yaml文件中尝试了如下配置变体：

fontSize_style: 
    - { name: "Small", element: "span", attributes: { class: "small"} }
    - { name: "Large", element: "span", attributes: { class: "large"} }

请问如何让该配置生效？另外，若将字号应用于h1标签，能否直接为h1添加类而非嵌套span？

一、让自定义字号配置生效的操作步骤 #

• 确认配置文件位置：TYPO3的CKEditor配置一般放在Configuration/RTE/Default.yaml，或者对应站点专属的RTE配置文件里，要保证你修改的是当前正在使用的那一份配置。
• 启用fontSize插件：检查RTE配置里是否开启了fontSize插件，需要在plugins列表中包含它，同时把FontSize加入工具栏选项，不然编辑器里不会显示字号选择器。示例配置片段：

  editor:
    config:
      plugins:
        - fontSize
      toolbar:
        - [ 'FontSize' ]
  

• 修正配置层级：你的fontSize_style配置必须放在editor.config层级下，完整的正确配置结构如下：

  editor:
    config:
      fontSize_style:
        - { name: "Small", element: "span", attributes: { class: "small"} }
        - { name: "Large", element: "span", attributes: { class: "large"} }
  

• 清除缓存并刷新：修改配置后，一定要清除TYPO3的系统缓存（包括页面缓存和配置缓存），之后刷新后端的CKEditor界面，配置才会生效。

二、直接为h1标签添加类的实现方法 #

可以直接给h1标签加类，不需要嵌套span，只需调整配置并确保CKEditor允许该操作：

1. 修改字号配置项：把对应选项的element改为h1，建议给类名加上前缀区分（比如h1-small），避免和普通文本的类冲突：

   fontSize_style:
     - { name: "H1 小号", element: "h1", attributes: { class: "h1-small"} }
     - { name: "H1 大号", element: "h1", attributes: { class: "h1-large"} }
   

2. 允许h1标签的class属性：在RTE配置的processing节点下，确保h1的class属性被允许，防止CKEditor自动过滤掉类：

   processing:
     allowedAttributes:
       h1: [ 'class' ]
   

3. 注意使用场景：这个配置只在你选中已有的h1文本时生效，选择对应字号选项后，CKEditor会直接给h1标签添加类。如果是要把普通文本转为带类的h1，建议配合编辑器的格式选择器使用，字号选项专注于给已有标签追加样式类。

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