Grapesjs Style Border

Separate border property to border, border-left, border-top, border-bottom, border-right

Sponsered by:


DEMO

$3

``html

`

$3

`js
const editor = grapesjs.init({
container: '#gjs',
height: '100%',
fromElement: true,
storageManager: false,
plugins: ['grapesjs-style-border'],
});
`

$3

`css
body, html {
margin: 0;
height: 100%;
}
`

Summary

* Plugin name: grapesjs-style-border

Options

| Option | Description | Default |
|-|-|-
| sector | Sector to append property | decorations |
| originalBorder | Sector and id/name of original border property so it can be removed | { sector: 'decorations', name: 'border' } |
| at | Optionally add index to append property | false |
| extendType | Extend border type property | {} |
| extendWidth | Extend border-width property | {} |
| extendStyle | Extend border-style property | {} |
| extendColor | Extend border-color property | {} |
| extendBorder | Extend border property | {} |
| extendBorderTop | Extend border-top property | {} |
| extendBorderRight | Extend border-right property | {} |
| extendBorderBottom | Extend border-bottom property | {} |
| extendBorderLeft | Extend border-left property | {} |

Download

* CDN
* https://unpkg.com/grapesjs-style-border
* NPM
* npm i grapesjs-style-border
* GIT
* git clone https://github.com/Ju99ernaut/grapesjs-style-border.git

Usage

Directly in the browser
`html





`

Modern javascript
`js
import grapesjs from 'grapesjs';
import plugin from 'grapesjs-style-border';
import 'grapesjs/dist/css/grapes.min.css';

const editor = grapesjs.init({
container : '#gjs',
// ...
plugins: [plugin],
pluginsOpts: {
[plugin]: { / options / }
}
// or
plugins: [
editor => plugin(editor, { / options / }),
],
});
`

Development

Clone the repository

`sh
$ git clone https://github.com/Ju99ernaut/grapesjs-style-border.git
$ cd grapesjs-style-border
`

Install dependencies

`sh
$ npm i
`

Start the dev server

`sh
$ npm start
`

Build the source

`sh
$ npm run build
``

License

MIT