Summernote 按钮高度不同

Posted 2023-03-22

【中文标题】Summernote 按钮高度不同

【英文标题】：Summernote buttons varying height

【发布时间】：2014-08-27 00:07:11

【问题描述】：

我在 Bootstrap 模式中有一个 Summernote 所见即所得的编辑器。它使用自定义工具栏。 （虽然，使用默认工具栏时仍然会出现这个问题）。

如下图所示，一些按钮的高度不同。颜色更改按钮旁边的下拉菜单尤其明显。

我是否缺少强制按钮大小相同的文件或定义？

这是我包含的 CSS 文件：

<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../css/theme.css" rel="stylesheet">
<link href="../css/summernote.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

这里是 javascript：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="../js/bootstrap.min.js"></script> 
<script src="../assets/js/docs.min.js"></script> 
<script src="../scripts/summernote.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(e)
    $('#news_editor').summernote(height:150,toolbar:[
    ['style',['bold','italic','underline','clear']],
    ['fontface',['fontname']],
    ['textsize',['fontsize']],
    ['fontclr',['color']],
    ['alignment',['ul','ol','paragraph']],
    ['insert',['link','picture','table']],
    ['adv',['codeview']]
    ]);
);
...

这是整个 html 文件：http://pastebin.com/G3Heae8J

【参考方案1】：

您会尝试更改 html5 文档类型吗？

http://getbootstrap.com/getting-started/#template

【讨论】：

谢谢，成功了。不幸的是，它没有解决我希望同时得到修复的另一个错误。发生的错误是：imgur.com/d44v2GX，但既然你回答了我的问题，我仍然会将你标记为正确。谢谢。

【参考方案2】：

我遇到了类似的问题。对我来说，我编写了一个通用的 CSS 规则，影响所有 divs、spans 和 ps，这导致一些包含 spans 的按钮大小错误。因此，如果前面的答案对您不起作用，请检查您的样式是否有违规规则。

【参考方案3】：

我也遇到了同样的问题。我不完全确定原因，但我认为这与我与 Summernote CSS 和我的应用程序中使用的其他 CSS 一起编译的默认引导 CSS 有关。

问题的底部是下拉按钮的行高太大。

我的解决方案是使用如下所示的自定义 CSS 进行覆盖，以强制新的 line-height 适合其余的底部

.note-toolbar .note-fontsize .note-btn-group button,
.note-toolbar .note-para .note-btn-group button 
    line-height: 12px !important;

请注意，我只强制使用 .note-fontsize 和 .note-para 组，因为这是类别中的“fontsize”按钮和“paragraph”按钮所在的位置。对于 OP，它将是 .note-textsize 和 .note-alignment