MaterialNote : A Summernote Wysiwyg Editor

Shares

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

Usage

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;

Grunt

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

License

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

Subscribe to the JqueryPlugins.net mailing list:
* indicates required

Reply

Pin It on Pinterest