https://github.com/gxanshu/grapesjs-user-blocks
GrapesJS User Blocks: Create and Save Your Own Components
https://github.com/gxanshu/grapesjs-user-blocks
grapesjs grapesjs-plugin
Last synced: about 1 month ago
JSON representation
GrapesJS User Blocks: Create and Save Your Own Components
- Host: GitHub
- URL: https://github.com/gxanshu/grapesjs-user-blocks
- Owner: gxanshu
- License: mit
- Created: 2023-07-16T17:57:05.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-19T14:36:57.000Z (10 months ago)
- Last Synced: 2025-04-13T16:44:51.370Z (about 1 month ago)
- Topics: grapesjs, grapesjs-plugin
- Language: TypeScript
- Homepage: https://codenanshu.in/projects/grapesjs-user-blocks
- Size: 106 KB
- Stars: 23
- Watchers: 1
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Grapesjs User Blocks
[DEMO]https://codesandbox.io/s/elated-sammet-wnps7g?file=/src/index.js)
### HTML
```html
```
### JS
```js
const editor = grapesjs.init({
container: '#gjs',
height: '100%',
fromElement: true,
storageManager: false,
plugins: ['grapesjs-user-blocks'],
});
```
### CSS
```css
body, html {
margin: 0;
height: 100%;
}
```
## Summary
* Plugin name: `grapesjs-user-blocks` super simple user block generator for grapesjs. it allow developers to store there components in Storage Manager and also in blockManager to use letter.
## Download
* CDN
* `https://unpkg.com/grapesjs-user-blocks`
* NPM
* `npm i grapesjs-user-blocks`
* GIT
* `git clone https://github.com/gxnanshu/grapesjs-user-blocks.git`
## Usage
Directly in the browser
```html
var editor = grapesjs.init({
container: '#gjs',
// ...
plugins: ['grapesjs-user-blocks']
});
```
Modern javascript
```js
import grapesjs from 'grapesjs';
import plugin from 'grapesjs-user-blocks';
const editor = grapesjs.init({
container : '#gjs',
// ...
plugins: [plugin],
// pluginsOpts: {
// [plugin]: { /* options */ }
// }
// // or
// plugins: [
// editor => plugin(editor, { /* options */ }),
// ],
});
```
## Development
Clone the repository
```sh
$ git clone https://github.com/gxnanshu/grapesjs-user-blocks.git
$ cd grapesjs-user-blocks
```
Install dependencies
```sh
$ npm i
```
Start the dev server
```sh
$ npm start
```
Build the source
```sh
$ npm run build
```
## License
MIT