fedora08-grapesjs-bootstrap4

GrapesJS Bootstrap v4 Blocks Plugin

Usage no npm install needed!

<script type="module">
  import fedora08GrapesjsBootstrap4 from 'https://cdn.skypack.dev/fedora08-grapesjs-bootstrap4';
</script>

README

GrapesJS Bootstrap v4 Blocks Plugin

npm

Summary

  • 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

Options

{
  blocks: {
    ...
  }
  blockCategories: {
    ...
  }
  labels: {
    ...
  }
  formPredefinedActions: null,
  optionsStringSeparator: '::'
}

Blocks

|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|

Block Categories

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|

Labels

Same keys as Blocks, but value is the label for the block.

|Option|Description|Default| |-|-|- |text||'Text'| |header||'Header'|

etc.

Other

|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|'::'|

Download

  • NPM
    • npm i grapesjs-blocks-bootstrap4
  • GIT
    • git clone https://github.com/jcsofts/grapesjs-blocks-bootstrap4.git

Usage

<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-blocks-bootstrap4.min.js"></script>

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

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      ...
      plugins: ['grapesjs-blocks-bootstrap4'],
      pluginsOpts: {
        'grapesjs-blocks-bootstrap4': {
          blocks: {
            // ...
          },
          blockCategories: {
            // ...
          },
          labels: {
            // ...
          },
          // ...
        }
      },
      canvas: {
        styles: [
          'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'
        ],
        scripts: [
          'https://code.jquery.com/jquery-3.3.1.slim.min.js',
          'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js',
          'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'
        ],
      }
  });
</script>

Development

Clone the repository

$ git clone https://github.com/jcsofts/grapesjs-blocks-bootstrap4.git
$ cd grapesjs-blocks-bootstrap4

Install dependencies

$ npm i

The plugin relies on GrapesJS via peerDependencies so you have to install it manually (without adding it to package.json)

$ npm i grapesjs --no-save

Start the dev server

$ npm start

License

BSD 3-Clause