diff --git a/docs/.vuepress/components/DemoCanvasOnly.vue b/docs/.vuepress/components/DemoCanvasOnly.vue index ca9000695..126732a7c 100644 --- a/docs/.vuepress/components/DemoCanvasOnly.vue +++ b/docs/.vuepress/components/DemoCanvasOnly.vue @@ -2,27 +2,11 @@ diff --git a/docs/.vuepress/components/demos/utils.js b/docs/.vuepress/components/demos/utils.js new file mode 100644 index 000000000..9f5c63ba5 --- /dev/null +++ b/docs/.vuepress/components/demos/utils.js @@ -0,0 +1,16 @@ +module.exports = { + gjsConfig: { + // 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, + // Size of the editor + height: '300px', + width: 'auto', + // 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 6e9ff9350..6b1839f21 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -79,12 +79,12 @@ module.exports = { title: 'Modules', collapsable: false, children: [ - ['/modules/Assets', 'Assets'], - ['/modules/Blocks', 'Blocks'], - ['/modules/Components', 'Components'], + ['/modules/Assets', 'Asset Manager'], + ['/modules/Blocks', 'Block Manager'], + ['/modules/Components', 'Component Manager'], ['/modules/Components-js', 'Components & JS'], - ['/modules/Traits', 'Traits'], - ['/modules/Storage', 'Storage'], + ['/modules/Traits', 'Trait Manager'], + ['/modules/Storage', 'Storag Manager'], ['/modules/Plugins', 'Plugins'], ] }, { diff --git a/docs/getting-started.md b/docs/getting-started.md index 9dbc83729..ce5d3eea1 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -8,7 +8,7 @@ meta: # Getting Started In this guide we'll see how to create a completely customized page builder from scratch. -Here you can check the final result: [demo](##). +Here you can find the final result: [demo](##). At first, let's import the latest version of the library @@ -96,19 +96,50 @@ editor.BlockManager.add('my-block-id', { }) ``` ::: tip -If you want to get more about blocks we suggest to read its dedicated page: [Block Module](modules/Blocks.html) +If you want to get more about blocks we suggest to read its dedicated page: [Block Manager Module](modules/Blocks.html) ::: -## Components -Tecnically, once you drop your HTML block inside the canvas each element of the content is transformed in Grapesjs Component, which is an object containing informations about how the element is rendered in the canvas (managed in the View) and how it might look its final code (created by the properties in the Model). Generally, all Model properties are reflected to the View, so, for example, if you add a new attribute to the model, not only it will be available in the export code (will see later how to get it) but also the element you see in the canvas is updated with new attributes. -While this is a common behaviour what is cool about the Components is that you can create a totally decoupled view and show to the editor user what you desire, like for example, just by dragging a placeholder text you can fetch and show instead a dynamic content in the canvas. If want to get more about Custom Components and how to create and extend them, we recommend to checke Component GUIDE. -Grapesjs comes already with few [Built-in Components] which enabel different core features once rendered in canvas. Just to mention few of them, by double clicking on the image component you will see show up the default [Asset Manager], which you can customize or integrate you own, by double clicking on the text component you're able to edit it via the built-in Rich Text Editor, which is also customizable and replaceable. +## Define Components +Technically, once you drop your HTML block inside the canvas each element of the content is transformed in GrapesJS Component, which is an object containing informations about how the element is rendered in the canvas (managed in the View) and how it might look its final code (created by the properties in the Model). Generally, all Model properties are reflected in the View, so, for example, if you add a new attribute to the model, not only it will be available in the export code (will see later how to get it) but also the element you see in the canvas is updated with new attributes. +While this is a common behavior what it's cool about Components that you can create a totally decoupled view and show to the user whatever you desire (so not necessary reflecting the model). For example, by dragging a placeholder text you can fetch and show instead a dynamic content. If want to get more about Custom Components and how to create and extend them, we recommend to check out [Component Manager Module](modules/Components.html). ---TODO: block hooks +GrapesJS comes along with few [built-in Components](modules/Components.html#built-in-components) which enable different core features once rendered in canvas. Just to mention few of them, by double clicking on the image component you will see show up the default [Asset Manager](modules/Assets.html), which you can customize or integrate you own, by double clicking on the text component you're able to edit it via the built-in Rich Text Editor, which is also customizable and [replaceable](guides/Replace-Rich-Text-Editor.html). -If you prefer you can also create Blocks directly with the component type by passing an object +As we have seen before you can create Blocks directly as Components +```js +editor.BlockManager.add('my-block-id', { + // ... + content: { + tagName: 'div', + draggable: false, + attributes: { 'some-attribute': 'some-value' }, + components: [ + { + tagName: 'span', + content: 'Some static content', + }, { + tagName: 'div', + // use `content` for static strings, `components` string will be parsed + // and transformed in Components + components: 'HTML at some point', + } + ] + } +}) +``` +::: tip +Check the [Components API](api/components.html) and see how to interact with components dynamically +::: --- add block as image type object +An example on how to select some inner component and replace its children with new contents + +```js +// The wrapper is the root Component +const wrapper = editor.DomComponents.getWrapper(); +const myComponent = wrapper.find('div.my-component')[0]; +myComponent.components().forEach(component => /* ... do something ... */); +myComponent.components('
New content
'); +``` ## Panels Now that we have a canvas and custom blocks let's see how to create a new panel with some buttons inside which trigger commands (from the core or custom one). diff --git a/docs/modules/Assets.md b/docs/modules/Assets.md index 90fd16ee2..4dec716b7 100644 --- a/docs/modules/Assets.md +++ b/docs/modules/Assets.md @@ -1,8 +1,8 @@ --- -title: Assets +title: Asset Manager --- -# Assets +# Asset Manager

GrapesJS - Asset Manager

diff --git a/docs/modules/Blocks.md b/docs/modules/Blocks.md index 560755a2b..17ad328c4 100644 --- a/docs/modules/Blocks.md +++ b/docs/modules/Blocks.md @@ -1,8 +1,8 @@ --- -title: Blocks +title: Block Manager --- -# Blocks +# Block Manager

GrapesJS - Block Manager

diff --git a/docs/modules/Components.md b/docs/modules/Components.md index e1fbeda22..ea1cbcc24 100644 --- a/docs/modules/Components.md +++ b/docs/modules/Components.md @@ -1,8 +1,8 @@ --- -title: Components +title: Component Manager --- -# Components +# Component Manager The Component is the base element for the template composition and, usually, elements like images, text boxes, maps, etc. fit perfectly in this concept. The concept of the component was made to allow the developer to bind different behaviors to different elements. Like for example, opening the Asset Manager on double click of the image. diff --git a/docs/modules/Storage.md b/docs/modules/Storage.md index ead5a1d60..36586bdaa 100644 --- a/docs/modules/Storage.md +++ b/docs/modules/Storage.md @@ -1,8 +1,8 @@ --- -title: Storage +title: Storage Manager --- -# Storage +# Storage Manager The aim of this guide is to show how to setup correctly your storage configuration for common usages of the editor and explain also some additional advanced settings diff --git a/docs/modules/Traits.md b/docs/modules/Traits.md index b60765e94..7e140198e 100644 --- a/docs/modules/Traits.md +++ b/docs/modules/Traits.md @@ -1,8 +1,8 @@ --- -title: Traits +title: Trait Manager --- -# Traits +# Trait Manager In GrapesJS, Traits could define different parameters and behaviors of a single component. The user generally will see traits as *Settings* of each component. A common use of traits is to customize element attributes (eg. `placeholder` for inputs) and in this case the editor comes already with some built-in, easy configurable, types.