1.2.3 • Public • Published

MaterialNote v1.2.1


LIVE DEMO: MaterialNote demo (live demo can be outdated for a while; if live demo version is not the same of current plugin version, please use the included demo instead)

A Summernote wysiwyg editor version converted for Materialize (Materialize Official website)

Added features:
  • Following toolbar
  • global restyling

MaterialNote is a fork of Summernote wysiwyg editor (See the Original API) Edited by CK


Just call **materialnote() on any jquery element;

NOTE: in case of multiple editors on the same page, the id attribute must be provided (if you use airMode, the id is needed always);

There are some extra options

that you can pass to the constructor in materialSummernote:

  • defaultTextColor (used by "color" button to set the default text color)
  • defaultBackColor (used by "color" button to set button's color default background color)
  • followingToolbar (default true)
  • otherStaticBarClass is the class of webapp's static bar (if used); this is used to avoid materialNote's toolbar to override it while scrolling (default .staticTop)

MaterialSummernote is not just a conversion of Summernote from bootstrap to materialize, it also contains some changes, but still have all the original Summernote's API.

It is provided with scss version of the stylesheet, if you use sass, to change style quickly

Materialize Overrides

The provided versione includes an override of materialize tooltips (called ckTooltip) with autoclean function for tooltips' shadow dom when the tooltipped element is destroyed (better for single-page app); this functions is also edited to have faster tooltip animations; If you don't need/want this, you can use the standard materialize tooltip function, replacing "ckTooltip" with "tooltip" in materialNote (1 occurence) and removing "ckMaterializeOverrides.js" file and its reference in index.html;


It is provided with livereload and sass version of stylesheet; use "grunt" to execute it and point your browser on "localhost:7000" (prerequisites: ruby, sass ("gem install sass"), grunt-cli, grunt and needed plugins ("npm install"), browser livereload extension);

Use --port option to serve it on another port; example: grunt --port=9000

Use grunt uglify or grunt minify to rebuild the minified version of fileUploader.js


Available under MIT license (also available in included license.txt file).



  • added minified version and minify task


  • fidex bugs for following toolbar with otherStaticBar option
  • minor style corrections


  • upgraded mobile support for dropdown


  • improved mobile support
  • added support for webapp' static bar


  • bug fixes


  • fixed codeMirror bug (codeMirror not updating editor's content)
  • fixed Roboto missing font

Package Sidebar


npm i materialsummernote

Weekly Downloads






Last publish


  • nicolasbonnici