Awesome Summernote

A curated list for summernote plugins and connectors.

This curated list is on very early stage. So, let's make it together!

Contents

• Connectors
• Examples
• Plugins
  • Emojis
  • Formatting
  • Insert
  • Misc
  • Special Characters & Icons
  • Syntax
• Themes and Skins
• Tutorials

Connectors

• @easylogic/react-summernote
  • React extension for summernote (with full features, custom button and plugin)
• @easylogic/svelte-summernote
  • Svelte extension for summernote (with full features, custom button and plugin)
• android-summernote
  • WYSIWYG HTML Editor View with Android App
• angular-summernote
  • AngularJS directive to Summernote
• aurelia-summernote
  • Wrap Summernote WYSIWYG editor into an aurelia custom element
• django-summernote
  • Simply integrate Summernote editor with Django project.
• ember-cli-summernote
  • Ember-cli-summernote is an Ember CLI add-on. This addon actually converts summernote to an Ember component which is a re-usable unit.
• gnuboard5-summernote
  • Editor Plugin for GnuBoard v5.
• html-editor-enhanced
  • WYSIWYG HTML Editor widget for Flutter applications, supports Android, iOS, and Web
• meteor-autoform-summernote
  • Add WYSIWYG editor to your Meteor app.
• react-summernote
  • Summernote adaptation for react
• summernote-rails
  • To gemify the summernote WYSIWYG editor for Rails >= 3.1

Examples

• summernote-meteor-example
• summernote-webpack-example

Plugins

Emojis

• summernote-emoji-ext
  • Emoji plugin for summernote
• summernote-emoji
  • Dropdown list of my favorite emojiOne images, embedded as base64 strings for easy portability
• summernote-emoji
  • Summernote emoji plugin pro
• summernote-emojione-plugin
  • Full list of EmojiOne icons as buttons in modal window divided under multiple tabs (based on specialchar plugin v0.6.16)
• summernote-ext-emoji-ajax
  • Uses the github emoji api and loads them via ajax.

Formatting

• summernote-add-text-tags
  • Adds additional text-level semantic elements that are already provided with styling by Bootstrap 3 and 4, such as <kbd> and <code> etc.
• summernote-addclass
  • With this plugin you will get a configurable button so you'll be able to toggle custom CSS classes in summernote elements (like the default 'style' button, but you can define custom CSS classes, eg. your favourite UI framework styling classes)
• summernote-case-converter
  • Adds a button to the Toolbar with a dropdown that allows case converting in any text in the editor.
• summernote-classes
  • Adds functionality to display selected element with options to toggle classes as set in options.
• summernote-cleaner
  • Adds a Button to toolbar that when used cleans the MS Word Crud from the editor text.
• summernote-current-style
  • Indicates the currently selected style in the dropdown
• summernote-image-attributes
  • This is a forked and extended version of "summernote-image-title", for those that want a little more control over editable attributes for Images.
• summernote-image-captionit
  • Allows adding figure and figcaption to images, with removal when selected twice.
• summernote-image-shapes
  • Adds option with dropdown to the Image Popover to add or remove Bootstrap Image Classes for styling the look and behaviour of images.
• summernote-image-title
  • Adds a button to the image popover to edit title and alt attributes.
• summernote-list-styles
  • Adds a toolbar dropdown menu to change the number/bullet style of HTML lists.
• summernote-pagebreak
  • Visually add Page-Breaks to editor content.
• summernote-paper-size
  • Add dropdown button to toolbar to allow changing editable area to reflect paper sizes.
• summernote-rtl-plugin
  • Summernote RTL plugin. This extensions allows to add two new buttons to Summernote editor toolbar. Those buttons let user change text direction to either LTR (left to right) or RTL (right to left).
• summernote-table-headers
  • Adds a button to the table popover allowing the user to toggle the first row as a table header.
• summernote-table-styles
  • Adds a button to the table popover allowing the user to apply Bootstrap table styles.
• summernote-text-manipulator
  • Adds a Dropdown to the Toolbar to perform different actions to selected text.
• summernote-video-attributes
  • Adds a Toolbar Button for Allowing to edit Video Attributes before inserting into Editor.

