Summernote Editor Compatible With Bootstrap 5

Summernote Rich Text Editor Compatible with Bootstrap 5
Code Snippet:Summernote Editor
Author: Asif Mughal
Published: January 11, 2024
Last Updated: January 22, 2024
Downloads: 3,764
License: MIT
Edit Code online: View on CodePen
Read More

If you want to use the Summernote WYSIWYG editor with Bootstrap 5, there’s a simple solution. The standard Summernote version doesn’t work well with Bootstrap 5, but you can integrate it smoothly using the Summernote Lite version.

With this modified Summernote editor, you get the best of both worlds. You can enjoy Bootstrap 5’s styling capabilities while still having access to Summernote’s powerful editing features. The integration is optimized, so you won’t face any dropdown-related issues. Managing headings, colors, and fonts becomes hassle-free.

How to Create Bootstrap 5 Compatible Summernote Editor

1. First of all, load the  Bootstrap 5 CSS and Summernote CSS by adding the following CDN links into the head tag of your HTML document.

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- Summernote CSS -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">

2. Create a div element (or textarea) with a unique id as follows:

<div id="summernote"></div>

3. To customize the Summernote editor, add the following CSS code to your project. Feel free to define your own CSS rules to match your web/app interface:

/* Summernote Additional CSS */
.note-editable{
   background: #fff;
}
.note-btn.dropdown-toggle:after {
   content: none;
}
.note-btn[aria-label="Help"]{
   display: none;
}

.note-editor .note-toolbar .note-color-all .note-dropdown-menu, .note-popover .popover-content .note-color-all .note-dropdown-menu{
   min-width: 185px;
}
/* Customize Summernote editor */
.note-editor {
/* Your custom styles here */
}

.note-editable {
/* Your custom styles here */
}

/* Toolbar customization */
.note-toolbar {
/* Your custom styles here */
}

/* Buttons customization */
.note-btn {
/* Your custom styles here */
}

4. Now, load jQuery, Bootstrap 5 JS, and Summernote JS, by adding the following CDN linkx just before the closing body tag (</body>):

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<!-- Summernote JS -->
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>

5. Finally, initialize the Summernote plugin in the jQuery document ready function to activate the text editor.

$('#summernote').summernote({
        placeholder: 'Hello Bootstrap 5',
        tabsize: 2,
        height: 400
 });

I’ve added a placeholder with the id “summernote” for the element where you want to activate the Summernote text editor. Replace this class with the appropriate selector for your specific div or textarea where you want to enable the editor. Once the document is ready, the Summernote plugin will be initialized on the selected element, allowing you to use the WYSIWYG editor in your project.

That’s all! hopefully, you have successfully created Summernote Editor compatible with Bootstrap 5. If you have any questions or suggestions, feel free to comment below.

2 thoughts on “Summernote Editor Compatible With Bootstrap 5”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...