CKEDITOR配置：将h1-h3标签转换为h4-h6并限制头部标签

我懂你要实现的需求：既要在CKEditor编辑器里只允许使用h4、h5、h6这几个标题标签，又要在调用getData()的时候，自动把内容里的h1、h2、h3分别转换成h4、h5、h6。你之前尝试用htmlParser.filter没成功，大概率是没走完完整的HTML解析-处理-序列化流程，也没正确修改getData事件的返回值，我来给你修正一下代码：

完整解决方案代码 #

// 监听getData事件，处理标题标签转换
CKEDITOR.instances['editor1'].on('getData', function(e) {
  // 获取编辑器原始的HTML内容
  const rawHtml = e.data.dataValue;
  
  // 创建自定义过滤器，指定标题标签的转换规则
  const filter = new CKEDITOR.htmlParser.filter({
    elements: {
      h1: elem => elem.name = 'h4',
      h2: elem => elem.name = 'h5',
      h3: elem => elem.name = 'h6'
    }
  });
  
  // 初始化HTML解析器和写入器
  const parser = new CKEDITOR.htmlParser();
  const writer = new CKEDITOR.htmlParser.basicWriter();
  
  // 解析原始HTML为DOM片段
  parser.parse(rawHtml);
  // 对DOM片段应用过滤器规则
  filter.applyTo(parser.fragment);
  // 将处理后的DOM片段重新序列化为HTML字符串
  parser.fragment.writeHtml(writer);
  
  // 把处理后的内容赋值回事件对象，作为getData()的最终返回值
  e.data.dataValue = writer.getHtml();
});

// 编辑器初始化配置：编辑阶段就禁止h1-h3，只允许指定标签（可选但推荐）
CKEDITOR.replace('editor1', {
  allowedContent: 'h4 h5 h6 p strong em; a[!href]; img[!src,alt]'
  // 你可以根据自己的需求，添加更多允许的标签和属性
});

关键说明 #

1. 正确修改getData返回值：CKEditor的getData事件里，最终返回的内容是存在e.data.dataValue里的，你之前的代码可能没正确指向这个属性，导致处理后的内容没生效。
2. 完整的HTML处理流程：需要先把原始HTML解析成CKEditor能处理的DOM片段，应用过滤器后再重新序列化为HTML字符串，不能直接对原始字符串操作过滤器。
3. 编辑阶段的限制（可选）：加上allowedContent配置后，编辑器会直接禁止用户插入h1-h3标签，从源头减少转换需求，和getData阶段的转换形成双重保障。

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