From 7ee00da022e7308d2a1750a9fc94a0161cd58093 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Mon, 9 Jul 2018 23:25:34 +0200 Subject: [PATCH] Update getting started demo --- docs/.vuepress/components/DemoBasicBlocks.vue | 41 +++++++++++++++++++ docs/.vuepress/components/DemoCanvasOnly.vue | 14 ++++++- .../components/demos/DemoCanvasOnly.css | 12 ++++++ .../components/demos/DemoCanvasOnly.js | 10 ++++- docs/.vuepress/config.js | 3 +- docs/getting-started.md | 19 +++++---- package.json | 4 +- 7 files changed, 90 insertions(+), 13 deletions(-) create mode 100644 docs/.vuepress/components/DemoBasicBlocks.vue create mode 100644 docs/.vuepress/components/demos/DemoCanvasOnly.css diff --git a/docs/.vuepress/components/DemoBasicBlocks.vue b/docs/.vuepress/components/DemoBasicBlocks.vue new file mode 100644 index 000000000..628ea20b3 --- /dev/null +++ b/docs/.vuepress/components/DemoBasicBlocks.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/docs/.vuepress/components/DemoCanvasOnly.vue b/docs/.vuepress/components/DemoCanvasOnly.vue index a43fa04b8..cd6491952 100644 --- a/docs/.vuepress/components/DemoCanvasOnly.vue +++ b/docs/.vuepress/components/DemoCanvasOnly.vue @@ -9,12 +9,22 @@ module.exports = { console.log('import res', res); }); */ - - var editor = grapesjs.init({ + const editor = grapesjs.init({ + // Indicate where to init the editor. It's also possible to pass an HTMLElement container: '#gjs', + // Get the content for the canvas direectly from the element + // As an alternative we could use: `components: '

Hello World Component!

'`, fromElement: true, + // Height of the editor height: '300px', + // Disable the storage manager for the moment + storageManager: { type: null }, + // Avoid any default panel + panels: { defaults: [] }, }); } } + + diff --git a/docs/.vuepress/components/demos/DemoCanvasOnly.css b/docs/.vuepress/components/demos/DemoCanvasOnly.css new file mode 100644 index 000000000..929812357 --- /dev/null +++ b/docs/.vuepress/components/demos/DemoCanvasOnly.css @@ -0,0 +1,12 @@ +/* Let's highlight canvas boundaries */ +#gjs { + border-radius: 3px; + border: 3px solid #444; +} + +/* Reset some default styling */ +.gjs-cv-canvas { + top: 0; + width: 100%; + height: 100%; +} diff --git a/docs/.vuepress/components/demos/DemoCanvasOnly.js b/docs/.vuepress/components/demos/DemoCanvasOnly.js index b6ca702b3..b388dd6cf 100644 --- a/docs/.vuepress/components/demos/DemoCanvasOnly.js +++ b/docs/.vuepress/components/demos/DemoCanvasOnly.js @@ -1,5 +1,13 @@ -var editor = grapesjs.init({ +const editor = grapesjs.init({ + // Indicate where to init the editor. You can also pass an HTMLElement container: '#gjs', + // Get the content for the canvas directly from the element + // As an alternative we could use: `components: '

Hello World Component!

'`, fromElement: true, + // Height of the editor height: '300px', + // Disable the storage manager for the moment + storageManager: { type: null }, + // Avoid any default panel + panels: { defaults: [] }, }); diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 202f76645..fe0177d52 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -7,7 +7,8 @@ module.exports = { head: [ ['link', { rel: 'icon', href: '/logo-icon.png' }], ['link', { rel: 'stylesheet', href: 'https://unpkg.com/grapesjs/dist/css/grapes.min.css' }], // dev https://localhost:8080/dist/css/grapes.min.css - ['script', { src: '/grapes.min.js' }], // dev https://localhost:8080/dist/grapes.min.js + // ['script', { src: '/grapes.min.js' }], // dev https://localhost:8080/dist/grapes.min.js + ['script', { src: 'https://localhost:8080/dist/grapes.min.js' }], // dev https://localhost:8080/dist/grapes.min.js ], localesSKIP: { '/': { diff --git a/docs/getting-started.md b/docs/getting-started.md index 871181bad..6b03939e1 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -7,7 +7,8 @@ meta: # Getting Started -In this guide we'll see how to create a completely customized page builder from scratch. You can check the final result [here](##). +In this guide we'll see how to create a completely customized page builder from scratch. +Here you can check the final result: [demo](##). At first, let's import the latest version of the library @@ -16,26 +17,30 @@ At first, let's import the latest version of the library ``` -## Canvas +## Start from the canvas -The first step is to define the interface of our editor and for this purpose we gonna use Panels API. +The first step is to define the interface of our editor and for this purpose we gonna start from basic HTML layouts. Finding a common structure for the UI of any project is not an easy task that's why GrapesJS prefers to keep this process as simple as possible, by providing just few helpers but letting the user define the interface in a more flexible way. The main part of the GrapesJS editor is the canvas, this is where you gonna create the whole structure of your templates and you definitely can't miss it. Let's try to initiate the editor with just the canvas and no panels. <<< @/docs/.vuepress/components/demos/DemoCanvasOnly.html <<< @/docs/.vuepress/components/demos/DemoCanvasOnly.js +<<< @/docs/.vuepress/components/demos/DemoCanvasOnly.css -With just the canvas you're already able to move, copy and delete components on the structure. For now we just see the example template taken from the container. Let's see now how can we create and drag custom blocks into our canvas. +With just the canvas you're already able to move, copy and delete components from the structure (when you select components in the canvas, the toolbar is shown). For now we just see the example template taken from the container. Let's see now how can we create and drag custom blocks into our canvas. -## Blocks -A block in Grapesjs is just a draggable peace of HTML, so it can be an image, a button, or an entire section with videos, forms and iframes. Let's start from creating another container and append inside ir few basic blocks which we can later use to build more complex structures. +## Add Blocks +The Block in GrapesJS is just a draggable peace of HTML, so it can be an image, a button, or an entire section with videos, forms and iframes. Let's start from creating another container and append inside it few basic blocks which we can later use to build more complex structures. + + + -- add block, image, text and button blocks, put the block container under the canvas -As you see we added our blocks via the initial configuration, which is ok, but obviously there might be the case you would like to add them dynamically, in this case you have to use the Block's API +As you see we added our blocks via the initial configuration, which is ok, but obviously there might be the case you would like to add them dynamically, in this case you have to use the [Block Manager API](api/block_manager.html) -- show how to add a block via API --TODO: components as blocks diff --git a/package.json b/package.json index 10cedc1cf..2478d9b57 100644 --- a/package.json +++ b/package.json @@ -16,11 +16,9 @@ "cash-dom": "^1.3.7", "codemirror": "^5.39.0", "codemirror-formatting": "^1.0.0", - "documentation": "^8.0.0", "font-awesome": "^4.7.0", "keymaster": "^1.6.2", "promise-polyfill": "^8.0.0", - "sinon": "^6.1.0", "spectrum-colorpicker": "^1.8.0", "underscore": "^1.9.1" }, @@ -29,6 +27,7 @@ "babel-loader": "^7.1.5", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-preset-env": "^1.7.0", + "documentation": "^8.0.0", "eslint": "^4.19.1", "html-webpack-plugin": "^3.2.0", "husky": "^0.14.3", @@ -36,6 +35,7 @@ "lint-staged": "^7.2.0", "node-sass": "^4.9.1", "prettier": "^1.13.7", + "sinon": "^6.1.0", "string-replace-loader": "^2.1.1", "vuepress": "^0.10.2", "webpack": "^4.15.1",