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.
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
<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 usageDevelopment
Clone the repository
$ git clone https://github.com/GrapesJS/style-filter.git
$ cd grapesjs-style-filterInstall dependencies
$ npm iStart the dev server
$ npm startLicense
BSD 3-Clause