Insert

• summernote-at-mention
  • Triggers a dropdown with autocomplete options whenever the @ character is encountered in a new word.
• summernote-handlebars-autocomplete
  • Triggers a dropdown with handlebar-variables whenever the {{ character is typed.
• summernote-audio
  • Summernote plugin to insert audio by URL or file upload
• summernote-bricks
  • A summernote module to add user-friendly components to the WYSIWYG editor.
• summernote-gallery
  • A simple bootstrap image-gallery modal to add images with the real path to the server instead of using base64 encoding.
• summernote-heading
  • A summernote plugin with a bootstrap modal to add custom heading to the summernote editor.
• summernote-ext-elfinder
  • Summernote Plugin for elFinder File Manager
  • Connector Instructions Wiki on elFinder's Repository
• summernote-file
  • Summernote plugin to insert files by URL or file upload
• summernote extended link editor
  • Replicates and extends the summernote link editor to add additional link types.
• summernote-list-of-links
  • A plugin for the Summernote WYSIWYG editor, that lets you choose from an external list of links, provided as json.
• summernote-loremipsum
  • Add Toolbar button with Dropdown to insert random Lorem Ipsum Paragraph or Sentence, handy for placeholder text.
• summernote-map-plugin
  • Plugin for adding map to Summernote. It allows users to search for places with autocomplete (Google Places API) and add an embed map of the selected place to editor.
• summernote-nugget
  • Pre-defined custom code nuggets. You can add your own nuggets and insert them in the editor in one click.
• summernote-template
  • Dropdown of pre-defined custom templates. You can add your own html templates and insert them in the editor in one click.
• summernote-templates
  • Add Toolbar Buttons to add Page and Block Templates from html template files.
• uploadcare-summernote
  • Uploadcare plugin for Summernote. It will allow your users to upload files and images from local device, social networks, cloud storages without any backend code that is usually required to handle uploads.

Misc

• summernote-br
  • Adds the option to create soft linebreaks by pressing SHIFT+RETURN at the same time
• summernote-drafts
  • Allows users to save and load drafts directly on the editor.
• summernote-ext-print
  • Add print button on toolbar. This allows summernote to print its own document, not whole page.
• summernote-ext-table
  • Adds table column/row resize, cell background-color change, cell merge, cell unmerge, border-color change, table margin change, table width/height reset.
• summernote-floats-bs
  • Replace (or extend) image popover buttons (using float: attributes) with a new set of buttons that inject proper Bootstrap classes (pull-right / pull-left / none).
• summernote-save-button
  • Adds a Save Button when Summenote is used within a form
• summernote-seo
  • Adds a drop down with Selector for Extracting Keywords or Copying Highlighted Text to Description or Caption Elements.
• summernote-text-findnreplace
  • Adds an area to the Toolbar when plugin button is select to allow find and replace in the editor area.
• summernote-sticky-toolbar
  • Allows you to make the toolbar sticky with simple options.

Special Characters & Icons

• summernote-ext-specialchars
  • Few tweaks to the official specialchars plugin, revising the view and making it more mobile-friendly
• summernote-fontawesome
  • Modification of specialchars, inserts Font Awesome symbols instead. View all the icons or search for them by name.

Syntax

• summernote-a11y
  • Accessibility Checker that uses CSS to check Elements inside the Summernote Editing Area.
• summernote-ace-plugin
  • Based on Ace(https://ace.c9.io/#nav=about) the summernote code highlighting plugin
• summernote-ext-codewrapper
  • This will wrap code inside pre tag by selecting them. see video for demo.
• summernote-ext-highlight
  • Based on code-prettify the summernote code highlighting plugin

Themes and Skins

• summernote-libreicons-theme
  • This is an Icon replacement Theme to replace Font Icons, with the SVG Icons by LibreICONS.
• summernote-themes
  • Themes for Summernote (Mainly the Lite version at the moment).

Tutorials

• https://summernote.org/plugins
  • Official guide to installing, adding, and making Plugins for Summernote

Contributing and License

You are most welcome to contribute to this awesome summernote list as well. Big thanks to all contributors who have helped to build this list.