Summernote 下拉菜单不适用于 Bootstrap 导航栏

Question

I use bootstrap framework for navbar and now I wanna use summernote WYSIWYG HTML editor.

If I import bootstrap.min.js script, navbar dropdown menu works perfectly, but dropdown in summernote not (color choose etc.).

If I remove this script, summernote works, but navbar dropdown not. I also remove jquery.min.js and create own script for add class open to dropdown-toggle because with jquery.min.js summernote don't appear.

Any solution for navbar and summernote dropdown function?

Answer 1

Try this:

$("#yourid").summernote();
$('.dropdown-toggle').dropdown();

Answer 2

检查 jQuery 和 Bootstrap 是否只加载一次

Answer 3

try that, i think you could be able to solve it by css

  .dropdown-menu > li > a {
           display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
  }

Answer 4

I had same problem, It was solved by replacing bootstrap version use this

<!-- include libraries(jQuery, bootstrap) -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

Answer 5

in summernote.css file find

.panel-heading.note-toolbar{padding:0 0 5px 5px;margin:0;}

change to

.panel-heading.note-toolbar{padding:0 0 5px 5px;margin:0;overflow-y: unset;}

Answer 6

Check your jquery version. jQuery for summernote should be upper than 3.0.0.

Answer 7

You can try using the below code as it works perfectly for me

let buttons = $('.note-editor button[data-toggle="dropdown"]');
    
    buttons.each((key, value)=>{
      $(value).on('click', function(e){
        $(this).attr('data-bs-toggle', 'dropdown')
        console.log()
        ata('id', 'dropdownMenu');
      })
    })

Answer 8

For After initializing, run this.

IN JS

let buttons = $('.note-editor button[data-toggle="dropdown"]');

buttons.each((key, value)=>{
  $(value).on('click', function(e){
    $(this).closest('.note-btn-group').toggleClass('open');
  })
})