1.0.52 • Published 6 months ago
grapesjs-paneless v1.0.52
Mujo Editor
Website builder preset used in blocomposer.app
HTML
<link
href="https://unpkg.com/grapesjs/dist/css/grapes.min.css"
rel="stylesheet"
/>
<script src="https://unpkg.com/grapesjs"></script>
<script src="https://unpkg.com/grapesjs-paneless"></script>
<div id="gjs"></div>
JS
const editor = grapesjs.init({
container: "#gjs",
height: "100%",
fromElement: true,
storageManager: false,
plugins: ["grapesjs-paneless"],
});
CSS
body,
html {
margin: 0;
height: 100%;
}
Summary
- Plugin name:
grapesjs-paneless
- Components
icon
shape-divider
header
animate
block-builder
button-basic
- Blocks
link-block
quote
text-basic
section-block
span-block
button-basic
block-builder
line-divider
hero-block
team
team-card
footer
shape-divider
header
icon
animate
- Commands
left-assets
left-settings
page-seo
adder
gjs-open-import-webpage
settings-customHead
settings-globalCss
get-current-name
open-fonts
clone-page
add-block
help
publish
set-device-desktop
set-device-tablet
set-device-mobile
canvas-clear
Options
Option | Description | Default |
---|---|---|
useCloudinary | Use cloudinary file picker | true |
showPanels | Use editor with fixed panels | false |
staticSettings | Reposition settings popup when a component is selected | false |
settingsAnimation | Animate settings popup when | true |
hideSettings | Hide settings by default | true |
linkBlock | Extend link block | {} |
quoteBlock | Extend quote block | {} |
textBlock | Extend text block | {} |
btnBlock | Extend button block | {} |
bldBlock | Extend block builder block | {} |
hrBlock | Extend line divider block | {} |
heroBlock | Extend hero block | {} |
teamBlock | Extend team block | {} |
shapedividerBlock | Extend shape divider block | {} |
sectionBlock | Extend section block | {} |
spanBlock | Extend span block | {} |
footerBlock | Extend footer block | {} |
headerBlock | Extend header block | {} |
animateBlock | Extend animate block | {} |
iconBlock | Extend icon block | {} |
modalHelpLabel | Modal help title | Help |
modalImportTitle | Modal import title | Import |
modalImportButton | Modal import button text | Import |
modalImportLabel | Import description inside import modal | HTML |
modalImportContent | Default content to setup on import model open | Check Source |
importViewerOptions | Code viewer (eg. CodeMirror) options | {} |
textCleanCanvas | Confirm text before cleaning the canvas | Are you sure to clean the canvas? |
onSave | Callback when save button is clicked | Check Source |
hoverDelay | Hover delay for block adding widgets, lower value makes hover update faster | 250 |
optsWidget | Add widget default opts overrides | Check Source |
toHover | Determine hoverable components | Check Source |
position | RTE position | center |
options | CKE4 option | Check Source |
version | App version | v1.0.44b |
Download
- CDN
https://unpkg.com/grapesjs-paneless
- NPM
npm i grapesjs-paneless
- GIT
git clone https://github.com/Ju99ernaut/grapesjs-paneless.git
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-paneless.min.js"></script>
<div id="gjs"></div>
<script type="text/javascript">
var editor = grapesjs.init({
container: "#gjs",
// ...
plugins: ["grapesjs-paneless"],
pluginsOpts: {
"grapesjs-paneless": {
/* options */
},
},
});
</script>
Modern javascript
import grapesjs from 'grapesjs';
import plugin from 'grapesjs-paneless';
import 'grapesjs/dist/css/grapes.min.css';
const editor = grapesjs.init({
container : '#gjs',
// ...
plugins: [plugin],
pluginsOpts: {
[plugin]: { /* options */ }
}
// or
plugins: [
editor => plugin(editor, { /* options */ }),
],
});
Development
Clone the repository
$ git clone https://github.com/Ju99ernaut/grapesjs-paneless.git
$ cd grapesjs-paneless
Install dependencies
$ npm i
Watch sass
$ npm run watch:sass
Start the dev server
$ npm start
Build the source
$ npm run build
Build the css
$ npm run build:css
License
MIT