Skip to content
Snippets Groups Projects
Verified Commit 32a951eb authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

chore: commit save point

parent 7d9f7906
No related branches found
No related tags found
No related merge requests found
# GrapesJS Bootstrap v4 Blocks Plugin
# GrapesJS Bootstrap v5 Blocks Plugin
[![npm](https://img.shields.io/npm/v/grapesjs-blocks-bootstrap4.svg)](https://www.npmjs.com/package/grapesjs-blocks-bootstrap4)
<!--<span><a href="https://david-dm.org/z1lk/grapesjs-plugin-boilerplate#info=devDependencies" title="View the status of this project's development dependencies on DavidDM"><img src="https://img.shields.io/david/dev/artf/grapesjs-plugin-boilerplate.svg" alt="Dev Dependency Status" /></a></span>-->
<!--<a rel="nofollow" href="https://app.codesponsor.io/link/nb9nPYf2XqCE1PbgcQj6gf4D/artf/grapesjs-plugin-boilerplate">
<img alt="Sponsor" width="888" height="68" src="https://app.codesponsor.io/embed/nb9nPYf2XqCE1PbgcQj6gf4D/artf/grapesjs-plugin-boilerplate.svg"/>
</a>-->
this is a fork from [github.com/kaoz70/grapesjs-blocks-bootstrap4](https://github.com/kaoz70/grapesjs-blocks-bootstrap4)
## Summary
......@@ -56,14 +50,14 @@
```js
{
blocks: {
...
}
},
blockCategories: {
...
}
},
labels: {
...
}
},
formPredefinedActions: null,
optionsStringSeparator: '::'
}
......@@ -139,23 +133,17 @@ etc.
## Download
<!--* CDN
* `https://unpkg.com/grapesjs-blocks-bootstrap4` -->
* NPM
* `npm i grapesjs-blocks-bootstrap4`
* `npm i @minerva/grapesjs-blocks-bootstrap5`
* GIT
* `git clone https://github.com/kaoz70/grapesjs-blocks-bootstrap4.git`
* `git clone https://gitlab.schukai.com/oss/minerva/grapesjs-blocks-bootstrap.git`
## Usage
```html
<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-blocks-bootstrap4.min.js"></script>
<script src="path/to/grapesjs-blocks-bootstrap5.min.js"></script>
<div id="gjs"></div>
......@@ -163,9 +151,9 @@ etc.
var editor = grapesjs.init({
container : '#gjs',
...
plugins: ['grapesjs-blocks-bootstrap4'],
plugins: ['grapesjs-blocks-bootstrap5'],
pluginsOpts: {
'grapesjs-blocks-bootstrap4': {
'grapesjs-blocks-bootstrap5': {
blocks: {
// ...
},
......@@ -180,29 +168,23 @@ etc.
},
canvas: {
styles: [
'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'
'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css'
],
scripts: [
'https://code.jquery.com/jquery-3.3.1.slim.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js',
'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'
'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js'
],
}
});
</script>
```
## Development
Clone the repository
```sh
$ git clone https://github.com/kaoz70/grapesjs-blocks-bootstrap4.git
$ cd grapesjs-blocks-bootstrap4
$ git clone https://gitlab.schukai.com/oss/minerva/grapesjs-blocks-bootstrap.git
$ cd grapesjs-blocks-bootstrap
```
Install dependencies
......
This diff is collapsed.
/*! @minerva/grapesjs-blocks-bootstrap5 - 0.1.6 */
......@@ -2,10 +2,10 @@
<html>
<head>
<meta charset="utf-8">
<title>GrapesJS Bootstrap v4 Blocks Plugin</title>
<title>GrapesJS Bootstrap v5 Blocks Plugin</title>
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<script src="dist/grapesjs-blocks-bootstrap4.min.js"></script>
<script src="dist/@minerva/grapesjs-blocks-bootstrap5.min.js"></script>
<style>
body,
html {
......@@ -16,85 +16,7 @@
</head>
<body>
<div id="gjs" style="height:0px; overflow:hidden">
<style>
body {
background-color: #f4ebf3;
}
header {
margin-top: 4rem;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
color: #9f5497;
}
.jumbotron {
background-color: #d0bace;
}
</style>
<!--<div style="margin:100px 100px 25px; padding:25px; font:caption">
This is a demo content from index.html. For the development, you shouldn't edit this file, instead you can
copy and rename it to _index.html, on next server start the new file will be served, and it will be ignored by git.
</div>-->
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2">
<header class="header clearfix">
<h1>GrapesJS Bootstrap v4 Blocks Plugin</h1>
</header>
<main role="main">
<div class="jumbotron">
<h1 class="display-4">Hello!</h1>
<p class="lead">This is demo content from <code>index.html</code>. For development, you shouldn't edit this file. Instead, you can copy and rename it to <code>_index.html</code>. The next time the server starts, the new file will be served, and it will be ignored by git.</p>
</div>
</main>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-2 col-xl-1"><div>Col</div></div>
<div class="col-12 col-sm-6 col-md-4 col-lg-2 col-xl-1"><div>Col</div></div>
<div class="col-12 col-sm-6 col-md-4 col-lg-2 col-xl-1"><div>Col</div></div>
<div class="col-12 col-sm-6 col-md-4 col-lg-2 col-xl-1"><div>Col</div></div>
<div class="col-12 col-sm-6 col-md-4 col-lg-2 col-xl-1"><div>Col</div></div>
<div class="col-12 col-sm-6 col-md-4 col-lg-2 col-xl-1"><div>Col</div></div>
<div class="col-12 col-sm-6 col-md-4 col-lg-2 col-xl-1"><div>Col</div></div>
<div class="col-12 col-sm-6 col-md-4 col-lg-2 col-xl-1"><div>Col</div></div>
<div class="col-12 col-sm-6 col-md-4 col-lg-2 col-xl-1"><div>Col</div></div>
<div class="col-12 col-sm-6 col-md-4 col-lg-2 col-xl-1"><div>Col</div></div>
<div class="col-12 col-sm-6 col-md-4 col-lg-2 col-xl-1"><div>Col</div></div>
<div class="col-12 col-sm-6 col-md-4 col-lg-2 col-xl-1"><div>Col</div></div>
</div>
<div class="row">
<div class="col">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">Home</div>
<div class="tab-pane" id="profile" role="tabpanel">Profile</div>
<div class="tab-pane" id="messages" role="tabpanel">Messages</div>
<div class="tab-pane" id="settings" role="tabpanel">Settings</div>
</div>
</div>
</div>
<div class="embed-responsive embed-responsive-16by9">
<iframe allowfullscreen="allowfullscreen" src="https://www.youtube.com/embed/aqz-KE-bpKQ?" class="embed-responsive-item"></iframe>
</div>
</div>
<div id="gjs">
</div>
......@@ -108,9 +30,9 @@
container: '#gjs',
fromElement: true,
showDevices: false,
plugins: ['grapesjs-blocks-bootstrap4'],
plugins: ['@minerva/grapesjs-blocks-bootstrap5'],
pluginsOpts: {
'grapesjs-blocks-bootstrap4': {
'@minerva/grapesjs-blocks-bootstrap5': {
blocks: {},
blockCategories: {},
labels: {},
......@@ -123,12 +45,10 @@
},
canvas: {
styles: [
'https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css'
'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css'
],
scripts: [
'https://code.jquery.com/jquery-3.5.1.slim.min.js',
'https://unpkg.com/@popperjs/core@2',
'https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js'
'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js'
],
}
});
......
{
"name": "@minerva/grapesjs-blocks-bootstrap",
"version": "0.1.0",
"version": "0.1.6",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@minerva/grapesjs-blocks-bootstrap",
"version": "0.1.0",
"version": "0.1.6",
"license": "BSD-3-Clause",
"dependencies": {
"npm": "^7.0.14"
......
{
"name": "@minerva/grapesjs-blocks-bootstrap",
"version": "0.1.0",
"name": "@minerva/grapesjs-blocks-bootstrap5",
"version": "0.1.6",
"description": "GrapesJS Bootstrap v5 Blocks Plugin",
"main": "dist/grapesjs-blocks-bootstrap5.min.js",
"scripts": {
......
import List, {ListBlock} from './components/List.js';
import Collapse, {CollapseBlock} from './components/Collapse';
import Dropdown, {DropDownBlock} from './components/Dropdown';
import TabsNavigation, {TabsBlock} from "./components/tabs/TabsNavigation";
......@@ -36,6 +37,7 @@ import Default from "./components/Default";
export default (editor, config = {}) => {
const c = config;
const domc = editor.DomComponents;
const blocks = c.blocks;
const bm = editor.BlockManager;
......@@ -107,13 +109,13 @@ export default (editor, config = {}) => {
}
// Basic
/*if (blocks.list) {
if (blocks.list) {
ListBlock(bm, c.labels.list)
List(domc);
}*/
}
/*if (blocks.description_list) {
}*/
// if (blocks.description_list) {
// }
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment