Customize by Initializing various options and modules.
Custom toolbar, popover
Summernote allows you to customise the toolbar.
This is a toolbar with font style only.
You can compose a toolbar with pre-shipped buttons.
picture: open image dialog
link: open link dialog
video: open video dialog
table: insert a table
hr: insert a horizontal rule
- Font Style
fontname: set font family
fontsize: set font size
color: set foreground and background color
forecolor: set foreground color
backcolor: set background color
bold: toggle font weight
italic: toggle italic
underline: toggle underline
strikethrough: toggle strikethrough
superscript: toggle superscript
subscript: toggle subscript
clear: clear font style
- Paragraph style
style: format selected block
ol: toggle ordered list
ul: toggle unordered list
paragraph: dropdown for paragraph align
height: set line height
fullscreen: toggle fullscreen editing mode
codeview: toggle wysiwyg and html editing mode
help: open help dialog
The following settings are default options for toolbar buttons.
Air-mode has its own popover, not toolbar. You can customize it with
You can also setup buttons of the other popovers in the same way. The below settings are default options for popovers.
You can define a placeholder with the
You can define fontNames items with the
Summernote tests for fonts in fontNames before adding them to dropdown. This is a problem while using web fonts. It’s not easy picking a nice time to check the availability of web fonts. You can define a list of web fonts to be ignored with the
Dialogs can be placed in
body, not within Summernote. If you’re using Summernote within a modal dialog, please set this option as
By default, dialogs are shown and hidden without a fading effect. But you can turn it on by
Disable drag and drop
You can disable drag and drop with the
You can disable custom shortcuts with the
Blockquote breaking level
You can set blockquote breaking level with
Each configurable breaking level means:
- 0 - No break, the new paragraph remains inside the quote.
- 1 - Break the first blockquote in the ancestors list.
- 2 - Break all blockquotes, so that the new paragraph is not quoted. (default)
XSS protection for CodeView
Summernote provides a XSS protection for CodeView. It consists of filtering tags and whitelist for
Whitelist filter is turned on by default, but filtering tags is not. You can turn them on and off by options like below.
And, you can also add your own whitelist domains and use custom tag filters. Please check the default filter before customizing.
But you have to remember that this protection only affects on front-end side – to prevent attacks thoroughly, you have to check it on back-end side again.
You can initialize Summernote with
Then You can use the editor API through the
summernote method. This is an example code for inserting ‘hello world’ text.
It calls the editor module’s insertText method with ‘hello world’. The first argument is a string type which represents the module and its method. The rest are method’s arguments.
If you call the API without module name,
editor.methodName will be called.
A module named
editor supports several methods for editor’s basic behavior
Creates a range object for current user selection.
saveRange saves current user selection internally.
restoreRange restores currently saved range
Undoes and Redoes the last command
Sets focus in current summernote
Returns whether editor content is empty or not.
The editing area needs
<p><br></p> for focus, even if the editor content is empty. So Summernote supports this method for helping to check if editor content is empty.
You can toggle editable/codable view by API.
Clear the editor content and remove all stored history.
You can disable editor by API.
If you want to enable editor again, call API with
Font style API
bold, italic, underline, strikethrough
Set font style.
Set superscript or subscript.
Clean a style.
Set the Background or Foreground color.
Set font family.
Set font size.
justify left, right and more
Set the alignment of a Paragraph.
Insert a paragraph
Toggle ordered list or unordered list
indent and outdent
Indent or Outdent on current paragraph.
Change current paragraph as a
Change current paragraph as a
<h1> ~ <h6>.
Set line height.
Insert an image.
You can modify image with passing callback as second argument.
Insert an element or textnode.
Paste HTML string.
Create link and unlink.
Summernote support initialize callbacks and jquery’s custom event style callbacks.
Position of callbacks in options is changed after v0.7.0
After v0.7.0, every callbacks should be wrapped by
Callback only works with camel case string after v0.6.5
Lowercase string has been used for basic event name(ex:
onpaste). In contrast, callbacks name for advanced feature has been used with camel case string. This is inconsistent and confusing to use. So we rename all lowercase callback to camel case string.
onFocus, onBlur, onBlurCodeview
Override image upload handler(default: base64 dataURL on
You can upload image to server or AWS S3: more…
- IE9-10: DOMCharacterDataModified, DOMSubtreeModified, DOMNodeInserted
- Chrome, FF: input
Summernote also supports custom buttons. If you want to create your own button, you can simply define and use with options.
You can create a button object with $.summernote.ui. This buttons objects have the below properties.
- contents: contents to be displayed on the button
- tooltip: tooltip text when mouse over
- click: callback function to be called when mouse is clicked
Below codes is about simple button for inserting text ‘hello’.
You can see
render() which returns jquery object as button.
Using button with options
Let’s learn how to use the button on toolbar.
First, you can define buttons with option named
buttons which is a set of key-value. You can define custom button on toolbar options.
You can also use custom button on
popover in the same way.
For supporting expandable features, summernote was assembled by module system. This module system was built inspired by spring framework.
- Module: Module is a component.
- Context: Context is a kind of container. It has modules and editor’s states.
- Renderer: Renderer is a function for creating element.
- UI: UI is a set of renderers to build ui elements.
Module is a component for implementing feature and it has lifecycle. Module also has helper methods or methods related with lifecycle.
This method will be called when editor is initialized by $(‘..’).summernote();. You can attach events and created elements on editor elements(eg, editable, …).
This method will be called when editor is destroyed by $(‘..’).summernote(‘destroy’); You should detach events and remove elements on
This method is used for deciding whether module will be initialized or not.
Below are full codes of AutoLink module.
For more module examples: modules
Module with options
You can define custom module with options.
You can called module’s method with external API.
Plugin is a kind of external module. You can also define your own module with plugin.
Below link is a example of external module.
Plugin was redesigned by new module system after
Old plugin was hard to control editor states(eg, range, layout so on). After v0.7.0 plugin is redesigned by new module system. It is exactly same with module except surrounding module pattern.
Notification / Information Area
Summernote allows to add Notifications with Contextual Colouring to indicate the type of Notifcation, or to use the area for Informational Purposes.
The area appears at the bottom of Summernote when used in Normal Mode, and at the top of the editing area when Summernote is used in Air Mode.
To use the Notifcation area is simple and is useable by targetting the area using it’s class name
Notification elements can use any markup, but we’ve added some styling along the lines of Bootstrap’s Alerts. For e.g. to produce an Error or Danger alert you can use
<div class="alert alert-danger">This is an error</div>. You can also use
If you want to display just Informational Text, you can also add Text without the Alert if you wish.
You can also place text to the right side by placing the Text within an element such as
small and including the class
You can also use Contextual Colours for your text using the classes