- Clone this repository
git clone https://github.com/artf/grapesjs-plugin-boilerplate.git YOUR-PLUGIN-NAME
- Replace in all files
YOUR-PLUGIN-NAME
andgrapesjs-plugin-boilerplate
with your plugin name. The name of your plugin depends on thename
key in yourpackage.json
- Update all the data in
package.json
- Install dependencies
npm i
and run the local servernpm start
- Start creating your plugin from
src/index.js
- Show some gif/demo if possible
- Update README
- When you're ready, build your source with
npm run build
- Publish
- Plugin name:
grapesjs-custom-bootstrap
- Components
new-component1
new-component2
- Blocks
new-block1
new-block1
...
Option | Description | Default |
---|---|---|
option1 |
Description option | default value |
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 */ }),
],
});
BSD 3-Clause