Customize by Initializing various options and modules.
Custom toolbar, popover
Summernote allows you to make own custom 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
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
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. Below settings are default options for popovers.
You can define placeholder with
You can define fontNames items with
Summernote tests font in fontNames before adding them to dropdown. This is problem while using web fonts. It’s not easy picking up nice time to check availabilities of web fonts. You can define a list for web fonts to be ignored with
Dialogs can be placed in
body, not in summernote.
By default, dialogs are shown and hidden without fading effect. But you can turn it on by
Disable drag and drop
You can disable drag and drop with
You can disable custom shortcuts with shortcuts
You can initialize summernote with
Then You can use 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’. First argument is a string type which represents the module and its method. The rest are method’s arguments.
If you call API without module name,
editor.methodName will be called.
A module named
editor supports several methods for editor’s basic behavior
create a range object for current user selection.
save current user selection internally.
restore currently saved range
Undoes and redoes the last command
Set a focus in current summernote
Returns whether contents is empty or not.
Editing area needs
<p><br></p> for focus, even if contents is empty. So summernote support this method for helping to check contents is empty.
Clear contents and remove all stored history.
You can disable editor by API.
If you want to enable editor again, call API with enable.
Font style API
bold, italic, underline, strikethrough
Set font style
Set superscript or subscript
Clean a style
Set background and foreground color
Set font family
Set font size
justify left, right and more
Set paragraph align
toggle ordered list and unordered list
indent and outdent
indent and outdent on current paragraph
Change current paragraph as a
Change current paragraph as a
<h1> ~ <h6>.
Set line height
Insert a image
You can modify image with passing callback as second argument.
Insert a element or textnode
Insert a text
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.
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 support custom button. If you want to create your own button, you can simply define and use with options.
You can create button object with $.summernote.ui. This button objects have below properties.
- contents: contents to be displayed on the button
- tooltip: tooltip text when mouse over
- click: callback function 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 used for deciding whether module will be initialized or not.
Below are full codes of AutoLink module.
For more module examples: modules
Module with option
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.