Zblog的后台ueditor编辑器如何隐藏H1标签显示

3个月前 (04-01)Zblog相关1801

前些时间看到一个老外网站关于SEO的知识介绍，建议在网页的文章标题处使用H1标签，文章内的章节标题根据层次从上到下使用H2-H6的标签。

本人有个不太好的习惯，在文章正文内使用H标签比较乱，许多情况下使用了H3标签，却没有使用H2标签。另外如上所述，理论上正文内使用H1标签是错误的，所以Ueditor在此处也不应该出现H1标签。故想出一个促使自己修正习惯的办法，即把Ueditor内的H1标签去除，然后要加H标签的时候会首先看到H2标签，所以一般就强迫自己加上H2标签了。

如何修改呢，经过搜索研究，发现这个办法最简单实用。修改文件为zb_users/plugin/UEditor/themes/iframe.css，在其中加入如下自定义代码即可：

.ueditor-container h1 {
    display: none !important;
}

或者使用下面我通过审查元素得到的类代码，这样或许更准确

.edui-default .edui-for-paragraph .edui-listitem-label .edui-for-h1 {
   display: none !important;
}

原理上是在后台通过自定义CSS实现了隐藏H1标签，修改后效果参上面图片。如果你还要隐藏Ueditor其他标签，可以参考此写法，希望对看到本文的朋友有帮助。事实上本人还想修改隐藏段落字样，貌似没生效，还有待继续研究。

修改代码后记得要Zblog后台首页清除缓存，然后浏览器清除缓存，后台重新登录才能生效。

后记：上面修改代码时而生效，时而失效，太讨厌了，不得已直接修改Ueditor编辑器内CSS，从根本上解决问题，修改文件为zb_users/plugin/UEditor/themes/default/css/ueditor.css 具体如下代码

.edui-default .edui-for-paragraph .edui-listitem-label .edui-for-p {
    font-size: 22px;
    line-height: 27px;
 display: none;
}
.edui-default .edui-for-paragraph .edui-listitem-label .edui-for-h1 {
    font-weight: bolder;
    font-size: 32px;
    line-height: 36px;
 display: none;
}