https://github.com/grapesjs/preset-webpage
GrapesJS Plugin Webpage Preset
https://github.com/grapesjs/preset-webpage
Last synced: about 1 year ago
JSON representation
GrapesJS Plugin Webpage Preset
- Host: GitHub
- URL: https://github.com/grapesjs/preset-webpage
- Owner: GrapesJS
- License: bsd-3-clause
- Created: 2017-11-22T00:31:21.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-08-11T19:02:36.000Z (almost 3 years ago)
- Last Synced: 2025-03-31T20:38:04.714Z (about 1 year ago)
- Language: TypeScript
- Homepage: http://grapesjs.com/demo.html
- Size: 473 KB
- Stars: 356
- Watchers: 13
- Forks: 298
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# GrapesJS Preset Webpage
[Demo](http://grapesjs.com/demo.html)
> From the v1.* we don't include other plugins in this one anymore, so if you need them, you have to include them manually in your project. If you want to replicate the editor from the demo, please check the source of the demo [here](https://github.com/GrapesJS/grapesjs/blob/gh-pages/demo.html)
## Summary
* Plugin name: **`grapesjs-preset-webpage`**
* Commands:
* `gjs-open-import-webpage` Opens a modal for the import
* `set-device-desktop` Set desktop device
* `set-device-tablet` Setup tablet device
* `set-device-mobile` Setup mobile device
* `canvas-clear` Clear all components and styles inside canvas
* Blocks:
* `link-block`
* `quote`
* `text-basic`
## Options
| Option | Description | Default |
| - | - | - |
| `blocks` | Which blocks to add | `['link-block', 'quote', 'text-basic']` |
|`block`| Add custom block options, based on block id|`(blockId) => ({})`|
| `modalImportTitle` | Modal import title | `'Import'` |
| `modalImportButton` | Modal import button text | `'Import'` |
| `modalImportLabel` | Import description inside import modal | `''` |
| `modalImportContent` | Default content to setup on import model open. Could also be a function with a dynamic content return (must be a string) eg. `modalImportContent: editor => editor.getHtml()` | `''` |
| `importViewerOptions` | Code viewer (eg. CodeMirror) options | `{}` |
| `textCleanCanvas` | Confirm text before cleaning the canvas | `'Are you sure to clean the canvas?'` |
| `showStylesOnChange` | Show the Style Manager on component change | `true` |
| `useCustomTheme` | Load custom preset theme | `true` |
## Download
* CDN
* `https://unpkg.com/grapesjs-preset-webpage`
* NPM
* `npm i grapesjs-preset-webpage`
* GIT
* `git clone https://github.com/GrapesJS/preset-webpage.git`
## Usage
Directly in the browser
```html
var editor = grapesjs.init({
container : '#gjs',
...
plugins: ['grapesjs-preset-webpage'],
pluginsOpts: {
'grapesjs-preset-webpage': {
// options
}
}
});
```
Modern javascript
```js
import grapesjs from 'grapesjs';
import plugin from 'grapesjs-preset-webpage';
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/GrapesJS/preset-webpage.git
$ cd preset-webpage
```
Install it
```sh
$ npm i
```
Start the dev server
```sh
$ npm start
```
## License
BSD 3-Clause