如何修改CKEditor.js使清除格式功能移除锚点标签及标题标签

我之前在项目里也碰到过这个头疼的问题——点「清除格式」按钮，普通的加粗、斜体都能正常移除，但标题标签和锚点标签就是顽固地留在那儿。后来研究了CKEditor的核心逻辑，找到了修改ckeditor.js的具体方法，亲测有效：

1. 定位ckeditor.js中的关键配置 #

先找到你项目里的ckeditor.js文件（压缩版也没问题，直接搜关键词就行），定位到removeFormat命令的元素移除列表。你可以搜索removeFormatRemoveElements这个配置项，或者直接找包含["b","big","code",...]的数组片段——这就是默认会被清除格式功能移除的元素清单。

2. 修改元素移除列表 #

默认的清单里没包含标题标签（H1-H6）和锚点标签（a），我们需要把它们加进去：

• 如果是未压缩的源码，找到类似这样的代码：

  config.removeFormatRemoveElements = ['b', 'big', 'code', 'del', 'dfn', 'em', 'font', 'i', 'ins', 'kbd', 'q', 's', 'samp', 'small', 'span', 'strike', 'strong', 'sub', 'sup', 'tt', 'u', 'var'];
  

  修改为：

  config.removeFormatRemoveElements = ['b', 'big', 'code', 'del', 'dfn', 'em', 'font', 'i', 'ins', 'kbd', 'q', 's', 'samp', 'small', 'span', 'strike', 'strong', 'sub', 'sup', 'tt', 'u', 'var', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'a'];
  

• 如果是压缩后的ckeditor.js，找到对应的数组（比如["b","big","code",...]），直接在数组末尾追加"h1","h2","h3","h4","h5","h6","a"即可。

3. 测试验证 #

保存修改后的ckeditor.js，刷新页面重新加载编辑器：

• 选中一段带H1-H6标签的文本，点击「清除格式」，标题样式会被移除，文本变成普通段落格式；
• 选中带锚点的链接文本，点击「清除格式」，锚点标签会被移除，只保留纯文本内容。

小补充：如果不想修改核心的ckeditor.js，也可以在初始化CKEditor时通过自定义配置覆盖这个选项，比如：

CKEDITOR.replace('editor', {
  removeFormatRemoveElements: ['b', 'big', 'code', 'del', 'dfn', 'em', 'font', 'i', 'ins', 'kbd', 'q', 's', 'samp', 'small', 'span', 'strike', 'strong', 'sub', 'sup', 'tt', 'u', 'var', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'a']
});

不过既然你明确要求修改ckeditor.js，那前面的方法更贴合你的需求。

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