如何移除TinyMCE 5编辑器（inline模式及Distraction-Free的inline激活场景）周围的蓝色线条

我来帮你搞定这两个场景下的蓝色线条问题——这其实都是TinyMCE默认的焦点样式在搞怪，咱们用自定义CSS就能轻松覆盖掉：

场景一：Inline模式下的蓝色线条 #

当你使用TinyMCE的inline模式时，编辑器获得焦点时出现的蓝色线条，是浏览器或编辑器默认的outline或box-shadow样式。你可以通过以下CSS规则移除它：

/* 移除Inline模式编辑器的焦点蓝色线条 */
.mce-inline-editor:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* 若编辑器内容区域仍有线条，补充这条规则 */
.mce-inline-editor .mce-content-body:focus {
  outline: none !important;
}

把这段代码添加到你项目的全局样式表中，或者通过TinyMCE的content_css配置引入自定义样式文件即可。

场景二：Distraction-Free的Inline实现方案下的激活蓝色线条 #

在无干扰（Distraction-Free）的inline模式下，编辑器激活时的蓝色线条通常关联着mce-distraction-free这个专属类。针对这种场景，你需要针对性地覆盖样式：

/* 移除Distraction-Free Inline模式激活时的蓝色线条 */
.mce-distraction-free .mce-inline-editor:focus,
.mce-distraction-free.mce-active .mce-inline-editor {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

小提示 #

如果添加后还是没生效，建议用浏览器开发者工具（按F12）选中编辑器元素，查看当前生效的样式规则，找到对应的选择器调整——毕竟不同的项目可能会有自定义的类名或样式优先级问题，!important在这里是为了确保我们的样式能覆盖TinyMCE的默认样式。

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