diff --git a/docs/404.html b/docs/404.html index 350e397d5..56eb17c4c 100644 --- a/docs/404.html +++ b/docs/404.html @@ -4,19 +4,19 @@ GrapesJS - + - - - + + + -

404

How did we get here?
+ - + diff --git a/docs/Home.html b/docs/Home.html index 3fc7e2ec6..636407194 100644 --- a/docs/Home.html +++ b/docs/Home.html @@ -4,14 +4,14 @@ Getting started | GrapesJS - + - - - + + + - + diff --git a/docs/api/asset.html b/docs/api/asset.html index cb36ff5f5..872a190a1 100644 --- a/docs/api/asset.html +++ b/docs/api/asset.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS
- + diff --git a/docs/api/assets.html b/docs/api/assets.html index 61ba875dc..e89c95d5b 100644 --- a/docs/api/assets.html +++ b/docs/api/assets.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

# Assets

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

const editor = grapesjs.init({
+     (opens new window) 
   
 
# Assets
 
You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
 
const editor = grapesjs.init({
  assetManager: {
    // options
  }
@@ -72,7 +72,7 @@ assetManager.// or by passing the Asset
 const asset = assetManager.get('http://img.jpg');
 assetManager.remove(asset);
-
Returns Asset Removed asset
 
# getContainer
 
Return the Asset Manager Container
 
Returns HTMLElement (opens new window)
  

+

Returns Asset Removed asset

# getContainer

Return the Asset Manager Container

Returns HTMLElement (opens new window)

←

GrapesJS
- + diff --git a/docs/api/block_manager.html b/docs/api/block_manager.html index 7ffbe6f9f..8f2cb558c 100644 --- a/docs/api/block_manager.html +++ b/docs/api/block_manager.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

# Blocks

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

const editor = grapesjs.init({
+     (opens new window) 
   
 
# Blocks
 
You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
 
const editor = grapesjs.init({
  blockManager: {
    // options
  }
@@ -83,7 +83,7 @@ blockManager.// You can also render your blocks outside of the main block container
 const newBlocksEl = blockManager.render(filtered, { external: true });
 document.getElementById('some-id').appendChild(newBlocksEl);
-
Returns HTMLElement (opens new window) Rendered element
  

+

Returns HTMLElement (opens new window) Rendered element

← →

- + diff --git a/docs/api/canvas.html b/docs/api/canvas.html index cb54dc5d3..9f53537a4 100644 --- a/docs/api/canvas.html +++ b/docs/api/canvas.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

# Canvas

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

const editor = grapesjs.init({
+     (opens new window) 
   
 
# Canvas
 
You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
 
const editor = grapesjs.init({
  canvas: {
    // options
  }
@@ -79,7 +79,7 @@ canvas.scrol
     .testp { color: blue; }
   `,
 });
-
Returns Frame
  

+

Returns Frame

← →

- + diff --git a/docs/api/commands.html b/docs/api/commands.html index 617c4c02b..a9c68e08c 100644 --- a/docs/api/commands.html +++ b/docs/api/commands.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

# Commands

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

const editor = grapesjs.init({
+     (opens new window) 
   
 
# Commands
 
You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
 
const editor = grapesjs.init({
  commands: {
    // options
  }
@@ -58,7 +58,7 @@ By passing just a function it's intended as a stateless command
 commands.add('myCommand2', editor => { ... });
 
Returns this
 
# get
 
Get command by ID
 
# Parameters
  
# Examples
 
var myCommand = commands.get('myCommand');
 myCommand.run();
-
Returns Object (opens new window) Object representing the command
 
# extend
 
Extend the command. The command to extend should be defined as an object
 
# Parameters
  
# Examples
 
commands.extend('old-command', {
+
Returns Object (opens new window) Object representing the command
 
# extend
 
Extend the command. The command to extend should be defined as an object
 
# Parameters
  
# Examples
 
commands.extend('old-command', {
  someInnerFunction() {
  // ...
  }
@@ -76,7 +76,7 @@ commands.isA
 // -> false
 
Returns Boolean (opens new window)
 
# getActive
 
Get all active commands
 
# Examples
 
console.log(commands.getActive());
 // -> { someCommand: itsLastReturn, anotherOne: ... };
-
Returns Object (opens new window)
  

+

Returns Object (opens new window)

← →

- + diff --git a/docs/api/component.html b/docs/api/component.html index 1a0eefcd4..79944a474 100644 --- a/docs/api/component.html +++ b/docs/api/component.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

# Component

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

# 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({
@@ -50,7 +50,7 @@ eg. '.some-class[title=Hello], [data-gjs-type=column]' means you ca
 containing some-class class and Hello title, and column components. In the case of a function, target and destination components are passed as arguments, return a Boolean to indicate if the drag is possible. Default: true 
  • droppable (Boolean (opens new window) | String (opens new window) | Function (opens new window))? Indicates if it's possible to drop other components inside. You can use
 a query string as with draggable. In the case of a function, target and destination components are passed as arguments, return a Boolean to indicate if the drop is possible. Default: true
    •  
  • badgable Boolean (opens new window)? Set to false if you don't want to see the badge (with the name) over the component. Default: true
    •  
  • stylable (Boolean (opens new window) | Array (opens new window)<String (opens new window)>)? True if it's possible to style the component.
 You can also indicate an array of CSS properties which is possible to style, eg. ['color', 'width'], all other properties
-will be hidden from the style manager. Default: true
    •  
  • stylable-require Array (opens new window)<String (opens new window)>? Indicate an array of style properties to show up which has been marked as toRequire. Default: []
    •  
  • unstylable Array (opens new window)<String (opens new window)>? Indicate an array of style properties which should be hidden from the style manager. Default: []
    •  
  • highlightable Boolean (opens new window)? It can be highlighted with 'dotted' borders if true. Default: true
    •  
  • copyable Boolean (opens new window)? True if it's possible to clone the component. Default: true
    •  
  • resizable Boolean (opens new window)? Indicates if it's possible to resize the component. It's also possible to pass an object as options for the Resizer (opens new window). Default: false
    •  
  • editable Boolean (opens new window)? Allow to edit the content of the component (used on Text components). Default: false
    •  
  • layerable Boolean (opens new window)? Set to false if you need to hide the component inside Layers. Default: true
    •  
  • selectable Boolean (opens new window)? Allow component to be selected when clicked. Default: true
    •  
  • hoverable Boolean (opens new window)? Shows a highlight outline when hovering on the element if true. Default: true
    •  
  • locked Boolean (opens new window)? Disable the selection of the component and its children in the canvas. Default: false
    •  
  • void Boolean (opens new window)? This property is used by the HTML exporter as void elements don't have closing tags, eg. <br/>, <hr/>, etc. Default: false
    •  
  • style Object (opens new window)? Component default style, eg. { width: '100px', height: '100px', 'background-color': 'red' }
    •  
  • styles String (opens new window)? Component related styles, eg. .my-component-class { color: red }
    •  
  • content String (opens new window)? Content of the component (not escaped) which will be appended before children rendering. Default: ''
    •  
  • icon String (opens new window)? Component's icon, this string will be inserted before the name (in Layers and badge), eg. it can be an HTML string ''. Default: ''
    •  
  • script (String (opens new window) | Function (opens new window))? Component's javascript. More about it here. Default: ''
    •  
  • script-export (String (opens new window) | Function (opens new window))? You can specify javascript available only in export functions (eg. when you get the HTML).
+will be hidden from the style manager. Default: true
    •  
  • stylable-require Array (opens new window)<String (opens new window)>? Indicate an array of style properties to show up which has been marked as toRequire. Default: []
    •  
  • unstylable Array (opens new window)<String (opens new window)>? Indicate an array of style properties which should be hidden from the style manager. Default: []
    •  
  • highlightable Boolean (opens new window)? It can be highlighted with 'dotted' borders if true. Default: true
    •  
  • copyable Boolean (opens new window)? True if it's possible to clone the component. Default: true
    •  
  • resizable Boolean (opens new window)? Indicates if it's possible to resize the component. It's also possible to pass an object as options for the Resizer (opens new window). Default: false
    •  
  • editable Boolean (opens new window)? Allow to edit the content of the component (used on Text components). Default: false
    •  
  • layerable Boolean (opens new window)? Set to false if you need to hide the component inside Layers. Default: true
    •  
  • selectable Boolean (opens new window)? Allow component to be selected when clicked. Default: true
    •  
  • hoverable Boolean (opens new window)? Shows a highlight outline when hovering on the element if true. Default: true
    •  
  • locked Boolean (opens new window)? Disable the selection of the component and its children in the canvas. Default: false
    •  
  • void Boolean (opens new window)? This property is used by the HTML exporter as void elements don't have closing tags, eg. <br/>, <hr/>, etc. Default: false
    •  
  • style Object (opens new window)? Component default style, eg. { width: '100px', height: '100px', 'background-color': 'red' }
    •  
  • styles String (opens new window)? Component related styles, eg. .my-component-class { color: red }
    •  
  • content String (opens new window)? Content of the component (not escaped) which will be appended before children rendering. Default: ''
    •  
  • icon String (opens new window)? Component's icon, this string will be inserted before the name (in Layers and badge), eg. it can be an HTML string ''. Default: ''
    •  
  • script (String (opens new window) | Function (opens new window))? Component's javascript. More about it here. Default: ''
    •  
  • script-export (String (opens new window) | Function (opens new window))? You can specify javascript available only in export functions (eg. when you get the HTML).
 If this property is defined it will overwrite the script one (in export functions). Default: ''
    •  
  • traits Array (opens new window)<(Object (opens new window) | String (opens new window))>? Component's traits. More about it here. Default: ['id', 'title']
    •  
  • propagate Array (opens new window)<String (opens new window)>? Indicates an array of properties which will be inhereted by all NEW appended children.
 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: []
    •  
  • toolbar Array (opens new window)<Object (opens new window)>? Set an array of items to show up inside the toolbar when the component is selected (move, clone, delete).
@@ -58,7 +58,7 @@ Eg. toolbar: [ { attributes: {class: 'fa fa-arrows'}, command: 'tlb-move'
 By default, when toolbar property is falsy the editor will add automatically commands core:component-exit (select parent component, added if there is one), tlb-move (added if draggable) , tlb-clone (added if copyable), tlb-delete (added if removable).
    •  
  • components Collection<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
     
    • property String (opens new window) Property name, if triggered after some property update
      •  
    • value any Property value, if triggered after some property update
      •  
    • previous any 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 (opens new window)
     
    # props
     
    Return all the propeties
     
    Returns Object (opens new window)
     
    # index
     
    Get the index of the component in the parent collection.
     
    Returns Number (opens new window)
     
    # setDragMode
     
    Change the drag mode of the component.
-To get more about this feature read: https://github.com/artf/grapesjs/issues/1936 (opens new window)
     
    # Parameters
      
    Returns this
     
    # find
     
    Find inner components by query string.
+To get more about this feature read: https://github.com/GrapesJS/grapesjs/issues/1936 (opens new window)
     
    # Parameters
      
    Returns this
     
    # getDragMode
     
    Get the drag mode of the component.
     
    Returns String (opens new window) Drag mode value, options: 'absolute' | 'translate' | ''
     
    # 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 (opens new window) Array of components
     
    # findType
     
    Find all inner components by component type.
@@ -75,12 +75,12 @@ console.log<

    Returns Component Found component, otherwise undefined

    # contains

    The method returns a Boolean value indicating whether the passed component is a descendant of a given component

    # Parameters

    • component Component Component to check

    Returns Boolean (opens new window)

    # replaceWith

    Replace a component with another one

    # Parameters

    # Examples

    component.replaceWith('<div>Some new content</div>');
 // -> Component
-

    Returns (Component | Array (opens new window)<Component>) New added component/s

    # setAttributes

    Update attributes of the component

    # Parameters

    # Examples

    component.setAttributes({ id: 'test', 'data-key': 'value' });
-

    Returns this

    # addAttributes

    Add attributes to the component

    # Parameters

    # Examples

    component.addAttributes({ 'data-key': 'value' });
-

    Returns this

    # removeAttributes

    Remove attributes from the component

    # Parameters

    # Examples

    component.removeAttributes('some-attr');
+

    Returns (Component | Array (opens new window)<Component>) New added component/s

    # setAttributes

    Update attributes of the component

    # Parameters

    # Examples

    component.setAttributes({ id: 'test', 'data-key': 'value' });
+

    Returns this

    # addAttributes

    Add attributes to the component

    # Parameters

    # Examples

    component.addAttributes({ 'data-key': 'value' });
+

    Returns this

    # removeAttributes

    Remove attributes from the component

    # Parameters

    # Examples

    component.removeAttributes('some-attr');
 component.removeAttributes(['some-attr1', 'some-attr2']);
-

    Returns this

    # getStyle

    Get the style of the component

    # Parameters

    • options (optional, default {})
    • optsAdd (optional, default {})

    Returns Object (opens new window)

    # setStyle

    Set the style on the component

    # Parameters

    # Examples

    component.setStyle({ color: 'red' });
-

    Returns Object (opens new window)

    # getAttributes

    Return all component's attributes

    # Parameters

    • opts (optional, default {})

    Returns Object (opens new window)

    # addClass

    Add classes

    # Parameters

    # Examples

    model.addClass('class1');
+

    Returns this

    # getStyle

    Get the style of the component

    # Parameters

    • options any (optional, default {})
    • optsAdd any (optional, default {})

    Returns Object (opens new window)

    # setStyle

    Set the style on the component

    # Parameters

    # Examples

    component.setStyle({ color: 'red' });
+

    Returns Object (opens new window)

    # getAttributes

    Return all component's attributes

    # Parameters

    Returns Object (opens new window)

    # addClass

    Add classes

    # Parameters

    # Examples

    model.addClass('class1');
 model.addClass('class1 class2');
 model.addClass(['class1', 'class2']);
 // -> [SelectorObject, ...]
@@ -113,7 +113,7 @@ component.ge
 // Return second child
 component.getChildAt(1);

    Returns (Component | null)

    # getLastChild

    If exists, returns the last child component.

    # Examples

    const lastChild = component.getLastChild();
-

    Returns (Component | null)

    # empty

    Remove all inner components

    • @return {this}

    # Parameters

    • opts (optional, default {})

    # parent

    Get the parent component, if exists

    # Parameters

    • opts (optional, default {})

    # Examples

    component.parent();
+

    Returns (Component | null)

    # empty

    Remove all inner components

    • @return {this}

    # Parameters

    • opts (optional, default {})

    # parent

    Get the parent component, if exists

    # Parameters

    • opts any (optional, default {})

    # Examples

    component.parent();
 // -> Component

    Returns (Component | null)

    # parents

    Return all parents of the component.

    Returns Array (opens new window)<Component>

    # getTraits

    Get traits.

    # Examples

    const traits = component.getTraits();
 console.log(traits);
@@ -138,7 +138,7 @@ component.ad
  name: 'disabled',
 });
 component.addTrait(['title', {...}, ...]);
-

    Returns Array (opens new window)<Trait> Array of added traits

    # getName

    Get the name of the component

    Returns String (opens new window)

    # getIcon

    Get the icon string

    Returns String (opens new window)

    # toHTML

    Return HTML string of the component

    # Parameters

    # Examples

    // Simple HTML return
+

    Returns Array (opens new window)<Trait> Array of added traits

    # getName

    Get the name of the component.

    # Parameters

    Returns String (opens new window)

    # getIcon

    Get the icon string

    Returns String (opens new window)

    # toHTML

    Return HTML string of the component

    # Parameters

    # Examples

    // Simple HTML return
 component.set({ tagName: 'span' });
 component.setAttributes({ title: 'Hello' });
 component.toHTML();
@@ -158,21 +158,21 @@ component.to
  },
 });
 // -> <span title="Custom attribute"></span>
-

    Returns String (opens new window) HTML string

    # getInnerHTML

    Get inner HTML of the component

    # Parameters

    Returns String (opens new window) HTML string

    # getChangedProps

    Return an object containing only changed props

    # Parameters

    • res

    # getId

    Return the component id

    Returns String (opens new window)

    # 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

    # Parameters

    • frame Frame Specific frame from which taking the element (optional, default undefined)

    Returns HTMLElement (opens new window)

    # getView

    Get the View of the component. -This works only if the component is already rendered

    # Parameters

    • frame Frame Get View of a specific frame

    Returns ComponentView

    # onAll

    Execute callback function on itself and all inner components

    # Parameters

    # Examples

    component.onAll(component => {
+

    Returns String (opens new window) HTML string

    # getInnerHTML

    Get inner HTML of the component

    # Parameters

    Returns String (opens new window) HTML string

    # getChangedProps

    Return an object containing only changed props

    # Parameters

    • res Partial<ComponentDefinition>

    Returns Partial<ComponentDefinition>

    # getId

    Return the component id

    Returns String (opens new window)

    # 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

    # Parameters

    • frame Frame Specific frame from which taking the element (optional, default undefined)

    Returns HTMLElement (opens new window)

    # getView

    Get the View of the component. +This works only if the component is already rendered

    # Parameters

    • frame Frame Get View of a specific frame

    Returns ComponentView

    # onAll

    Execute callback function on itself and all inner components

    # Parameters

    # Examples

    component.onAll(component => {
  // do something with component
 })
-

    Returns this

    # remove

    Remove the component

    # Parameters

    • opts (optional, default {})

    Returns this

    # move

    Move the component to another destination component

    # Parameters

    • component Component Destination component (so the current one will be appended as a child)
    • opts Object (opens new window) Options for the append action (optional, default {})

    # Examples

    // Move the selected component on top of the wrapper
+

    Returns this

    # remove

    Remove the component

    # Parameters

    • opts any (optional, default {})

    Returns this

    # move

    Move the component to another destination component

    # Parameters

    • component Component Destination component (so the current one will be appended as a child)
    • opts Object (opens new window) Options for the append action (optional, default {})

    # Examples

    // Move the selected component on top of the wrapper
 const dest = editor.getWrapper();
 editor.getSelected().move(dest, { at: 0 });
-

    Returns this

    # isInstanceOf

    Check if the component is an instance of some component type.

    # Parameters

    # Examples

    // Add a new component type by extending an existing one
+

    Returns this

    # isInstanceOf

    Check if the component is an instance of some component type.

    # Parameters

    # Examples

    // Add a new component type by extending an existing one
 editor.Components.addType('text-ext', { extend: 'text' });
 // Append a new component somewhere
 const newTextExt = editor.getSelected().append({ type: 'text-ext' })[0];
 newTextExt.isInstanceOf('text-ext'); // true
 newTextExt.isInstanceOf('text'); // true
-

    Returns Boolean (opens new window)

    # isChildOf

    Check if the component is a child of some other component (or component type)

    # Parameters

    Returns Boolean (opens new window)

    # isChildOf

    Check if the component is a child of some other component (or component type)

    # Parameters

    # Examples

    const newTextComponent = editor.getSelected().append({
  type: 'text',
  components: 'My text <b>here</b>',
@@ -180,7 +180,7 @@ the check will be performed on the component type. 
    const innerComponent = newTextComponent.find('b')[0];
 innerComponent.isChildOf(newTextComponent); // true
 innerComponent.isChildOf('text'); // true
-

    Returns Boolean (opens new window)

    +

    Returns Boolean (opens new window)

    ←

    GrapesJS

    # Components

    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 (opens new window)

    const editor = grapesjs.init({
+     (opens new window) 
       
     
    # Components
     
    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 (opens new window)
     
    const editor = grapesjs.init({
  domComponents: {
    // options
  }
@@ -85,7 +85,7 @@ as 'cmp.getComponents().add(...)'
     
    });
 
    Returns (Component | Array (opens new window)<Component>) Component/s added
     
    # clear
     
    Remove all components
     
    # Parameters
     
    • opts   (optional, default {})
     
    Returns this
     
    # addType
     
    Add new component type.
 Read more about this in Define New Component (opens new window)
     
    # Parameters
      
    Returns this
     
    # getType
     
    Get component type.
-Read more about this in Define New Component (opens new window)
     
    # Parameters
      
    Returns Object (opens new window) Component type definition, eg. { model: ..., view: ... }
     
    # removeType
     
    Remove component type
     
    # Parameters
      
    Returns (Object (opens new window) | undefined (opens new window)) Removed component type, undefined otherwise
     
    # getTypes
     
    Return the array of all types
     
    Returns Array (opens new window)
      
    
+Read more about this in Define New Component (opens new window)
     
    # Parameters
      
    Returns Object (opens new window) Component type definition, eg. { model: ..., view: ... }
     
    # removeType
     
    Remove component type
     
    # Parameters
      
    Returns (Object (opens new window) | undefined (opens new window)) Removed component type, undefined otherwise
     
    # getTypes
     
    Return the array of all types
     
    Returns Array (opens new window)
      
    
       ←
    - + diff --git a/docs/api/css_composer.html b/docs/api/css_composer.html index 48a40bb06..ea07cbbcf 100644 --- a/docs/api/css_composer.html +++ b/docs/api/css_composer.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS

    # Css

    This module manages CSS rules in the canvas. -You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

    const editor = grapesjs.init({
+You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
     
    const editor = grapesjs.init({
  cssComposer: {
    // options
  }
@@ -44,7 +44,7 @@ You can customize the initial state of the module from the editor initialization
 
     
    # addRules
     
    Add CssRules via CSS string.
     
    # Parameters
      
    # Examples
     
    const addedRules = css.addRules('.my-cls{ color: red } @media (max-width: 992px) { .my-cls{ color: darkred } }');
 // Check rules
 console.log(addedRules.map(rule => rule.toCSS()));
-
    Returns Array (opens new window)<CssRule> Array of rules
     
    # setRule
     
    Add/update the CssRule.
     
    # Parameters
      
    # Examples
     
    // Simple class-based rule
+
    Returns Array (opens new window)<CssRule> Array of rules
     
    # setRule
     
    Add/update the CssRule.
     
    # Parameters
      
    # Examples
     
    // Simple class-based rule
 const rule = css.setRule('.class1.class2', { color: 'red' });
 console.log(rule.toCSS()) // output: .class1.class2 { color: red }
 // With state and other mixed selector
@@ -73,7 +73,7 @@ console.log<
 css.remove(toRemove);
 // Remove by selector
 css.remove('.my-cls-2');
-
    Returns Array (opens new window)<CssRule> Removed rules
     
    # clear
     
    Remove all rules
     
    # Parameters
     
    • opts   (optional, default {})
     
    Returns this

    +

    Returns Array (opens new window)<CssRule> Removed rules

    # clear

    Remove all rules

    # Parameters

    • opts (optional, default {})

    Returns this

    ←

    - + diff --git a/docs/api/device.html b/docs/api/device.html index b6e0f87d4..11d6f45db 100644 --- a/docs/api/device.html +++ b/docs/api/device.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS
    - + diff --git a/docs/api/device_manager.html b/docs/api/device_manager.html index 1655b7734..a74e54506 100644 --- a/docs/api/device_manager.html +++ b/docs/api/device_manager.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS

    # Devices

    You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

    const editor = grapesjs.init({
+     (opens new window) 
       
     
    # Devices
     
    You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
     
    const editor = grapesjs.init({
  deviceManager: {
    // options
  }
@@ -68,7 +68,7 @@ console.log<
 const device = deviceManager.get('some-id');
 deviceManager.select(device);
 
    # getSelected
     
    Get the selected device
     
    # Examples
     
    const selected = deviceManager.getSelected();
-
    Returns Device
      
    
+

    Returns Device

    ←

    GrapesJS

    # Editor

    Editor contains the top level API which you'll probably use to customize the editor or extend it with plugins. -You get the Editor instance on init method and you can pass options via its Configuration Object (opens new window)

    const editor = grapesjs.init({
+You get the Editor instance on init method and you can pass options via its Configuration Object (opens new window)
     
    const editor = grapesjs.init({
    // options
 });
 
    # Available Events
     
    You can make use of available events in this way
     
    editor.on('EVENT-NAME', (some, argument) => {
@@ -57,7 +57,7 @@ editor.addCo
   classes:['cls'],
   content: 'New component'
 });
-
    Returns Array (opens new window)<Component>
     
    # getStyle
     
    Returns style in JSON format object
     
    Returns Object (opens new window)
     
    # setStyle
     
    Set style inside editor's canvas. This method overrides actual style
     
    # Parameters
      
    # Examples
     
    editor.setStyle('.cls{color: red}');
+
    Returns Array (opens new window)<Component>
     
    # getStyle
     
    Returns style in JSON format object
     
    Returns Object (opens new window)
     
    # setStyle
     
    Set style inside editor's canvas. This method overrides actual style
     
    # Parameters
      
    # Examples
     
    editor.setStyle('.cls{color: red}');
 //or
 editor.setStyle({
   selectors: ['cls'],
@@ -96,7 +96,7 @@ This will reset the counter of changes (editor.getDirtyCount()).
     
    Returns HTMLElement (opens new window)
     
    # getDirtyCount
     
    Return the count of changes made to the content and not yet stored.
 This count resets at any store()
     
    Returns number (opens new window)
     
    # clearDirtyCount
     
    Reset the counter of changes.
     
    # refresh
     
    Update editor dimension offsets
     
    This method could be useful when you update, for example, some position
 of the editor element (eg. canvas, panels, etc.) with CSS, where without
-refresh you'll get misleading position of tools
     
    # Parameters
      
    # setCustomRte
     
    Replace the built-in Rich Text Editor with a custom one.
     
    # Parameters
      
    # Examples
     
    editor.setCustomRte({
+refresh you'll get misleading position of tools
     
    # Parameters
      
    # setCustomRte
     
    Replace the built-in Rich Text Editor with a custom one.
     
    # Parameters
      
    # Examples
     
    editor.setCustomRte({
   // Function for enabling custom RTE
   // el is the HTMLElement of the double clicked Text Component
   // rte is the same instance you have returned the first time you call
@@ -134,7 +134,7 @@ custom parser, pass null as the argument
     
    return result;
 });
 
    Returns this
     
    # setDragMode
     
    Change the global drag mode of components.
-To get more about this feature read: https://github.com/artf/grapesjs/issues/1936 (opens new window)
     
    # Parameters
      
    Returns this
     
    # log
     
    Trigger event log message
     
    # Parameters
      
    # Examples
     
    editor.log('Something done!', { ns: 'from-plugin-x', level: 'info' });
+To get more about this feature read: https://github.com/GrapesJS/grapesjs/issues/1936 (opens new window)
     
    # Parameters
      
    Returns this
     
    # log
     
    Trigger event log message
     
    # Parameters
      
    # Examples
     
    editor.log('Something done!', { ns: 'from-plugin-x', level: 'info' });
 // This will trigger following events
 // `log`, `log:info`, `log-from-plugin-x`, `log-from-plugin-x:info`
 // Callbacks of those events will always receive the message and
@@ -145,7 +145,7 @@ To get more about this feature read: .t('msg2', { params: { test: 'hello' } });
 // custom local
 editor.t('msg2', { params: { test: 'hello' } l: 'it' });
-
    Returns String (opens new window)
     
    # on
     
    Attach event
     
    # Parameters
      
    Returns this
     
    # once
     
    Attach event and detach it after the first run
     
    # Parameters
      
    Returns this
     
    # off
     
    Detach event
     
    # Parameters
      
    Returns this
     
    # trigger
     
    Trigger event
     
    # Parameters
      
    Returns this
     
    # destroy
     
    Destroy the editor
     
    # render
     
    Render editor
     
    Returns HTMLElement (opens new window)
     
    # onReady
     
    Trigger a callback once the editor is loaded and rendered.
+
    Returns String (opens new window)
     
    # on
     
    Attach event
     
    # Parameters
      
    Returns this
     
    # once
     
    Attach event and detach it after the first run
     
    # Parameters
      
    Returns this
     
    # off
     
    Detach event
     
    # Parameters
      
    Returns this
     
    # trigger
     
    Trigger event
     
    # Parameters
      
    Returns this
     
    # destroy
     
    Destroy the editor
     
    # render
     
    Render editor
     
    Returns HTMLElement (opens new window)
     
    # onReady
     
    Trigger a callback once the editor is loaded and rendered.
 The callback will be executed immediately if the method is called on the already rendered editor.
     
    # Parameters
      
    # Examples
     
    editor.onReady(() => {
   // perform actions
 });
@@ -153,7 +153,7 @@ The callback will be executed immediately if the method is called on the already
 const safeStr = '<b>Hello</b>';
 // Use `$${var}` to avoid escaping
 const strHtml = editor.html`Escaped ${unsafeStr} unescaped $${safeStr}`;
-
    Returns String (opens new window)
      
    
+
    Returns String (opens new window)

    ← →

    - + diff --git a/docs/api/frame.html b/docs/api/frame.html index fc3eae24e..137cb2071 100644 --- a/docs/api/frame.html +++ b/docs/api/frame.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS
    - + diff --git a/docs/api/i18n.html b/docs/api/i18n.html index ae16c780b..4f4d1b5f3 100644 --- a/docs/api/i18n.html +++ b/docs/api/i18n.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS

    # I18n

    You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

    const editor = grapesjs.init({
+     (opens new window) 
       
     
    # I18n
     
    You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
     
    const editor = grapesjs.init({
  i18n: {
    locale: 'en',
    localeFallback: 'en',
@@ -45,7 +45,7 @@
  }
 })
 
    Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
     
    const i18n = editor.I18n;
-
    # Events
     
    • i18n:add - New set of messages is added
      •  
    • i18n:update - The set of messages is updated
      •  
    • i18n:locale - Locale changed
     
    # getConfig
     
    Get module configurations
     
    Returns Object (opens new window) Configuration object
     
    # setLocale
     
    Update current locale
     
    # Parameters
      
    # Examples
     
    i18n.setLocale('it');
+
    # Events
     
    • i18n:add - New set of messages is added
      •  
    • i18n:update - The set of messages is updated
      •  
    • i18n:locale - Locale changed
     
    # setLocale
     
    Update current locale
     
    # Parameters
      
    # Examples
     
    i18n.setLocale('it');
 
    Returns this
     
    # getLocale
     
    Get current locale
     
    Returns String (opens new window) Current locale value
     
    # getMessages
     
    Get all messages
     
    # Parameters
      
    # Examples
     
    i18n.getMessages();
 // -> { en: { hello: '...' }, ... }
 i18n.getMessages('en');
@@ -72,7 +72,7 @@ obj.t
 // -> outputs `Msg hello`
 obj.t('msg2', { l: 'it', params: { test: 'hello' } });  // custom local
 // -> outputs `Msg hello it`
-
    Returns String (opens new window)
      
    
+

    Returns String (opens new window)

    # getConfig

    Get configuration object

    Returns Object (opens new window)

    ← →

    - + diff --git a/docs/api/index.html b/docs/api/index.html index 359b0916a..7f7dd5515 100644 --- a/docs/api/index.html +++ b/docs/api/index.html @@ -4,14 +4,14 @@ API Reference | GrapesJS - + - - - + + +
    GrapesJS
    - + diff --git a/docs/api/keymaps.html b/docs/api/keymaps.html index 71233ec09..9bdd58dd3 100644 --- a/docs/api/keymaps.html +++ b/docs/api/keymaps.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS

    +

    Returns Object (opens new window) Removed keymap

    # removeAll

    Remove all binded keymaps

    Returns this

    ←

    - + diff --git a/docs/api/layer.html b/docs/api/layer.html index 59c7eff78..e158d26d6 100644 --- a/docs/api/layer.html +++ b/docs/api/layer.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS
    - + diff --git a/docs/api/layer_manager.html b/docs/api/layer_manager.html index d9eba7186..83a95369b 100644 --- a/docs/api/layer_manager.html +++ b/docs/api/layer_manager.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS
    - + diff --git a/docs/api/modal_dialog.html b/docs/api/modal_dialog.html index 5d37e0cd9..b10c4e9ba 100644 --- a/docs/api/modal_dialog.html +++ b/docs/api/modal_dialog.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS

    You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

    const editor = grapesjs.init({
+     (opens new window) 
       
     
     
    You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
     
    const editor = grapesjs.init({
  modal: {
    // options
  }
@@ -69,7 +69,7 @@ modal.setCon
 el.innerText =  'New content';
 modal.setContent(el);
 
    Returns this
     
    # getContent
     
    Get the content of the modal window
     
    # Examples
     
    modal.getContent();
-
    Returns (string (opens new window) | HTMLElement (opens new window))
      
    
+

    Returns (string (opens new window) | HTMLElement (opens new window))

    ← →

    - + diff --git a/docs/api/page.html b/docs/api/page.html index ef0f32a43..caea1d1fe 100644 --- a/docs/api/page.html +++ b/docs/api/page.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS
    - + diff --git a/docs/api/pages.html b/docs/api/pages.html index 95c41336f..80c363724 100644 --- a/docs/api/pages.html +++ b/docs/api/pages.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS
    - + diff --git a/docs/api/panels.html b/docs/api/panels.html index 230cf1a12..b6abdf306 100644 --- a/docs/api/panels.html +++ b/docs/api/panels.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS

    # Panels

    You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

    const editor = grapesjs.init({
+     (opens new window) 
       
     
    # Panels
     
    You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
     
    const editor = grapesjs.init({
  panels: {
    // options
  }
@@ -86,7 +86,7 @@
 
 const removedButton = panelManager.removeButton('myNewPanel', 'myNewButton');
 
    Returns (Button | null) Removed button.
     
    # getButton
     
    Get button from the panel
     
    # Parameters
      
    # Examples
     
    var button = panelManager.getButton('myPanel','myButton');
-
    Returns (Button | null)
      
    
+

    Returns (Button | null)

    ← →

    - + diff --git a/docs/api/parser.html b/docs/api/parser.html index 0ab46c2c5..aa07b0d0e 100644 --- a/docs/api/parser.html +++ b/docs/api/parser.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS

    # Parser

    You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

    const editor = grapesjs.init({
+     (opens new window) 
       
     
    # Parser
     
    You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
     
    const editor = grapesjs.init({
  parser: {
    // options
  }
 })
 
    Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
     
    const { Parser } = editor;
-
    # Available Events
     
    • parse:html - On HTML parse, an object containing the input and the output of the parser is passed as an argument
      •  
    • parse:css - On CSS parse, an object containing the input and the output of the parser is passed as an argument
     
    # Methods
      
    # getConfig
     
    Get the configuration object
     
    # Examples
     
    console.log(Parser.getConfig())
-
    Returns Object (opens new window) Configuration object
     
    # parseHtml
     
    Parse HTML string and return the object containing the Component Definition
     
    # Parameters
      
    # Examples
     
    const resHtml = Parser.parseHtml(`<table><div>Hi</div></table>`, {
+
    # Available Events
     
    • parse:html - On HTML parse, an object containing the input and the output of the parser is passed as an argument
      •  
    • parse:css - On CSS parse, an object containing the input and the output of the parser is passed as an argument
     
    # Methods
      
    # getConfig
     
    Get configuration object
     
    Returns Object (opens new window)
     
    # parseHtml
     
    Parse HTML string and return the object containing the Component Definition
     
    # Parameters
      
    # Examples
     
    const resHtml = Parser.parseHtml(`<table><div>Hi</div></table>`, {
   htmlType: 'text/html', // default
 });
 // By using the `text/html`, this will fix automatically all the HTML syntax issues
@@ -50,13 +49,13 @@
   htmlType: 'application/xml',
 });
 // This will preserve the original format as, from the XML point of view, is a valid format
-
    Returns Object (opens new window) Object containing the result { html: ..., css: ... }
     
    # parseCss
     
    Parse CSS string and return an array of valid definition objects for CSSRules
     
    # Parameters
      
    # Examples
     
    const res = Parser.parseCss('.cls { color: red }');
+
    Returns Object (opens new window) Object containing the result { html: ..., css: ... }
     
    # parseCss
     
    Parse CSS string and return an array of valid definition objects for CSSRules
     
    # Parameters
      
    # Examples
     
    const res = Parser.parseCss('.cls { color: red }');
 // [{ ... }]
-
    Returns Array (opens new window)<Object (opens new window)> Array containing the result
      
    
+

    Returns Array (opens new window)<Object (opens new window)> Array containing the result

    ←

    - + diff --git a/docs/api/property.html b/docs/api/property.html index f6655726a..a836ed353 100644 --- a/docs/api/property.html +++ b/docs/api/property.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS
    - + diff --git a/docs/api/property_composite.html b/docs/api/property_composite.html index e1dac29ba..93d83408b 100644 --- a/docs/api/property_composite.html +++ b/docs/api/property_composite.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS
    - + diff --git a/docs/api/property_number.html b/docs/api/property_number.html index ce6379e90..0fde40f2a 100644 --- a/docs/api/property_number.html +++ b/docs/api/property_number.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS
    - + diff --git a/docs/api/property_select.html b/docs/api/property_select.html index efec9f885..67439db75 100644 --- a/docs/api/property_select.html +++ b/docs/api/property_select.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS
    - + diff --git a/docs/api/property_stack.html b/docs/api/property_stack.html index 19c9396dc..e66c170fe 100644 --- a/docs/api/property_stack.html +++ b/docs/api/property_stack.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS

    Returns (Layer | null)

    # getSelectedLayer

    Get selected layer.

    Returns (Layer | undefined (opens new window))

    # selectLayer

    Select layer. Without a selected layer any update made on inner properties has no effect.

    # Parameters

    • layer Layer Layer to select

    # Examples

    const layer = property.getLayer(0);
 property.selectLayer(layer);

    # selectLayerAt

    Select layer by index.

    # Parameters

    # Examples

    property.selectLayerAt(1);
@@ -57,7 +57,7 @@ property.rem

    Returns (Layer | null) Removed layer

    # getLayerLabel

    Get the layer label. The label can be customized with the layerLabel property.

    # Parameters

    # Examples

    const layer = this.getLayer(1);
 const label = this.getLayerLabel(layer);

    Returns String (opens new window)

    # getStyleFromLayer

    Get style object from the layer.

    # Parameters

    Returns Object (opens new window) Style object

    # getStylePreview

    Get preview style object from the layer. -If the property has preview: false the returned object will be empty.

    # Parameters

    Returns Object (opens new window) Style object

    # getLayerSeparator

    Get layer separator.

    Returns RegExp (opens new window)

    +If the property has preview: false the returned object will be empty.

    # Parameters

    Returns Object (opens new window) Style object

    # getLayerSeparator

    Get layer separator.

    Returns RegExp (opens new window)

    ← →

    - + diff --git a/docs/api/rich_text_editor.html b/docs/api/rich_text_editor.html index 11a98730b..e05baa63b 100644 --- a/docs/api/rich_text_editor.html +++ b/docs/api/rich_text_editor.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS

    # RichTextEditor

    This module allows to customize the built-in toolbar of the Rich Text Editor and use commands from the HTML Editing APIs (opens new window). -It's highly recommended to keep this toolbar as small as possible, especially from styling commands (eg. 'fontSize') and leave this task to the Style Manager

    You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

    const editor = grapesjs.init({
+     (opens new window) 
       
     
    # RichTextEditor
     
    This module allows to customize the built-in toolbar of the Rich Text Editor and use commands from the HTML Editing APIs (opens new window).
+It's highly recommended to keep this toolbar as small as possible, especially from styling commands (eg. 'fontSize') and leave this task to the Style Manager
     
    You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
     
    const editor = grapesjs.init({
  richTextEditor: {
    // options
  }
@@ -46,7 +46,7 @@ editor.on// Use the API
 const rte = editor.RichTextEditor;
 rte.add(...);
-
    # Available Events
     
    • rte:enable - RTE enabled. The view, on which RTE is enabled, is passed as an argument
      •  
    • rte:disable - RTE disabled. The view, on which RTE is disabled, is passed as an argument
     
    # Methods
      
    # add
     
    Add a new action to the built-in RTE toolbar
     
    # Parameters
      
    # Examples
     
    rte.add('bold', {
+
    # Available Events
     
    • rte:enable - RTE enabled. The view, on which RTE is enabled, is passed as an argument
      •  
    • rte:disable - RTE disabled. The view, on which RTE is disabled, is passed as an argument
     
    # Methods
      
    # getConfig
     
    Get configuration object
     
    Returns Object (opens new window)
     
    # add
     
    Add a new action to the built-in RTE toolbar
     
    # Parameters
      
    # Examples
     
    rte.add('bold', {
   icon: '<b>B</b>',
   attributes: {title: 'Bold'},
   result: rte => rte.exec('bold')
@@ -105,7 +105,7 @@ rte.add// {name: 'bold', ...}
 
    Returns Object (opens new window)
     
    # getAll
     
    Get all actions
     
    Returns Array (opens new window)
     
    # remove
     
    Remove the action from the toolbar
     
    # Parameters
      
    # Examples
     
    const action = rte.remove('bold');
 // {name: 'bold', ...}
-
    Returns Object (opens new window) Removed action
     
    # getToolbarEl
     
    Get the toolbar element
     
    Returns HTMLElement (opens new window)
      
    
+

    Returns Object (opens new window) Removed action

    # getToolbarEl

    Get the toolbar element

    Returns HTMLElement (opens new window)

    ←

    GrapesJS
    - + diff --git a/docs/api/selector.html b/docs/api/selector.html index 773286dc9..1d988bcfb 100644 --- a/docs/api/selector.html +++ b/docs/api/selector.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS

    # Selector

    # Properties

    # toString

    Get selector as a string.

    # Examples

    // Given such selector: { name: 'my-selector', type: 2 }
+     (opens new window) 
       
     
    # Selector
     
    # Properties
      
    # toString
     
    Get selector as a string.
     
    # Examples
     
    // Given such selector: { name: 'my-selector', type: 2 }
 console.log(selector.toString());
 // -> `#my-selector`
 
    Returns String (opens new window)
     
    # getLabel
     
    Get selector label.
     
    # Examples
     
    // Given such selector: { name: 'my-selector', label: 'My selector' }
@@ -44,7 +44,7 @@ console.log<
 selector.setLabel('New Label')
 console.log(selector.getLabel());
 // -> `New Label`
-
    # getActive
     
    Get selector active state.
     
    Returns Boolean (opens new window)
     
    # setActive
     
    Update selector active state.
     
    # Parameters
     
      
    
+

    # getActive

    Get selector active state.

    Returns Boolean (opens new window)

    # setActive

    Update selector active state.

    # Parameters

    ← →

    - + diff --git a/docs/api/selector_manager.html b/docs/api/selector_manager.html index 7b77815bd..8326c3d3b 100644 --- a/docs/api/selector_manager.html +++ b/docs/api/selector_manager.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS

    # Selectors

    Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To illustrate this concept let's take + (opens new window)

    # Selectors

    Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To illustrate this concept let's take a look at this code:

    span > #send-btn.btn{
  ...
 }
 
    <span>
   <button id="send-btn" class="btn"></button>
 </span>
-

    In this scenario we get:

    • span -> selector of type tag
    • send-btn -> selector of type id
    • btn -> selector of type class

    So, for example, being btn the same class entity it'll be easier to refactor and track things.

    You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

    const editor = grapesjs.init({
+

    In this scenario we get:

    • span -> selector of type tag
    • send-btn -> selector of type id
    • btn -> selector of type class

    So, for example, being btn the same class entity it'll be easier to refactor and track things.

    You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

    const editor = grapesjs.init({
  selectorManager: {
    // options
  }
@@ -52,7 +52,7 @@ editor.on// Use the API
 const sm = editor.Selectors;
 sm.add(...);
-

    # Available Events

    • selector:add - Selector added. The Selector is passed as an argument to the callback.
    • selector:remove - Selector removed. The Selector is passed as an argument to the callback.
    • selector:update - Selector updated. The Selector and the object containing changes are passed as arguments to the callback.
    • selector:state - States changed. An object containing all the available data about the triggered event is passed as an argument to the callback.
    • selector - Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback.

    # Methods

    # getConfig

    Get configuration object

    Returns Object (opens new window)

    # add

    Add a new selector to the collection if it does not already exist. +

    # Available Events

    • selector:add - Selector added. The Selector is passed as an argument to the callback.
    • selector:remove - Selector removed. The Selector is passed as an argument to the callback.
    • selector:update - Selector updated. The Selector and the object containing changes are passed as arguments to the callback.
    • selector:state - States changed. An object containing all the available data about the triggered event is passed as an argument to the callback.
    • selector - Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback.

    # Methods

    # getConfig

    Get configuration object

    Returns Object (opens new window)

    # add

    Add a new selector to the collection if it does not already exist. You can pass selectors properties or string identifiers.

    # Parameters

    # Examples

    const selector = selectorManager.add({ name: 'my-class', label: 'My class' });
 console.log(selector.toString()) // `.my-class`
 // Same as
@@ -61,25 +61,28 @@ console.log<

    Returns Selector

    # get

    Get the selector by its name/type

    # Parameters

    # Examples

    const selector = selectorManager.get('.my-class');
 // Get Id
 const selectorId = selectorManager.get('#my-id');
-

    Returns (Selector | null)

    # remove

    Remove Selector.

    # Parameters

    # Examples

    const removed = selectorManager.remove('.myclass');
+

    Returns (Selector | null)

    # remove

    Remove Selector.

    # Parameters

    # Examples

    const removed = selectorManager.remove('.myclass');
 // or by passing the Selector
 selectorManager.remove(selectorManager.get('.myclass'));
-

    Returns Selector Removed Selector

    # setState

    Change the selector state

    # Parameters

    # Examples

    selectorManager.setState('hover');
-

    Returns this

    # getState

    Get the current selector state value

    Returns String (opens new window)

    # getStates

    Get states

    Returns Array (opens new window)<State>

    # setStates

    Set a new collection of states

    # Parameters

    # Examples

    const states = selectorManager.setStates([
+

    Returns Selector Removed Selector

    # rename

    Rename Selector.

    # Parameters

    # Examples

    const selector = selectorManager.get('myclass');
+const result = selectorManager.rename(selector, 'myclass2');
+console.log(result === selector ? 'Selector updated' : 'Selector with this name exists already');
+

    Returns Selector Selector containing the passed name.

    # setState

    Change the selector state

    # Parameters

    # Examples

    selectorManager.setState('hover');
+

    Returns this

    # getState

    Get the current selector state value

    Returns String (opens new window)

    # getStates

    Get states

    Returns Array (opens new window)<State>

    # setStates

    Set a new collection of states

    # Parameters

    # Examples

    const states = selectorManager.setStates([
   { name: 'hover', label: 'Hover' },
   { name: 'nth-of-type(2n)', label: 'Even/Odd' }
 ]);
-

    Returns Array (opens new window)<State>

    # getSelected

    Get commonly selected selectors, based on all selected components.

    # Examples

    const selected = selectorManager.getSelected();
+

    Returns Array (opens new window)<State>

    # getSelected

    Get commonly selected selectors, based on all selected components.

    # Examples

    const selected = selectorManager.getSelected();
 console.log(selected.map(s => s.toString()))
-

    Returns Array (opens new window)<Selector>

    # getSelectedAll

    Get selected selectors.

    # Examples

    const selected = selectorManager.getSelectedAll();
+

    Returns Array (opens new window)<Selector>

    # getSelectedAll

    Get selected selectors.

    # Examples

    const selected = selectorManager.getSelectedAll();
 console.log(selected.map(s => s.toString()))
-

    Returns Array (opens new window)<Selector>

    # addSelected

    Add new selector to all selected components.

    # Parameters

    # Examples

    selectorManager.addSelected('.new-class');
-

    # removeSelected

    Remove a common selector from all selected components.

    # Parameters

    # Examples

    selectorManager.removeSelected('.myclass');
-

    # getSelectedTargets

    Get the array of currently selected targets.

    # Examples

    const targetsToStyle = selectorManager.getSelectedTargets();
+

    Returns Array (opens new window)<Selector>

    # addSelected

    Add new selector to all selected components.

    # Parameters

    # Examples

    selectorManager.addSelected('.new-class');
+

    # removeSelected

    Remove a common selector from all selected components.

    # Parameters

    # Examples

    selectorManager.removeSelected('.myclass');
+

    # getSelectedTargets

    Get the array of currently selected targets.

    # Examples

    const targetsToStyle = selectorManager.getSelectedTargets();
 console.log(targetsToStyle.map(target => target.getSelectorsString()))

    Returns Array (opens new window)<(Component | CssRule)>

    # setComponentFirst

    Update component-first option. If the component-first is enabled, all the style changes will be applied on selected components (ID rules) instead -of selectors (which would change styles on all components with those classes).

    # Parameters

    # getComponentFirst

    Get the value of component-first option.

    Returns Boolean (opens new window)

    # getAll

    Get all selectors

    Returns Collection<Selector>

    +of selectors (which would change styles on all components with those classes).

    # Parameters

    # getComponentFirst

    Get the value of component-first option.

    Returns Boolean (opens new window)

    # getAll

    Get all selectors

    Returns Collection<Selector>

    ←

    GrapesJS
    - + diff --git a/docs/api/storage_manager.html b/docs/api/storage_manager.html index c2ede03f9..1cb198453 100644 --- a/docs/api/storage_manager.html +++ b/docs/api/storage_manager.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS

    # Storage

    You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

    const editor = grapesjs.init({
+     (opens new window) 
       
     
    # Storage
     
    You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
     
    const editor = grapesjs.init({
  storageManager: {
    // options
  }
@@ -45,7 +45,7 @@ editor.on// Use the API
 const storageManager = editor.Storage;
 storageManager.add(...);
-
    # Available Events
     
    • storage:start - Before the storage request is started
      •  
    • storage:start:store - Before the store request. The object to store is passed as an argumnet (which you can edit)
      •  
    • storage:start:load - Before the load request. Items to load are passed as an argumnet (which you can edit)
      •  
    • storage:load - Triggered when something was loaded from the storage, loaded object passed as an argumnet
      •  
    • storage:store - Triggered when something is stored to the storage, stored object passed as an argumnet
      •  
    • storage:end - After the storage request is ended
      •  
    • storage:end:store - After the store request
      •  
    • storage:end:load - After the load request
      •  
    • storage:error - On any error on storage request, passes the error as an argument
      •  
    • storage:error:store - Error on store request, passes the error as an argument
      •  
    • storage:error:load - Error on load request, passes the error as an argument
     
    # Methods
      
    # getConfig
     
    Get configuration object
     
    Returns Object (opens new window)
     
    # isAutosave
     
    Check if autosave is enabled.
     
    Returns Boolean (opens new window)
     
    # setAutosave
     
    Set autosave value.
     
    # Parameters
      
    # getStepsBeforeSave
     
    Returns number of steps required before trigger autosave.
     
    Returns Number (opens new window)
     
    # setStepsBeforeSave
     
    Set steps required before trigger autosave.
     
    # Parameters
      
    # add
     
    Add new storage.
     
    # Parameters
      
    # Examples
     
    storageManager.add('local2', {
+
    # Available Events
     
    • storage:start - Before the storage request is started
      •  
    • storage:start:store - Before the store request. The object to store is passed as an argument (which you can edit)
      •  
    • storage:start:load - Before the load request. Items to load are passed as an argument (which you can edit)
      •  
    • storage:load - Triggered when something was loaded from the storage, loaded object passed as an argument
      •  
    • storage:store - Triggered when something is stored to the storage, stored object passed as an argument
      •  
    • storage:end - After the storage request is ended
      •  
    • storage:end:store - After the store request
      •  
    • storage:end:load - After the load request
      •  
    • storage:error - On any error on storage request, passes the error as an argument
      •  
    • storage:error:store - Error on store request, passes the error as an argument
      •  
    • storage:error:load - Error on load request, passes the error as an argument
     
    # Methods
      
    # getConfig
     
    Get configuration object
     
    Returns Object (opens new window)
     
    # isAutosave
     
    Check if autosave is enabled.
     
    Returns Boolean (opens new window)
     
    # setAutosave
     
    Set autosave value.
     
    # Parameters
      
    # getStepsBeforeSave
     
    Returns number of steps required before trigger autosave.
     
    Returns Number (opens new window)
     
    # setStepsBeforeSave
     
    Set steps required before trigger autosave.
     
    # Parameters
      
    # add
     
    Add new storage.
     
    # Parameters
      
    # Examples
     
    storageManager.add('local2', {
   async load(storageOptions) {
     // ...
   },
@@ -57,7 +57,7 @@ storageManager.await storageManager.store(data);
 
    Returns Object (opens new window) Stored data.
     
    # load
     
    Load resource from the current storage by keys
     
    # Parameters
      
    # Examples
     
    const data = await storageManager.load();
 editor.loadProjectData(data);
-
    Returns Object (opens new window) Loaded data.
      
    
+

    Returns Object (opens new window) Loaded data.

    ← →

    - + diff --git a/docs/api/style_manager.html b/docs/api/style_manager.html index c832241df..630c152c3 100644 --- a/docs/api/style_manager.html +++ b/docs/api/style_manager.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS

    # StyleManager

    With Style Manager you build categories (called sectors) of CSS properties which could be used to customize the style of components. -You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

    const editor = grapesjs.init({
+     (opens new window) 
       
     
    # StyleManager
     
    With Style Manager you build categories (called sectors) of CSS properties which could be used to customize the style of components.
+You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
     
    const editor = grapesjs.init({
  styleManager: {
    // options
  }
@@ -46,13 +46,13 @@ editor.on// Use the API
 const styleManager = editor.StyleManager;
 styleManager.addSector(...);
-
    # Available Events
     
    • style:sector:add - Sector added. The Sector is passed as an argument to the callback.
      •  
    • style:sector:remove - Sector removed. The Sector is passed as an argument to the callback.
      •  
    • style:sector:update - Sector updated. The Sector and the object containing changes are passed as arguments to the callback.
      •  
    • style:property:add - Property added. The Property is passed as an argument to the callback.
      •  
    • style:property:remove - Property removed. The Property is passed as an argument to the callback.
      •  
    • style:property:update - Property updated. The Property and the object containing changes are passed as arguments to the callback.
      •  
    • style:target - Target selection changed. The target (or null in case the target is deselected) is passed as an argument to the callback.
     
    # Methods
      
    # getConfig
     
    Get configuration object
     
    Returns Object (opens new window)
     
    # addSector
     
    Add new sector. If the sector with the same id already exists, that one will be returned.
     
    # Parameters
      
    # Examples
     
    const sector = styleManager.addSector('mySector',{
+
    # Available Events
     
    • style:sector:add - Sector added. The Sector is passed as an argument to the callback.
      •  
    • style:sector:remove - Sector removed. The Sector is passed as an argument to the callback.
      •  
    • style:sector:update - Sector updated. The Sector and the object containing changes are passed as arguments to the callback.
      •  
    • style:property:add - Property added. The Property is passed as an argument to the callback.
      •  
    • style:property:remove - Property removed. The Property is passed as an argument to the callback.
      •  
    • style:property:update - Property updated. The Property and the object containing changes are passed as arguments to the callback.
      •  
    • style:target - Target selection changed. The target (or null in case the target is deselected) is passed as an argument to the callback.
     
    # Methods
      
    # Sectors
     
    # getConfig
     
    Get configuration object
     
    Returns Object (opens new window)
     
    # addSector
     
    Add new sector. If the sector with the same id already exists, that one will be returned.
     
    # Parameters
      
    # Examples
     
    const sector = styleManager.addSector('mySector',{
   name: 'My sector',
   open: true,
   properties: [{ name: 'My property'}]
 }, { at: 0 });
 // With `at: 0` we place the new sector at the beginning of the list
-
    Returns Sector Added Sector
     
    # getSector
     
    Get sector by id.
     
    # Parameters
      
    # Examples
     
    const sector = styleManager.getSector('mySector');
+
    Returns Sector Added Sector
     
    # getSector
     
    Get sector by id.
     
    # Parameters
      
    # Examples
     
    const sector = styleManager.getSector('mySector');
 
    Returns (Sector | null)
     
    # getSectors
     
    Get all sectors.
     
    # Parameters
      
    # Examples
     
    const sectors = styleManager.getSectors();
 
    Returns Array (opens new window)<Sector>
     
    # removeSector
     
    Remove sector by id.
     
    # Parameters
      
    # Examples
     
    const removed = styleManager.removeSector('mySector');
 
    Returns Sector Removed sector
     
    # addProperty
     
    Add new property to the sector.
     
    # Parameters
      
    # Examples
     
    const property = styleManager.addProperty('mySector', {
@@ -66,10 +66,10 @@ styleManager.],
 }, { at: 0 });
 
    Returns (Property | null) Added property or null in case the sector doesn't exist.
     
    # getProperty
     
    Get the property.
     
    # Parameters
      
    # Examples
     
    const property = styleManager.getProperty('mySector', 'min-height');
-
    Returns (Property | null)
     
    # getProperties
     
    Get all properties of the sector.
     
    # Parameters
      
    # Examples
     
    const properties = styleManager.getProperties('mySector');
-
    Returns (Collection<Property> | null) Collection of properties
     
    # removeProperty
     
    Remove the property.
     
    # Parameters
      
    # Examples
     
    const property = styleManager.removeProperty('mySector', 'min-height');
+
    Returns (Property | undefined (opens new window))
     
    # getProperties
     
    Get all properties of the sector.
     
    # Parameters
      
    # Examples
     
    const properties = styleManager.getProperties('mySector');
+
    Returns (Collection<Property> | undefined (opens new window)) Collection of properties
     
    # removeProperty
     
    Remove the property.
     
    # Parameters
      
    # Examples
     
    const property = styleManager.removeProperty('mySector', 'min-height');
 
    Returns (Property | null) Removed property
     
    # select
     
    Select new target.
-The target could be a Component, CSSRule, or a CSS selector string.
     
    # Parameters
      
    # Examples
     
    // Select the first button in the current page
+The target could be a Component, CSSRule, or a CSS selector string.
     
    # Parameters
      
    # Examples
     
    // Select the first button in the current page
 const wrapperCmp = editor.Pages.getSelected().getMainComponent();
 const btnCmp = wrapperCmp.find('button')[0];
 btnCmp && styleManager.select(btnCmp);
@@ -107,7 +107,7 @@ If the property exists already, it will extend it.
     
    // Clean the memory from side effects if necessary (eg. global event listeners, etc.)
    destroy() {}
 })
-
    # getType
     
    Get type
     
    # Parameters
      
    Returns Object (opens new window) Type definition
     
    # getTypes
     
    Get all types
     
    Returns Array (opens new window)
      
    
+

    # getType

    Get type

    # Parameters

    Returns Object (opens new window) Type definition

    # getTypes

    Get all types

    Returns Array (opens new window)

    ←

    →

    - + diff --git a/docs/api/undo_manager.html b/docs/api/undo_manager.html index 0f39eb4a6..e3f098506 100644 --- a/docs/api/undo_manager.html +++ b/docs/api/undo_manager.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS

    # UndoManager

    This module allows to manage the stack of changes applied in canvas. Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance

    const um = editor.UndoManager;
-

    # getConfig

    Get module configurations

    # Examples

    const config = um.getConfig();
-// { ... }
-

    Returns Object (opens new window) Configuration object

    # add

    Add an entity (Model/Collection) to track -Note: New Components and CSSRules will be added automatically

    # Parameters

    • entity (Model | Collection) Entity to track

    # Examples

    um.add(someModelOrCollection);
-

    Returns this

    # remove

    Remove and stop tracking the entity (Model/Collection)

    # Parameters

    • entity (Model | Collection) Entity to remove

    # Examples

    um.remove(someModelOrCollection);
-

    Returns this

    # removeAll

    Remove all entities

    # Examples

    um.removeAll();
-

    Returns this

    # start

    Start/resume tracking changes

    # Examples

    um.start();
-

    Returns this

    # stop

    Stop tracking changes

    # Examples

    um.stop();
-

    Returns this

    # undo

    Undo last change

    # Parameters

    • all (optional, default true)

    # Examples

    um.undo();
-

    Returns this

    # undoAll

    Undo all changes

    # Examples

    um.undoAll();
-

    Returns this

    # redo

    Redo last change

    # Parameters

    • all (optional, default true)

    # Examples

    um.redo();
-

    Returns this

    # redoAll

    Redo all changes

    # Examples

    um.redoAll();
-

    Returns this

    # hasUndo

    Checks if exists an available undo

    # Examples

    um.hasUndo();
-

    Returns Boolean (opens new window)

    # hasRedo

    Checks if exists an available redo

    # Examples

    um.hasRedo();
+

    # getConfig

    Get configuration object

    Returns Object (opens new window)

    # add

    Add an entity (Model/Collection) to track +Note: New Components and CSSRules will be added automatically

    # Parameters

    • entity (Model | Collection) Entity to track

    # Examples

    um.add(someModelOrCollection);
+

    Returns this

    # remove

    Remove and stop tracking the entity (Model/Collection)

    # Parameters

    • entity (Model | Collection) Entity to remove

    # Examples

    um.remove(someModelOrCollection);
+

    Returns this

    # removeAll

    Remove all entities

    # Examples

    um.removeAll();
+

    Returns this

    # start

    Start/resume tracking changes

    # Examples

    um.start();
+

    Returns this

    # stop

    Stop tracking changes

    # Examples

    um.stop();
+

    Returns this

    # undo

    Undo last change

    # Parameters

    • all (optional, default true)

    # Examples

    um.undo();
+

    Returns this

    # undoAll

    Undo all changes

    # Examples

    um.undoAll();
+

    Returns this

    # redo

    Redo last change

    # Parameters

    • all (optional, default true)

    # Examples

    um.redo();
+

    Returns this

    # redoAll

    Redo all changes

    # Examples

    um.redoAll();
+

    Returns this

    # hasUndo

    Checks if exists an available undo

    # Examples

    um.hasUndo();
+

    Returns Boolean (opens new window)

    # hasRedo

    Checks if exists an available redo

    # Examples

    um.hasRedo();

    Returns Boolean (opens new window)

    # isRegistered

    Check if the entity (Model/Collection) to tracked -Note: New Components and CSSRules will be added automatically

    # Parameters

    • obj any
    • entity (Model | Collection) Entity to track

    Returns Boolean (opens new window)

    # getStack

    Get stack of changes

    # Examples

    const stack = um.getStack();
+Note: New Components and CSSRules will be added automatically
     
    # Parameters
     
    • obj any
      •  
    • entity (Model | Collection) Entity to track
     
    Returns Boolean (opens new window)
     
    # getStack
     
    Get stack of changes
     
    # Examples
     
    const stack = um.getStack();
 stack.each(item => ...);
-
    Returns Collection
     
    # clear
     
    Clear the stack
     
    # Examples
     
    um.clear();
-
    Returns this

    +

    Returns Collection

    # clear

    Clear the stack

    # Examples

    um.clear();
+

    Returns this

    ←

    GrapesJS

    # FAQ

    Coming soon

    - + diff --git a/docs/getting-started.html b/docs/getting-started.html index 08b6e8e8a..c86343667 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -4,15 +4,15 @@ Getting Started | GrapesJS - + - - - + + +
    GrapesJS

    +

    And here is our final result:

    Hello World Component!

    ← →

    - + diff --git a/docs/guides/Custom-CSS-parser.html b/docs/guides/Custom-CSS-parser.html index 01e5f8c5d..d785a8ac9 100644 --- a/docs/guides/Custom-CSS-parser.html +++ b/docs/guides/Custom-CSS-parser.html @@ -4,14 +4,14 @@ Use Custom CSS Parser | GrapesJS - + - - - + + +
    GrapesJS

    # Use Custom CSS Parser

    If you just use GrapesJS for building templates from scratch, so you start from an empty canvas and for editing you strictly rely on the generated JSON (final HTML/CSS only for end-users) then, probably, you might skip this guide. On the other hand, if you import templates from already defined HTML/CSS or let the user embed custom codes (eg. using the grapesjs-custom-code (opens new window) plugin), then you have to know that you might face strange behaviors.

    WARNING

    This guide requires GrapesJS v0.14.33 or higher

    # Import HTML/CSS

    Importing already defined HTML/CSS is a really good feature as it lets you start editing immediately any kind of template and obviously, GrapesJS itself promotes this kind of approach

    <div id="gjs">
+     (opens new window) 
       
     
    # Use Custom CSS Parser
     
    If you just use GrapesJS for building templates from scratch, so you start from an empty canvas and for editing you strictly rely  on the generated JSON (final HTML/CSS only for end-users) then, probably, you might skip this guide. On the other hand, if you import templates from already defined HTML/CSS or let the user embed custom codes (eg. using the grapesjs-custom-code (opens new window) plugin), then you have to know that you might face strange behaviors.
     
    WARNING
     
    This guide requires GrapesJS v0.14.33 or higher
     
     
    # Import HTML/CSS
     
    Importing already defined HTML/CSS is a really good feature as it lets you start editing immediately any kind of template and obviously, GrapesJS itself promotes this kind of approach
     
    <div id="gjs">
   <div class="txt-red">Hello world!</div>
   <style>.txt-red{color: red}</style>
 </div>
@@ -213,11 +213,11 @@ editor.setCu
     },
   },
 ]
-
    # Plugins
     
    Below the list of current available CSS parsers as plugins, if you need to create your own we highly suggest to explore their sources
     
      
    
+

    # Plugins

    Below the list of current available CSS parsers as plugins, if you need to create your own we highly suggest to explore their sources

    ←

    - + diff --git a/docs/guides/Replace-Rich-Text-Editor.html b/docs/guides/Replace-Rich-Text-Editor.html index a0e501e74..6309d682b 100644 --- a/docs/guides/Replace-Rich-Text-Editor.html +++ b/docs/guides/Replace-Rich-Text-Editor.html @@ -4,14 +4,14 @@ Replace the built-in Rich Text Editor | GrapesJS - + - - - + + +
    GrapesJS

    +Obviously, each third-party library has its own APIs and can present some limitations and drawbacks, so, a minimal knowledge of the library is a plus.

    # Plugins

    For the CKEditor, you can find a complete plugin here grapesjs-plugin-ckeditor (opens new window).

    ← →

    - + diff --git a/docs/index.html b/docs/index.html index 4fbacafe7..fa96e261b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -4,14 +4,14 @@ Introduction | GrapesJS - + - - - + + +
    GrapesJS

    # Introduction

    # What is GrapesJS?

    At first glance one might think this is just another page/HTML builder, but it's something more. GrapesJS is a multi-purpose, Web Builder Framework, which means it allows you to easily create a drag & drop enabled builder of "things". By "things" we mean anything with HTML-like structure, which entails much more than web pages. We use HTML-like structure basically everywhere: Newsletters (eg. MJML (opens new window)), Native Mobile Applications (eg. React Native (opens new window)), Native Desktop Applications (eg. Vuido (opens new window)), PDFs (eg. React PDF (opens new window)), etc. So, for everything you can imagine as a set of elements like <tag some="attribute">... other nested elements ...</tag> you can create easily a GrapesJS builder around it and then use it independently in your applications. -GrapesJS ships with features and tools that enable you to craft easy to use builders. Which allows your users to create complex HTML-like templates without any knowledge of coding.

    # Why GrapesJS?

    GrapesJS was designed primarily for use inside Content Management Systems to speed up the creation of dynamic templates and replace common WYSIWYG editors, which are good for content editing, but inappropriate for creating HTML structures. Instead of creating an application we decided to create an extensible framework that could be used by anyone for any purpose.

    # Quick Start

    To showcase the power of GrapesJS we have created some presets.

    You can actually use them as a starting point for your editors, so, just follow the instructions on their repositories to get a quick start for your builder.

    # Download

    Latest version: npm (opens new window)

    You can download GrapesJS from one of these sources

    • CDNs +GrapesJS ships with features and tools that enable you to craft easy to use builders. Which allows your users to create complex HTML-like templates without any knowledge of coding.

      # Why GrapesJS?

      GrapesJS was designed primarily for use inside Content Management Systems to speed up the creation of dynamic templates and replace common WYSIWYG editors, which are good for content editing, but inappropriate for creating HTML structures. Instead of creating an application we decided to create an extensible framework that could be used by anyone for any purpose.

      # Quick Start

      To showcase the power of GrapesJS we have created some presets.

      You can actually use them as a starting point for your editors, so, just follow the instructions on their repositories to get a quick start for your builder.

      # Download

      Latest version: npm (opens new window)

      You can download GrapesJS from one of these sources

      • CDNs
        • unpkg
          • https://unpkg.com/grapesjs
          • https://unpkg.com/grapesjs/dist/css/grapes.min.css
        • cdnjs
          • https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/grapes.min.js
          • https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/css/grapes.min.css
      • npm
        • npm i grapesjs
      • git -
        • git clone https://github.com/artf/grapesjs.git

      # Changelog

      To track changes made in the library we rely on Github Releases (opens new window)

    +

    # Changelog

    To track changes made in the library we rely on Github Releases (opens new window)

    Getting Started →

    - + diff --git a/docs/modules/Assets.html b/docs/modules/Assets.html index 847dcd139..5ea3f6900 100644 --- a/docs/modules/Assets.html +++ b/docs/modules/Assets.html @@ -4,14 +4,14 @@ Asset Manager | GrapesJS - + - - - + + +
    GrapesJS

    +

    It's important to declare also the close function, the editor should be able to close the Asset Manager via am.close().

    # Events

    For a complete list of available events, you can check it here.

    ←

    - + diff --git a/docs/modules/Blocks.html b/docs/modules/Blocks.html index be304601c..1571a0403 100644 --- a/docs/modules/Blocks.html +++ b/docs/modules/Blocks.html @@ -4,14 +4,14 @@ Block Manager | GrapesJS - + - - - + + +
    GrapesJS

    +

    Here an example of using custom Block Manager with a Vue component.

    From the demo above you can also see how we decided to hide our custom Block Manager and append it to the default container, but that is up to your preferences.

    # Events

    For a complete list of available events, you can check it here.

    ←

    GrapesJS

    The second argument, sender, just indicates who requested the command, in our case will be always the editor

    Until now there is nothing exciting except a common entry point for functions, but we'll see later its real advantages.

    # Default commands

    GrapesJS comes along with some default set of commands and you can get a list of all currently available commands via editor.Commands.getAll(). This will give you an object of all available commands, so, also those added later, like via plugins. You can recognize default commands by their namespace core:*, we also recommend to use namespaces in your own custom commands, but let's get a look more in detail here:

    # Stateful commands

    As we've already seen the command is just a function and once executed nothing is left behind, but in some cases, we'd like to keep a track of executed commands. GrapesJS can handle by default this case and to enable it you just need to declare a command as an object with the run and stop methods

    commands.add('my-command-state', {
   run(editor) {
     alert('This command is now active');
@@ -164,7 +164,7 @@ editor.on.log('Prevent `my-command-modal` from execution');
   }
 });
-

    # Conclusion

    The Commands module is quite simple but, at the same time, really powerful if used correctly. So, if you're creating a plugin for GrapesJS, use commands as much as possible, this will allow higher reusability and control over your logic.

    +

    # Conclusion

    The Commands module is quite simple but, at the same time, really powerful if used correctly. So, if you're creating a plugin for GrapesJS, use commands as much as possible, this will allow higher reusability and control over your logic.

    ←

    GrapesJS
    - + diff --git a/docs/modules/Components.html b/docs/modules/Components.html index bb122474a..4b633f1ce 100644 --- a/docs/modules/Components.html +++ b/docs/modules/Components.html @@ -4,14 +4,14 @@ Component Manager | GrapesJS - + - - - + + +
    GrapesJS

    ← →

    - + diff --git a/docs/modules/I18n.html b/docs/modules/I18n.html index 2d037843b..6825478bb 100644 --- a/docs/modules/I18n.html +++ b/docs/modules/I18n.html @@ -4,14 +4,14 @@ I18n (Internationalization) | GrapesJS - + - - - + + +
    GrapesJS

    ← →

    - + diff --git a/docs/modules/Layers.html b/docs/modules/Layers.html index 03e8cae79..bef76d87b 100644 --- a/docs/modules/Layers.html +++ b/docs/modules/Layers.html @@ -4,14 +4,14 @@ Layer Manager | GrapesJS - + - - - + + +
    GrapesJS

    +

    In the example below we'll replicate most of the default functionality with our own implementation.

    # Events

    For a complete list of available events, you can check it here.

    ←

    GrapesJS
    - + diff --git a/docs/modules/Plugins.html b/docs/modules/Plugins.html index 1e91e392c..2b033ca9c 100644 --- a/docs/modules/Plugins.html +++ b/docs/modules/Plugins.html @@ -4,14 +4,14 @@ Plugins | GrapesJS - + - - - + + +
    GrapesJS

    +

    In this example, the plugin name is my-plugin-name and can't be used by other plugins. To avoid namespace restrictions use basic plugins that are purely functional.

    # Boilerplate

    For fast plugin development, we highly recommend using grapesjs-cli (opens new window) which helps to avoid the hassle of setting up all the dependencies and configurations for development and building (no need to touch Webpack o Babel configurations). For more information check the repository

    • https://github.com/GrapesJS/preset-webpage
    • https://github.com/GrapesJS/preset-newsletter

    ← →

    - + diff --git a/docs/modules/Selectors.html b/docs/modules/Selectors.html index 2350871e3..034deeb48 100644 --- a/docs/modules/Selectors.html +++ b/docs/modules/Selectors.html @@ -4,14 +4,14 @@ Selector Manager | GrapesJS - + - - - + + +
    GrapesJS

    +

    In the example below we'll replicate most of the default functionality by using solely the Selector Manager API.

    # Events

    For a complete list of available events, you can check it here.

    ←

    GrapesJS
    - + diff --git a/docs/modules/Style-manager.html b/docs/modules/Style-manager.html index 4c30315bc..5cc806ece 100644 --- a/docs/modules/Style-manager.html +++ b/docs/modules/Style-manager.html @@ -4,14 +4,14 @@ Style Manager | GrapesJS - + - - - + + +
    GrapesJS

    # Style Manager

    GrapesJS - Style Manager

    The Style Manager module is responsible to show and update style properties relative to your Components. In this guide, you will see how to setup and take full advantage of the built-in Style Manager UI in GrapesJS. -The default UI is a lightweight component with built-in properties, but as you'll see next in this guide, it's easy to extend with your own elements or even create the Style Manager UI from scratch by using the Style Manager API.

    WARNING

    To get a better understanding of the content in this guide, we recommend reading Components first

    WARNING

    This guide is referring to GrapesJS v0.18.1 or higher

    # Configuration

    To change the default configurations you have to pass the styleManager property with the main configuration object.

    const editor = grapesjs.init({
+The default UI is a lightweight component with built-in properties, but as you'll see next in this guide, it's easy to extend with your own elements or even create the Style Manager UI from scratch by using the Style Manager API.
     
    WARNING
     
    To get a better understanding of the content in this guide, we recommend reading Components first
     
    WARNING
     
    This guide is referring to GrapesJS v0.18.1 or higher
     
     
    # Configuration
     
    To change the default configurations you have to pass the styleManager property with the main configuration object.
     
    const editor = grapesjs.init({
   ...
   styleManager: {
     sectors: [...],
     ...
   }
 });
-
    Check the full list of available options here: Style Manager Config (opens new window)
     
    # Initialization
     
    The Style Manager module is organized in sectors where each sector contains a list of properties to display. The default Style Manager configuration contains already a list of default common property styles and you can use them by simply skipping the styleManagerConfig.sectors option.
     
    grapesjs.init({
+
    Check the full list of available options here: Style Manager Config (opens new window)
     
    # Initialization
     
    The Style Manager module is organized in sectors where each sector contains a list of properties to display. The default Style Manager configuration contains already a list of default common property styles and you can use them by simply skipping the styleManagerConfig.sectors option.
     
    grapesjs.init({
   ...
   styleManager: {
     // With no defined sectors, the default list will be loaded
@@ -50,7 +50,7 @@ The default UI is a lightweight component with built-in properties, but as you'l
     ...
   },
 });
-
    DANGER
     
    It makes sense to show the Style Manager UI only when you have at least one component selected, so by default the Style Manager is hidden if there are no selected components.
     
    # Sector defintions
     
    Each sector is identified by its name and a list of properties to display. You can also specify the id in order to access the sector via API (if not indicated it will be generated from the name) and the default open state.
     
    grapesjs.init({
+
    DANGER
     
    It makes sense to show the Style Manager UI only when you have at least one component selected, so by default the Style Manager is hidden if there are no selected components.
     
    # Sector definitions
     
    Each sector is identified by its name and a list of properties to display. You can also specify the id in order to access the sector via API (if not indicated it will be generated from the name) and the default open state.
     
    grapesjs.init({
   // ...
   styleManager: {
     sectors: [
@@ -68,7 +68,7 @@ The default UI is a lightweight component with built-in properties, but as you'l
     ],
   },
 });
-
    # Property defintions
     
    Once you have defined your sector you can start adding property definitions inside properties. Each property has a common set of options (label, default, etc.) and others specific by their type.
     
    Let's see below a simple definition for controlling the padding style.
     
    sectors: [
+
    # Property definitions
     
    Once you have defined your sector you can start adding property definitions inside properties. Each property has a common set of options (label, default, etc.) and others specific by their type.
     
    Let's see below a simple definition for controlling the padding style.
     
    sectors: [
   {
     name: 'First sector',
     properties: [
@@ -358,7 +358,7 @@ console.log<
 
 // and update all selected target styles when necessary
 sm.addStyleTargets({ color: 'red' });
-
     
    # Events
     
    For a complete list of available events, you can check it here.

    +

    # Events

    For a complete list of available events, you can check it here.

    ← →

    - + diff --git a/docs/modules/Traits.html b/docs/modules/Traits.html index a1652b575..064e1ec38 100644 --- a/docs/modules/Traits.html +++ b/docs/modules/Traits.html @@ -4,14 +4,14 @@ Trait Manager | GrapesJS - + - - - + + +