Summernote 编辑器下拉菜单隐藏在另一个编辑器后面答案

【问题标题】：summernote editor dropdown is hiding behind another editorSummernote 编辑器下拉菜单隐藏在另一个编辑器后面
【发布时间】：2018-12-31 03:40:06
【问题描述】：

重现步骤：

转到网址：https://summernote.org/examples/

点击字体/颜色下拉菜单

它没有重叠/隐藏在另一个编辑器后面

任何帮助将不胜感激。

【问题讨论】：

标签： css html text-editor summernote

【解决方案1】：

使用 Chrome，我在 Summernote 网站上的多编辑器示例中看到了相同的问题，其中下拉菜单被下面的编辑器工具栏遮挡。即使 z-index 显示正确（下拉菜单为 1000，下方工具栏为 500），我还是可以通过强制下方工具栏的 z-order 为 400 来使其正确显示。

但是，当我用解决方法创建一个 js fiddle 时，它的行为似乎正确。

Working JSFiddle

HTML

<div class="multiple"><p>summernote 1</p></div>
<div class="multiple"><p>summernote 2</p></div>
<div class="multiple"><p>summernote 3</p></div>
<div class="multiple"><p>summernote 4</p></div>
<div class="multiple"><p>summernote 5</p></div>

Javascript

$(document).ready(function() {
  $('.multiple').summernote();
});

我一直在使用多个编辑器的 Summernote 没有问题（我刚刚检查它是否仍然有效）。

我没有关于示例页面上的问题的答案，但我也没有足够的声誉将这个部分答案/建议作为评论发布。如果您针对您的问题发布 jsfiddle，我可能会提供进一步的帮助。

【讨论】：

【解决方案2】：

解决方法：将 second 编辑器的 z-index 设置为 0。

.note-editor {
  z-index: 0;
}

【讨论】：

我已经尝试过了，但是几乎有 7-8 个编辑器，所以对于每个编辑器，我必须设置一个比前一个更高的 z-index

【解决方案3】：

在您的页面中添加以下样式。

.note-toolbar {
    z-index: auto;
 }

【讨论】：

【解决方案4】：

我什至尝试了其他解决方案，但对我不起作用，或者不完全。这是我的解决方案：

if ($('.note-editor .note-toolbar').length) {
  var z_index = 900;
  $(".note-editor .note-toolbar").each(function(){
  $(this).css({'z-index': z_index});
  z_index--;
  });
}

只需复制并粘贴到您的 javascript 中（使用 jQuery）。循环浏览页面上的所有工具栏并设置它们的 z-index。

【讨论】：