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?
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?
Share Improve this question edited Oct 29, 2016 at 11:39 Haile 3,1803 gold badges27 silver badges43 bronze badges asked Oct 29, 2016 at 10:45 Michael MotúzMichael Motúz 1771 gold badge5 silver badges13 bronze badges10 Answers
Reset to default 5Try this:
$("#yourid").summernote();
$('.dropdown-toggle').dropdown();
I have tried all these answers but this worked for me :
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote-lite.min.js"></script>
Check to see that jQuery and Bootstrap are only being loaded once
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;
}
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/[email protected]/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.js"></script>
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');
})
})
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');
})
})
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;}
Check your jquery version. jQuery for summernote should be upper than 3.0.0.
Try With this If you are using bootstrap5
The summernnote v.0.8.20 can't run in bootstrap5
https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote-lite.min.css
https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote-lite.min.js
Source github issue