phuocle / grapesjs-custom-bootstrap

Custom plugin for grapesjs that is meant to use the entirety of Bootstrap 3.3.7 and force the internal logic of its proper use, for the layperson to have a seamless WYSIWYG experience.

GrapesJS Plugin Boilerplate

Usage

1. Clone this repository git clone https://github.com/artf/grapesjs-plugin-boilerplate.git YOUR-PLUGIN-NAME
2. Replace in all files YOUR-PLUGIN-NAME and grapesjs-plugin-boilerplate with your plugin name. The name of your plugin depends on the name key in your package.json
3. Update all the data in package.json
4. Install dependencies npm i and run the local server npm start
5. Start creating your plugin from src/index.js
6. Show some gif/demo if possible
7. Update README
8. When you're ready, build your source with npm run build
9. Publish

Summary

• Plugin name: grapesjs-custom-bootstrap
• Components
  • new-component1
  • new-component2
• Blocks
  • new-block1
  • new-block1 ...

Options

Option	Description	Default
option1	Description option	default value

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-custom-bootstrap.min.js"></script>

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

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      // ...
      plugins: ['grapesjs-custom-bootstrap'],
      pluginsOpts: {
        'grapesjs-custom-bootstrap': { /* options */ }
      }
  });
</script>

Modern javascript

import grapesjs from 'grapesjs';
import grapesjs-custom-bootstrap from 'grapesjs-custom-bootstrap';

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

License

BSD 3-Clause