Clone or Fork via Github
Visit us on GitHub to clone or fork the Summernote project.
Requires HTML5 doctype
Bootstrap uses certain HTML elements and CSS properties which require HTML5 doctype. Include <!DOCTYPE html> in the beginning of all your projects.
Summernote uses the Open Source libraries jQuery and Bootstrap, if you are using the Boostrap 3 or 4 versions of Summernote, or just jQuery if you use the Lite version of Summernote.
Include the Following code in the head area of your HTML page.
Don’t forget to change the file’s path if you downloaded summernote in a different folders.
After v0.8.0, You don’t have to include fontawesome for displaying Summernote’s icons. But You can still use fontawesome for your custom icons. For more details, please visit custom buttons section.
After v0.8.18, You have the possibility to override summernote icons with your custom ones. For more details, please visit custom icons section.
Summernote can be used with or without a form.
To use without a form, we suggest using a div in the body; this element will then be used where you want the Summernote editor to be rendered within your page.
To use within a form, is pretty much the same as above, but rather than a div, we recommend using a textarea element inside a form, which should include a name attribute so when the form is submitted you can use that name to process the editors data on your backend. Also, if using Summernote inside a form to set the attribute method="post" to allow larger sized editor content to parse to the backend, if you don’t your data either may not parse, or will be truncated.
Run the script below when document is ready!
You can also test running example. Save below code as index.html and open it with your browser.
For Bootstrap 4
You can also use Summernote with Bootstrap 4 using summernote-bs4.js and summernote-bs4.css.
For bootstrap 5
You can also use Summernote with Bootstrap 5 using summernote-bs5.js and summernote-bs5.css.
Without Bootstrap (lite)
You can use Summernote without Bootstrap using summernote-lite.js and summernote-lite.css.
Initialize Summernote with options
Height and Focus
If you set focus option, cursor will focus editable area after initialize Summernote.