gsf
grapesjs-style-filter
npm i grapesjs-style-filter
gsf

grapesjs-style-filter

Add filter type input to the Style Manager in GrapesJS

by Artur Arseniev

1.0.1 (see all)License:BSD-3-ClauseTypeScript:Not Found
npm i grapesjs-style-filter
Readme

GrapesJS Style Filter

This plugins adds a new filter built-in style property which can be used for CSS properties like filter and backdrop-filter.

Demo

GrapesJS

Requires GrapesJS v0.18.3 or higher

Summary

  • Plugin name: grapesjs-style-filter
  • New Style Manager built-in property
    • filter

Download

  • CDN
    • https://unpkg.com/grapesjs-style-filter
  • NPM
    • npm i grapesjs-style-filter
  • GIT
    • git clone https://github.com/artf/grapesjs-style-filter.git

Usage

Directly in the browser

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/grapesjs-style-filter.min.js"></script>

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

<script type="text/javascript">
  const editor = grapesjs.init({
      container : '#gjs',
      // ...
      plugins: ['grapesjs-style-filter'],

      // Use the property on init
      styleManager: {
        sectors: [
          // ...
          {
            id: 'extra',
            name: 'Extra',
            properties: [
              { extend: 'filter' },
              { extend: 'filter', property: 'backdrop-filter' },
            ],
          }
        ]
      },
  });

  // or add it to the StyleManager via API
  editor.StyleManager.addProperty('extra', { extend: 'filter' });
  editor.StyleManager.addProperty('extra', { extend: 'filter', property: 'backdrop-filter' });
</script>

Modern javascript

import grapesjs from 'grapesjs';
import styleFilter from 'grapesjs-style-filter';

const editor = grapesjs.init({
  container : '#gjs',
  plugins: [styleFilter, /*...*/],
  // Same StyleManager configuration
});
// Same StyleManager API usage

Development

Clone the repository

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

Install dependencies

$ npm i

Start the dev server

$ npm start

License

BSD 3-Clause

Downloads/wk

195

GitHub Stars

13

LAST COMMIT

9mos ago

MAINTAINERS

1

CONTRIBUTORS

0

OPEN ISSUES

0

OPEN PRs

3
VersionTagPublished
1.0.1
latest
9mos ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate