diff --git a/docs/404.html b/docs/404.html index ff1bfd8b1..ab822c693 100644 --- a/docs/404.html +++ b/docs/404.html @@ -8,12 +8,12 @@ - - + + -

404

There's nothing here.
Take me home.
- +

404

How did we get here?
Take me home.
+ diff --git a/docs/Home.html b/docs/Home.html index 608efcaa3..c0ce9d734 100644 --- a/docs/Home.html +++ b/docs/Home.html @@ -8,8 +8,8 @@ - - + + @@ -330,6 +330,6 @@ The default one is the localStorage which is pretty simple and all the data are } ...

Check Storage Manager API Reference

Edit this page on GitHub
Last Updated: 7/13/2018, 12:12:35 AM
- + diff --git a/docs/api/assets.html b/docs/api/assets.html index 7bd1f0797..a0ffd56ac 100644 --- a/docs/api/assets.html +++ b/docs/api/assets.html @@ -8,8 +8,8 @@ - - + + @@ -80,6 +80,6 @@ passed entity

+ diff --git a/docs/api/block_manager.html b/docs/api/block_manager.html index 7f6b3d12d..7c043ed8a 100644 --- a/docs/api/block_manager.html +++ b/docs/api/block_manager.html @@ -8,8 +8,8 @@ - - + + @@ -76,6 +76,6 @@ blockManager. →

- + diff --git a/docs/api/canvas.html b/docs/api/canvas.html index f9bd472e4..b0902d97c 100644 --- a/docs/api/canvas.html +++ b/docs/api/canvas.html @@ -8,8 +8,8 @@ - - + + @@ -52,6 +52,6 @@ canvas.scrol Asset Manager →

- + diff --git a/docs/api/commands.html b/docs/api/commands.html index fd75117b8..963394a6d 100644 --- a/docs/api/commands.html +++ b/docs/api/commands.html @@ -8,8 +8,8 @@ - - + + @@ -66,6 +66,6 @@ commands.isA DOM Components →

- + diff --git a/docs/api/component.html b/docs/api/component.html index d70fdd350..ec60b212e 100644 --- a/docs/api/component.html +++ b/docs/api/component.html @@ -8,8 +8,8 @@ - - + + @@ -27,7 +27,7 @@ Twitter GitHub -

Component

The Component object represents a single node of our template structure, so when you update its properties the changes are +

Component

The Component object represents a single node of our template structure, so when you update its properties the changes are immediately reflected on the canvas and in the code to export (indeed, when you ask to export the code we just go through all the tree of nodes). An example on how to update properties:

component.set({
@@ -47,32 +47,32 @@ will be hidden from the style manager. Default: true
  • 
 For example if you create a component likes this: { removable: false, draggable: false, propagate: ['removable', 'draggable'] }
 and append some new component inside, the new added component will get the exact same properties indicated in the propagate array (and the propagate property itself). Default: []
  • toolbarArray<Object>? Set an array of items to show up inside the toolbar when the component is selected (move, clone, delete).
 Eg. toolbar: [ { attributes: {class: 'fa fa-arrows'}, command: 'tlb-move' }, ... ].
-By default, when toolbar property is falsy the editor will add automatically commands like move, delete, etc. based on its properties.
  • componentsCollection<Component>? Children components. Default: null
    •  is
    Check component's type
     Parameters
     Examples
    component.is('image')
+By default, when toolbar property is falsy the editor will add automatically commands like move, delete, etc. based on its properties.
  • componentsCollection<Component>? Children components. Default: null
    •  init
    Hook method, called once the model is created
     updated
    Hook method, called when the model has been updated (eg. updated some model's property)
     Parameters
    • propertyString Property name, if triggered after some property update
    • valueany Property value, if triggered after some property update
    • previousany Property previous value, if triggered after some property update
     removed
    Hook method, called once the model has been removed
     is
    Check component's type
     Parameters
     Examples
    component.is('image')
 // -> false
-
    Returns Boolean
     find
    Find inner components by query string.
-ATTENTION: this method works only with already rendered component
     Parameters
     Examples
    component.find('div > .class');
+
    Returns Boolean
     index
    Get the index of the component in the parent collection.
    Returns Number
     find
    Find inner components by query string.
+ATTENTION: this method works only with already rendered component
     Parameters
     Examples
    component.find('div > .class');
 // -> [Component, Component, ...]
 
    Returns Array Array of components
     closest
    Find the closest parent component by query string.
-ATTENTION: this method works only with already rendered component
     Parameters
     Examples
    component.closest('div.some-class');
+ATTENTION: this method works only with already rendered component
     Parameters
     Examples
    component.closest('div.some-class');
 // -> Component
-
    Returns Component
     replaceWith
    Replace a component with another one
     Parameters
     Examples
    component.replaceWith('<div>Some new content</div>');
+
    Returns Component
     replaceWith
    Replace a component with another one
     Parameters
     Examples
    component.replaceWith('<div>Some new content</div>');
 // -> Component
-
    Returns (Component | Array<Component>) New added component/s
     setAttributes
    Update attributes of the component
     Parameters
    • attrsObject Key value attributes
    • opts   (optional, default {})
     Examples
    component.setAttributes({ id: 'test', 'data-key': 'value' });
-
    Returns this
     addAttributes
    Add attributes to the component
     Parameters
    • attrsObject Key value attributes
     Examples
    component.addAttributes({ 'data-key': 'value' });
-
    Returns this
     getStyle
    Get the style of the component
    Returns Object
     setStyle
    Set the style on the component
     Parameters
    • propObject Key value style object (optional, default {})
    • opts   (optional, default {})
     Examples
    component.setStyle({ color: 'red' });
-
    Returns Object
     getAttributes
    Return all component's attributes
    Returns Object
     addClass
    Add classes
     Parameters
     Examples
    model.addClass('class1');
+
    Returns (Component | Array<Component>) New added component/s
     setAttributes
    Update attributes of the component
     Parameters
    • attrsObject Key value attributes
    • opts   (optional, default {})
     Examples
    component.setAttributes({ id: 'test', 'data-key': 'value' });
+
    Returns this
     addAttributes
    Add attributes to the component
     Parameters
    • attrsObject Key value attributes
     Examples
    component.addAttributes({ 'data-key': 'value' });
+
    Returns this
     getStyle
    Get the style of the component
    Returns Object
     setStyle
    Set the style on the component
     Parameters
    • propObject Key value style object (optional, default {})
    • opts   (optional, default {})
     Examples
    component.setStyle({ color: 'red' });
+
    Returns Object
     getAttributes
    Return all component's attributes
    Returns Object
     addClass
    Add classes
     Parameters
     Examples
    model.addClass('class1');
 model.addClass('class1 class2');
 model.addClass(['class1', 'class2']);
 // -> [SelectorObject, ...]
-
    Returns Array Array of added selectors
     setClass
    Set classes (resets current collection)
     Parameters
     Examples
    model.setClass('class1');
+
    Returns Array Array of added selectors
     setClass
    Set classes (resets current collection)
     Parameters
     Examples
    model.setClass('class1');
 model.setClass('class1 class2');
 model.setClass(['class1', 'class2']);
 // -> [SelectorObject, ...]
-
    Returns Array Array of added selectors
     removeClass
    Remove classes
     Parameters
     Examples
    model.removeClass('class1');
+
    Returns Array Array of added selectors
     removeClass
    Remove classes
     Parameters
     Examples
    model.removeClass('class1');
 model.removeClass('class1 class2');
 model.removeClass(['class1', 'class2']);
 // -> [SelectorObject, ...]
-
    Returns Array Array of removed selectors
     getClasses
    Returns component's classes as an array of strings
    Returns Array
     append
    Add new component children
     Parameters
    • components(Component | String) Component to add
    • optsObject Options, same as in model.add()(from backbone) (optional, default {})
     Examples
    someComponent.get('components').length // -> 0
+
    Returns Array Array of removed selectors
     getClasses
    Returns component's classes as an array of strings
    Returns Array
     append
    Add new component children
     Parameters
    • components(Component | String) Component to add
    • optsObject Options, same as in model.add()(from backbone) (optional, default {})
     Examples
    someComponent.get('components').length // -> 0
 const videoComponent = someComponent.append('<video></video><div></div>')[0];
 // This will add 2 components (`video` and `div`) to your `someComponent`
 someComponent.get('components').length // -> 2
@@ -80,7 +80,7 @@ someComponent..append(otherComponent2);
 otherComponent.append([otherComponent3, otherComponent4]);
 
    Returns Array Array of appended components
     components
    Set new collection if components are provided, otherwise the
-current collection is returned
     Parameters
     Examples
    // Set new collection
+current collection is returned
     Parameters
     Examples
    // Set new collection
 component.components('<span></span><div></div>');
 // Get current collection
 const collection = component.components();
@@ -88,9 +88,9 @@ console.log<
 // -> 2
 
    Returns (Collection | Array<Component>)
     parent
    Get the parent component, if exists
     Examples
    component.parent();
 // -> Component
-
    Returns Component
     getTrait
    Get the trait by id/name
     Parameters
    • idString The id or name of the trait
     Examples
    const traitTitle = component.getTrait('title');
+
    Returns Component
     getTrait
    Get the trait by id/name
     Parameters
    • idString The id or name of the trait
     Examples
    const traitTitle = component.getTrait('title');
 traitTitle && traitTitle.set('label', 'New label');
-
    Returns Trait Trait model
     getName
    Get the name of the component
    Returns String
     getIcon
    Get the icon string
    Returns String
     toHTML
    Return HTML string of the component
     Parameters
    • optsObject Options (optional, default {})
+
    Returns Trait Trait model
     getName
    Get the name of the component
    Returns String
     getIcon
    Get the icon string
    Returns String
     toHTML
    Return HTML string of the component
     Parameters
    • optsObject Options (optional, default {})
 
      • opts.attributes(Object | Function) You can pass an object of custom attributes to replace
 with the current one or you can even pass a function to generate attributes dynamically (optional, default null)
     Examples
    // Simple HTML return
 component.set({ tagName: 'span' });
@@ -112,18 +112,18 @@ component.to
  },
 });
 // -> <span title="Custom attribute"></span>
-
    Returns String HTML string
     getId
    Return the component id
    Returns String
     setId
    Set new id on the component
     Parameters
    Returns this
     getEl
    Get the DOM element of the component.
+
    Returns String HTML string
     getId
    Return the component id
    Returns String
     setId
    Set new id on the component
     Parameters
    Returns this
     getEl
    Get the DOM element of the component.
 This works only if the component is already rendered
    Returns HTMLElement
     getView
    Get the View of the component.
-This works only if the component is already rendered
    Returns ComponentView
     onAll
    Execute callback function on itself and all inner components
     Parameters
    • clbFunction Callback function, the model is passed as an argument
     Examples
    component.onAll(component => {
+This works only if the component is already rendered
    Returns ComponentView
     onAll
    Execute callback function on itself and all inner components
     Parameters
    • clbFunction Callback function, the model is passed as an argument
     Examples
    component.onAll(component => {
  // do something with component
 })
-
    Returns this
     remove
    Remove the component
    Returns this
    Edit this page on GitHub
    Last Updated: 11/3/2018, 1:41:52 PM
    
+
    Returns this
     remove
    Remove the component
    Returns this
    Edit this page on GitHub
    Last Updated: 11/22/2018, 7:37:29 AM

    ← Panels →

    - + diff --git a/docs/api/components.html b/docs/api/components.html index 09e4e8d44..bacbb32d7 100644 --- a/docs/api/components.html +++ b/docs/api/components.html @@ -8,8 +8,8 @@ - - + + @@ -27,13 +27,13 @@ Twitter GitHub -

    DomComponents

    With this module is possible to manage components inside the canvas. You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object

    const editor = grapesjs.init({
+

    DomComponents

    With this module is possible to manage components inside the canvas. You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object

    const editor = grapesjs.init({
  domComponents: {
    // options
  }
 })

    Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance

    const domComponents = editor.DomComponents;
-

    load

    Load components from the passed object, if the object is empty will try to fetch them +

    load

    Load components from the passed object, if the object is empty will try to fetch them autonomously from the selected storage The fetched data will be added to the collection

    Parameters

    • dataObject Object of data to load (optional, default '')

    Returns Object Loaded data

    store

    Store components on the selected storage

    Parameters

    • noStoreBoolean If true, won't store

    Returns Object Data to store

    getWrapper

    Returns root component inside the canvas. Something like <body> inside HTML page The wrapper doesn't differ from the original Component Model

    Examples

    // Change background of the wrapper and set some attribute
@@ -77,13 +77,15 @@ as 'domComponents.getComponents().add(...)'
    Array<Component>) Component/s added
     render
    Render and returns wrapper element with all components inside.
 Once the wrapper is rendered, and it's what happens when you init the editor,
 the all new components will be added automatically and property changes are all
-updated immediately
    Returns HTMLElement
     clear
    Remove all components
    Returns this
    Edit this page on GitHub
    Last Updated: 7/8/2018, 1:46:22 PM

    +updated immediately

    Returns HTMLElement

    clear

    Remove all components

    Returns this

    addType

    Add new component type. +Read more about this in Define New Component

    Parameters

    Returns this

    getType

    Get component type. +Read more about this in Define New Component

    Parameters

    Returns Object Component type defintion, eg. { model: ..., view: ... }

    getTypes

    Return the array of all types

    Returns Array

    Edit this page on GitHub
    Last Updated: 7/8/2018, 1:46:22 PM

    ← - Component →

    - + diff --git a/docs/api/css_composer.html b/docs/api/css_composer.html index 0dd2fd9b5..c2e6440e0 100644 --- a/docs/api/css_composer.html +++ b/docs/api/css_composer.html @@ -8,8 +8,8 @@ - - + + @@ -74,6 +74,6 @@ rule.set →

    - + diff --git a/docs/api/device_manager.html b/docs/api/device_manager.html index 7ccd2bd88..17b604416 100644 --- a/docs/api/device_manager.html +++ b/docs/api/device_manager.html @@ -8,8 +8,8 @@ - - + + @@ -51,6 +51,6 @@ console.log< Selector Manager →

    - + diff --git a/docs/api/editor.html b/docs/api/editor.html index ee7194fed..d35810d40 100644 --- a/docs/api/editor.html +++ b/docs/api/editor.html @@ -8,8 +8,8 @@ - - + + @@ -34,7 +34,7 @@ You get the Editor instance on init method and you can pass options via its

    Available Events

    You can make use of available events in this way

    editor.on('EVENT-NAME', (some, argument) => {
    // do something
 })
-

    Components

    Blocks

    Assets

    Keymaps

    Style Manager

    Storages

    Canvas