Compiled CSS, JS
Download source code
Clone or Fork via Github
Visit us on GitHub to clone or fork the Summernote project. 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.
You can however, and a lot of developers do these days, is include the stylesheet’s within the
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
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
You can use Summernote without Bootstrap using
Initialize Summernote with options
Height and Focus
If you set focus option, cursor will focus editable area after initialize Summernote.
If you set height, you can see resizebar below.
If you don’t set the height, editable area’s height will change according to contents.
press enter key.
get & set Code
Get the HTML contents of the first summernote in the set of matched elements.
If you initialize multiple editor, You can get the HTML content of the second summernote with jQuery eq.
A string of HTML to set as the content of each matched element.
for more detail api: deep dive with api
destroy and code
After v0.7.0, direct jquery methods,
codewere removed for avoiding conflict with other jquery libraries. You can call this methods with summernote api.
Include libraries with lang file. eg)
Run the script with locale option.
More Summernote languages: languages
3rd parties available in django, rails, angular and so on.
Handy update for your django admin page.
Ruby On Rails
This gem was built to gemify the assets used in Summernote.
AngularJS directive to Summernote.
Summernote widget for Wicket Bootstrap.
Example about using summernote with webpack.
Example about using summernote with meteor.
Example for using Summernote with elFinder which uses a PHP Backend.