CKEditor中为标题元素添加.h1/.h2类实现对应尺寸渲染的技术问询

嘿，这个重复手写stylesSet配置的问题我太懂了——一个个写不仅费时间，后期维护也麻烦！其实用JavaScript的循环就能轻松搞定，让代码简洁很多。

方法一：自定义特定映射组合 #

如果你只需要部分标题元素和类的映射（比如只需要h2/h3/h4转为h1风格），可以先定义好需要的映射关系，再通过循环生成配置项：

// 定义你需要的标题元素与目标类的映射
const headingMappings = [
  { element: 'h2', targetClass: 'h1' },
  { element: 'h3', targetClass: 'h1' },
  { element: 'h4', targetClass: 'h1' },
  { element: 'h1', targetClass: 'h2' },
  { element: 'h3', targetClass: 'h2' },
  // 可根据需求继续添加其他组合
];

// 循环生成stylesSet配置
config.stylesSet = headingMappings.map(mapping => ({
  name: `${mapping.element} as ${mapping.targetClass}`,
  element: mapping.element,
  attributes: { 'class': mapping.targetClass }
}));

这样后续要加新的映射，只需要在headingMappings数组里新增一行即可，不用重复写相同的对象结构。

方法二：生成全量映射组合 #

如果需要所有标题元素（h1-h6）都能映射到任意.h1-.h6类，可以用嵌套循环自动生成所有可能的组合（还能跳过元素和类相同的冗余项）：

const headingElements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
const targetClasses = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];

config.stylesSet = [];

// 嵌套循环生成所有有效映射
headingElements.forEach(el => {
  targetClasses.forEach(cls => {
    // 跳过元素与类名一致的情况（比如h1加.h1类，没必要）
    if (el !== cls) {
      config.stylesSet.push({
        name: `${el} as ${cls}`,
        element: el,
        attributes: { 'class': cls }
      });
    }
  });
});

这种方式一次性生成所有你可能需要的样式选项，完全不用手动逐个编写。

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