如何解决CKEditor插件中标题边框自动变为双线的问题

我之前也碰到过类似CKEditor样式被自动篡改的糟心事，给你几个实用的排查和解决方向：

• 检查CKEditor内置样式的覆盖问题
  CKEditor自带的content.css文件里可能对标题（h1-h6）预设了边框样式，会覆盖你手动设置的单线边框。你可以找到CKEditor安装目录下的content.css，定位到对应的标题选择器，把border属性改成你需要的单线样式；或者给你的标题添加一个自定义类，用更具体的CSS选择器来提高优先级，比如：

  .custom-title {
    border-bottom: 1px solid #333;
    /* 如果还是被覆盖，可以临时用!important，不过尽量优先用更具体的层级选择器，比如 .article .custom-title */
  }
  

• 排查HTML结构的自动变化
  CKEditor的自动格式化功能有时候会给标题额外包裹标签（比如<span>或<div>），或者自动补充样式属性，导致边框叠加成双线。你可以在CKEditor的config.js里调整相关配置，关闭不必要的自动格式化：

  config.autoParagraph = false; // 禁止自动给内容包裹<p>标签
  config.removeFormatAttributes = ''; // 避免编辑器移除自定义的样式属性
  config.disableAutoInline = true; // 禁止自动生成内联元素
  

  编辑后可以查看页面源代码，确认标题的HTML结构有没有被额外修改。

• 检查第三方插件的干扰
  如果你给CKEditor安装了格式类、样式类的第三方插件，它们可能会自动给标题应用预设样式。可以尝试临时禁用最近添加的插件，看看边框是否恢复正常；或者在CKEditor的样式管理器中，删除那些会生成双线边框的预设样式。

• 使用自定义样式集规范标题样式
  为了避免手动设置样式被编辑器篡改，你可以在CKEditor中定义自己的样式集，让用户直接选择预设的单线边框标题：

  config.stylesSet = [
    { name: '单线边框标题（H1）', element: 'h1', styles: { 'border-bottom': '1px solid #333' } },
    { name: '单线边框标题（H2）', element: 'h2', styles: { 'border-bottom': '1px solid #333' } }
  ];
  

  这样用户编辑时直接选择这个样式，就不会出现边框被自动修改的问题了。

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