https://github.com/zerexei/grapejs-components
https://github.com/zerexei/grapejs-components
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/zerexei/grapejs-components
- Owner: zerexei
- License: bsd-3-clause
- Created: 2022-07-21T05:18:13.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-08-09T02:15:31.000Z (almost 4 years ago)
- Last Synced: 2025-11-22T00:27:02.520Z (7 months ago)
- Language: JavaScript
- Size: 1.02 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
> We highly suggest starting using https://github.com/artf/grapesjs-cli for your new plugin projects
# GrapesJS Plugin Boilerplate
This boilerplate helps you quickly start a production ready plugin for GrapesJS. If you don't know from where to start, check this guide [Creating plugins](https://grapesjs.com/docs/modules/Plugins.html). Sections below are also used as boilerplate for your README, follow these steps below
### Usage
1. Clone this repository `git clone https://github.com/artf/grapesjs-plugin-boilerplate.git YOUR-PLUGIN-NAME`
1. 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`**
1. Update all the data in `package.json`
1. Install dependencies `npm i` and run the local server `npm start`
1. Start creating your plugin from `src/index.js`
1. Show some gif/demo if possible
1. Update README
1. When you're ready, build your source with `npm run build`
1. Publish
## Summary
* Plugin name: `YOUR-PLUGIN-NAME`
* Components
* `new-component1`
* `new-component2`
* Blocks
* `new-block1`
* `new-block1`
...
## Options
|Option|Description|Default|
|-|-|-
|`option1`|Description option|`default value`|
## Download
* CDN
* `https://unpkg.com/YOUR-PLUGIN-NAME`
* NPM
* `npm i YOUR-PLUGIN-NAME`
* GIT
* `git clone https://github.com/YOUR-NAME/YOUR-PLUGIN-NAME.git`
## Usage
Directly in the browser
```html
var editor = grapesjs.init({
container : '#gjs',
// ...
plugins: ['YOUR-PLUGIN-NAME'],
pluginsOpts: {
'YOUR-PLUGIN-NAME': { /* options */ }
}
});
```
Modern javascript
```js
import grapesjs from 'grapesjs';
import yourPluginName from 'YOUR-PLUGIN-NAME';
const editor = grapesjs.init({
container : '#gjs',
// ...
plugins: [yourPluginName],
pluginsOpts: {
[yourPluginName]: { /* options */ }
}
// or
plugins: [
editor => yourPluginName(editor, { /* options */ }),
],
});
```
## Development
Clone the repository
```sh
$ git clone https://github.com/YOUR-NAME/YOUR-PLUGIN-NAME.git
$ cd YOUR-PLUGIN-NAME
```
Install dependencies
```sh
$ npm i
```
Start the dev server
```sh
$ npm start
```
## License
BSD 3-Clause