Compiled CSS, JS
Download source code
Clone or fork via Github
Visit us on GitHub to clone or fork the summernote project. project
Install with Bower
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 open source libraries(jQuery, Bootstrap).
Include the Following code in your HTML
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 icon. But You can still use fontawesome for your custom icon. For more detail, please visit to custom button section.
body; this targeted element will later be rendered to summernote editing tool.
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 in bootstrap 4 using
summernote-bs4.css. This is also beta version, as Bootstrap 4 is in beta. Below is an code example using bootstrap 4.
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.