This plugins adds a new gradient property to the GrapesJS's StyleManager by using Grapick

Demo

• Plugin name: grapesjs-style-gradient
• Style properties: gradient

• grapickOpts - Grapick option, default: {}
• colorPicker - Custom color picker, check Grapick's repo to get more about it If you leave it empty the native color picker will be used. You can use 'default' string to get the one used by GrapesJS (which is spectrum at the moment of writing)
• inputDirection - Add the gradient direction input under the picker (you can pass an object as a Property Model), default: 1
• inputType - Add the gradient type input under the picker (you can pass an object as a Property Model), default: 1

• CDN
  • https://unpkg.com/grapesjs-style-gradient
• NPM
  • npm i grapesjs-style-gradient

<link href="path/to/grapes.min.css" rel="stylesheet"/>
<script src="path/to/grapes.min.js"></script>
<script src="path/to/grapesjs-style-gradient.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      ...
      plugins: ['gjs-style-gradient'],
      pluginsOpts: {
        'gjs-style-gradient': {
          // options
        }
      }
  });
</script>

Clone the repository

$ git clone https://github.com/artf/grapesjs-style-gradient.git
$ cd grapesjs-style-gradient

Install dependencies

$ npm i

The plugin relies on GrapesJS via peerDependencies so you have to install it manually (without adding it to package.json)

$ npm i grapesjs --no-save

Start the dev server

$ npm start

BSD 3-Clause