https://github.com/grapesjs/style-filter
Add filter type input to the Style Manager in GrapesJS
https://github.com/grapesjs/style-filter
Last synced: about 1 year ago
JSON representation
Add filter type input to the Style Manager in GrapesJS
- Host: GitHub
- URL: https://github.com/grapesjs/style-filter
- Owner: GrapesJS
- License: bsd-3-clause
- Created: 2018-11-04T14:44:58.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-06-09T12:59:58.000Z (about 3 years ago)
- Last Synced: 2025-04-12T04:51:44.721Z (about 1 year ago)
- Language: TypeScript
- Size: 455 KB
- Stars: 21
- Watchers: 3
- Forks: 11
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# GrapesJS Style Filter
This plugins adds a new `filter` [built-in style property](https://grapesjs.com/docs/modules/Style-manager.html#built-in-properties) which can be used for CSS properties like `filter` and `backdrop-filter`.
[Demo](https://jsfiddle.net/xg23astu)
> 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/GrapesJS/style-filter.git`
## Usage
Directly in the browser
```html
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' });
```
Modern javascript
```js
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
```sh
$ git clone https://github.com/GrapesJS/style-filter.git
$ cd grapesjs-style-filter
```
Install dependencies
```sh
$ npm i
```
Start the dev server
```sh
$ npm start
```
## License
BSD 3-Clause