• Stars
    star
    109
  • Rank 319,077 (Top 7 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 9 years ago
  • Updated almost 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Summernote wysiwyg editor converted for Materialize

MaterialNote v2.0.5

WYSIWYG editor for the web, based on materialnote.js and materializeCss. Version 2 is currently in beta...

Editor Api

MaterialNote is based on summernote.js, so the API is still the same. Please visit summernote.js api guide to deep dive.

Settings additions

Other to the standard summernote.js settings, materialNote have some extras (take a look at official summernote guide for the summernote.js initialization options).

  • popover.image: added ['responsivity', ['responsive']] btn group containing button to handle materialize's image responsivity class.
  • popover.link: added openLinkNewWindow btn to handle target attribute of the link directly from the popover.
  • popover.table: added ['materializeOptions', ['borderedTable', 'stripedTable', 'highlightedTable', 'responsiveTable', 'centeredTable']] btn group to handle materialize's table options.
  • defaultColors.text [String]: default text color used for recent-color button at startup.
  • defaultColors.background [String]: default background color used for recent-color button at startup.
  • followingToolbar [Boolean]: enable/disable following toolbar.
  • otherStaticBarClass [String]: if your app already have a fixed positioned topBar, you will need to add here its class to let materialNote able to calculate the right offset for the editor's toolbar.

Editor colors

If you wish to change any of the editor color, you can quickly achieve the desired result by editing file src/sass/variables.scss, which defines all colours used by the editor as sass variables.

After making desired changes, just run grunt build to create a new dist in the dist folder.

Multi instances

If you put more than one editor in the same page, some parts such as dropdowns will not work properly (since they use ids) unless you pass a unique posIndex parameter to each instance:

$.each($('.materialnote'), function(index, node) {
    $(node).materialnote({
        height: 300,
        posIndex: index
    });
});

Contribute

Some lang strings have been added in materialNote other than the ones supplied with summernote.js; by default only english and italian lang files are kept up to date in this repo; if you can help by adding missing strings for your language, please submit a pull request (thank you);

Pull requests are welcome anyway...

More Repositories

1

fileUploader

A file uploader skeleton that uses HTML5 file reader api
JavaScript
11
star
2

css-lightbox

Simple lightbox effect made only with css
CSS
8
star
3

MeteorDeploy

A node.js script to deploy meteor app to custom server
JavaScript
4
star
4

atom-monocolor-light-blue-syntax-theme

light blue single color syntax highlight theme for atom
CSS
3
star
5

versionUpdater

Automatically replace version number in your projects
JavaScript
3
star
6

vscode-monocolor-light-blue

Light blue monocolor syntax theme (dark) for vs code
3
star
7

atom-monocolor-blue-syntax-theme

blue single color syntax highlight theme
CSS
2
star
8

atom-monocolor-teal-syntax-theme

teal single color syntax highlight theme for atom
CSS
2
star
9

atom-monocolor-purple-syntax-theme

purple single color syntax highlight theme for atom
CSS
2
star
10

atom-monocolor-pink-syntax-theme

pink single color syntax highlight theme for atom
CSS
2
star
11

jqueryPluginSkeleton

A possible skeleton to use for jquery plugins creation; made following best practices guidelines
JavaScript
1
star
12

skeleform

Form functionalities for Skeletor
JavaScript
1
star
13

skeletor

Meteor.js package for CRUD applications
JavaScript
1
star
14

meteorMaterialNote

meteor package for materialNote
JavaScript
1
star
15

atom-monocolor-amber-syntax-theme

amber single color syntax highlight theme for atom
CSS
1
star
16

skelelang

I18n assets for Skeletor
JavaScript
1
star
17

sysdig-test

Sysdig test ap
JavaScript
1
star
18

atom-monocolor-red-syntax-theme

red single color syntax highlight theme for atom
CSS
1
star
19

epicura-test

JavaScript
1
star
20

atom-monocolor-green-syntax-theme

green single color syntax highlight theme for atom
CSS
1
star
21

atom-monocolor-lime-syntax-theme

lime single color syntax highlight theme for atom
CSS
1
star
22

skelesite

frontend functions for Skeletor
JavaScript
1
star
23

skelelist

List views for skeletor
JavaScript
1
star
24

skeleploy

Web applications deployer
JavaScript
1
star
25

atom-monocolor-orange-syntax-theme

orange single color syntax highlight theme for atom
CSS
1
star
26

skeleutils

Utilities for Skeletor
JavaScript
1
star
27

phorest-challenge

JavaScript
1
star