CKEditor5类名渲染异常：UL的class被转移至LI标签求助

问题原因 #

CKEditor5的列表模块（List插件）默认会将<ul>/<ol>容器上的类名迁移到子<li>元素上，这是因为编辑器内部数据模型将列表样式关联到列表项而非容器。仅通过htmlSupport全局允许类名，无法覆盖这个内置的转换规则。

解决方案 #

1. 配置htmlSupport明确保留列表容器的类名 #

在编辑器初始化时，通过htmlSupport的规则明确允许<ul>的class属性，同时添加自定义转换器阻止类名迁移：

ClassicEditor.create(document.querySelector('#editor'), {
  htmlSupport: {
    allow: [
      {
        name: 'ul',
        attributes: {
          class: true // 允许所有类名，也可以用正则指定特定类如/^test$/
        }
      },
      {
        name: 'li',
        attributes: {
          class: true // 按需保留li的类名支持
        }
      }
    ],
    converters: [
      // 自定义转换器：保留<ul>的class属性
      {
        model: 'bulletedList',
        view: {
          name: 'ul',
          attributes: {
            class: modelElement => modelElement.getAttribute('class')
          }
        }
      },
      // 阻止<li>自动继承父<ul>的class
      {
        model: 'listItem',
        view: {
          name: 'li',
          attributes: {
            class: () => null // 仅保留用户手动添加的li类名
          }
        }
      }
    ]
  },
  // 确保列表插件不强制迁移样式
  list: {
    properties: {
      styles: true,
      startIndex: true,
      reversed: true
    }
  }
})
.catch(error => console.error(error));

2. 排查插件干扰 #

如果使用了Style插件，需检查其定义的列表样式是否强制将类名应用到列表项，可移除或调整相关样式配置：

styles: {
  // 移除或修改将类绑定到<li>的规则
}

3. 配置粘贴处理器（针对粘贴场景） #

如果问题出现在粘贴HTML内容时，需配置paste插件的解析规则：

paste: {
  htmlParser: {
    allow: [
      {
        name: 'ul',
        attributes: {
          class: true
        }
      }
    ]
  }
}

验证方法 #

1. 切换到编辑器源码模式，输入目标HTML：

<ul class="test">
  <li>twsafs</li>
  <li>twsafs</li>
</ul>

2. 切换回可视化模式后再切回源码模式，检查class="test"是否仍保留在<ul>标签上。

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