summernote 编辑器下拉菜单隐藏在另一个编辑器后面

Question

重现步骤：

单击字体/颜色下拉菜单

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

如有任何帮助，我们将不胜感激。

Answer 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，没有问题（我只是检查它仍然有效）。

我没有关于示例页面上有什么问题的答案，但我也没有足够的声誉来 post 这部分 answer/suggestion 作为评论。如果你 post 一个 jsfiddle 遇到你的问题，我可能会提供进一步的帮助。

Answer 2

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

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

Answer 3

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

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。

Answer 4

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

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

summernote 编辑器下拉菜单隐藏在另一个编辑器后面

summernote editor dropdown is hiding behind another editor

html

css

text-editor

summernote