GrapesJS Bootstrap v4 Blocks Plugin
npm install grapesjs-blocks-bootstrap4
* Plugin name: grapesjs-blocks-bootstrap4
* Components (see Options for list of Blocks)
* Layout
* container
* row
* column
* column_break
* media_object
* media_body
* Components
* alert
* tabs
* badge
* card
* card_container
* collapse
* dropdown
* dropdown_menu
* Typography
* text
* header
* paragraph
* Media
* image
* video
* Forms
* form
* button
* button_group
* button_toolbar
* input
* input_group
* form_group_input
* textarea
* checkbox
* radio
``js`
{
blocks: {
...
}
blockCategories: {
...
}
labels: {
...
}
formPredefinedActions: null,
optionsStringSeparator: '::'
}
|Option|Description|Default|
|-|-|-
|default|Rebuild default component with utility settings|true|text
||Rebuild text component to re-inherit from default|true|link
||Rebuild link component to re-inherit from default and give toggle setting|true|image
||Rebuild image component to re-inherit from default|true|video
||Rebuild video component to re-inherit from default|true|container
||Container (fixed/fluid)|true|row
||Row|true|column
||Columns of all sizes|true|column_break
||Column-break (div.w-100)|true|media_object
||Media object|true|alert
|||true|tabs
|||true|badge
|||true|card
||Card with settings for images, image overlay, header, body, & footer components|true|card_container
||Layouts: group, deck, columns|true|collapse
||Collapse component that can be toggled via link component|true|dropdown
||Dropdown|true|header
||H1-H6|true|paragraph
||P tag with "lead" setting|true|form
|||true|button
|||true|button_group
|||true|button_toolbar
|||true|input
|||true|input_group
|||true|form_group_input
|||true|textarea
|||true|checkbox
|||true|radio
|||true|
These are the different categories of blocks as they are grouped in the Blocks sidebar panel. Set a value to false exclude entire groups of blocks (as well as the associated components).
|Option|Description|Default|
|-|-|-
|layout|Container, row, col, col-break, media object|true|components
||_Bootstrap_'s Components--alert, button, card, etc.|true|typography
||Text, header, paragraph, etc.|true|basic
||Link, image, etc.|true|forms
||Form, input, textarea, etc.|true|
Same keys as Blocks, but value is the label for the block.
|Option|Description|Default|
|-|-|-
|text||'Text'|header
|||'Header'|
etc.
|Option|Description|Default|
|-|-|-
|gridDevices|Add devices based on BS grid breakpoints|true|gridDevicesPanel
||Build a panel in the top-left corner with device buttons (use with editor showDevices=false)|false|formPredefinedActions
||Pass a list of predefined form actions to generate a select menu: [{name: 'Contact', value: '/contact'}, ...], if no list is passed an input box to add the action is shown|null|optionsStringSeparator
||Pass a string to identify the separator of values and labels of the select options: optionValue::optionLabel. This setting WILL BE overridden by the gjs-preset-webpage plugin if enabled|'::'|
* NPM
* npm i grapesjs-blocks-bootstrap4git clone https://github.com/kaoz70/grapesjs-blocks-bootstrap4.git
* GIT
*
`html
`
Clone the repository
`sh`
$ git clone https://github.com/kaoz70/grapesjs-blocks-bootstrap4.git
$ cd grapesjs-blocks-bootstrap4
Install dependencies
`sh`
$ npm i
The plugin relies on GrapesJS via peerDependencies so you have to install it manually (without adding it to package.json)
`sh`
$ npm i grapesjs --no-save
Start the dev server
`sh``
$ npm start
BSD 3-Clause