Add to Summernote's features and extend the editors abilities
This page is currently a Work In Progress, we welcome contributions to update or add explanations. Please do so either by creating an Issue, or a Pull Request.
Before taking on the journey of building a custom plugin, please visit our official repository awesome-summernote. Which contains user contributed plugins. This may save you a lot of time building your own, or afford you the opportunity to contribute to an already existing plugin, making it better.
Adding a Plugin
Adding a Plugin to Summernote is as easy as adding Summernote to the page you want Summernote to appear in.
Most scripts don’t require you to add a CSS file, although some plugins depending on the functionality of the script may require you to add necessary styles, either inline in the page, or by adding a link to the CSS file to add it’s required styles. Some Plugins may also dynamically add styles to the DOM when initialised.
We typically load the Plugin Script after loading the Summernote Script.
Most scripts are added in the head area of the typical HTML page.
Other things that may need to be loaded along with the plugin file, might be language files, which should follow the plugin inclusion.
Adding the Interactive Modules.
Adding the Interactive Module to Summernote is as easy as calling the options available in Summernote when we initialize the Summernote Editor.
Adding interaction to the Toolbar.
Adding interaction to a Popover
For those uninitiated with script styling, we’d like to point out that comments (// This is a comment) inline in the code area’s describe what is happening, or what options you can change in the code areas below the comment. While this may not always be the style of others, we just wanted to make sure while your reading through the examples below that there isn’t any confusion on which parts the comments may be describing.
If your Plugin contains textual context we need to extend the Language lang references within the Summernote script to add our own language references.
To access the language translations variables in your plugin script you can simply use lang.examplePlugin.exampleText.
You can also create language files to link into your pages just like adding language files into Summernote itself, and using the format exactly like the code above.
This allows us to add options to our plugin to modify behaviour on a user based configuration.
The Plugin Functionality
This section is the Functional part of the Plugin.
The vars below are not all needed, what you need depends on what your trying accompish with your plugin. Most commonly you need self, ui, options, and lang.
This section performs functions when the Plugin is first initialised. Note, this is when the Plugin is loaded, not when the Plugin is used.