diff --git a/docs/404.html b/docs/404.html index bf50ddb4a..1d98c530c 100644 --- a/docs/404.html +++ b/docs/404.html @@ -9,11 +9,11 @@ - +

404

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

Check Storage Manager API Reference

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

+ diff --git a/docs/api/block_manager.html b/docs/api/block_manager.html index 1d0aa375a..6070251e3 100644 --- a/docs/api/block_manager.html +++ b/docs/api/block_manager.html @@ -9,7 +9,7 @@ - + @@ -76,6 +76,6 @@ blockManager. →

- + diff --git a/docs/api/canvas.html b/docs/api/canvas.html index 83203742c..1550fb060 100644 --- a/docs/api/canvas.html +++ b/docs/api/canvas.html @@ -9,7 +9,7 @@ - + @@ -52,6 +52,6 @@ canvas.scrol Asset Manager →

- + diff --git a/docs/api/commands.html b/docs/api/commands.html index 6a1e94f46..0dcf32047 100644 --- a/docs/api/commands.html +++ b/docs/api/commands.html @@ -9,7 +9,7 @@ - + @@ -66,6 +66,6 @@ commands.isA DOM Components →

- + diff --git a/docs/api/component.html b/docs/api/component.html index bce101242..9524d8563 100644 --- a/docs/api/component.html +++ b/docs/api/component.html @@ -9,7 +9,7 @@ - + @@ -27,8 +27,8 @@ Twitter GitHub -

Component

The Component object represents a single node of our template structure, so when you update its properties the changes are -immediatly reflected on the canvas and in the code to export (indeed, when you ask to export the code we just go through all +

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({
  tagName: 'span',
@@ -43,7 +43,7 @@ eg. '.some-class[title=Hello], [data-gjs-type=column]' means you ca
 containing some-class class and Hello title, and column components. Default: true
  • droppable(Boolean | String)? Indicates if it's possible to drop other components inside. You can use
 a query string as with draggable. Default: true
  • badgableBoolean? Set to false if you don't want to see the badge (with the name) over the component. Default: true
  • stylable(Boolean | Array<String>)? 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-requireArray<String>? Indicate an array of style properties to show up which has been marked as toRequire. Default: []
  • unstylableArray<String>? Indicate an array of style properties which should be hidden from the style manager. Default: []
  • highlightableBoolean? It can be highlighted with 'dotted' borders if true. Default: true
  • copyableBoolean? True if it's possible to clone the component. Default: true
  • resizableBoolean? Indicates if it's possible to resize the component. It's also possible to pass an object as options for the Resizer. Default: false
  • editableBoolean? Allow to edit the content of the component (used on Text components). Default: false
  • layerableBoolean? Set to false if you need to hide the component inside Layers. Default: true
  • selectableBoolean? Allow component to be selected when clicked. Default: true
  • hoverableBoolean? Shows a highlight outline when hovering on the element if true. Default: true
  • voidBoolean? This property is used by the HTML exporter as void elements don't have closing tags, eg. <br/>, <hr/>, etc. Default: false
  • contentString? Content of the component (not escaped) which will be appended before children rendering. Default: ''
  • iconString? 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 | Function)? Component's javascript. More about it here. Default: ''
  • traitsArray<(Object | String)>? Component's traits. More about it here. Default: ['id', 'title']
  • propagateArray<String>? Indicates an array of properties which will be inhereted by all NEW appended children.
+will be hidden from the style manager. Default: true
  • stylable-requireArray<String>? Indicate an array of style properties to show up which has been marked as toRequire. Default: []
  • unstylableArray<String>? Indicate an array of style properties which should be hidden from the style manager. Default: []
  • style-signatureArray<String>? This option comes handy when you need to remove or export strictly component-specific rules. Be default, if this option is not empty, the editor will remove rules when there are no components, of that type, in the canvas. Eg. '['.navbar', '[navbar-']'. Default: ''
  • highlightableBoolean? It can be highlighted with 'dotted' borders if true. Default: true
  • copyableBoolean? True if it's possible to clone the component. Default: true
  • resizableBoolean? Indicates if it's possible to resize the component. It's also possible to pass an object as options for the Resizer. Default: false
  • editableBoolean? Allow to edit the content of the component (used on Text components). Default: false
  • layerableBoolean? Set to false if you need to hide the component inside Layers. Default: true
  • selectableBoolean? Allow component to be selected when clicked. Default: true
  • hoverableBoolean? Shows a highlight outline when hovering on the element if true. Default: true
  • voidBoolean? This property is used by the HTML exporter as void elements don't have closing tags, eg. <br/>, <hr/>, etc. Default: false
  • contentString? Content of the component (not escaped) which will be appended before children rendering. Default: ''
  • iconString? 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 | Function)? Component's javascript. More about it here. Default: ''
  • traitsArray<(Object | String)>? Component's traits. More about it here. Default: ['id', 'title']
  • propagateArray<String>? 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: []
  • toolbarArray<Object>? Set an array of items to show up inside the toolbar when the component is selected (move, clone, delete).
 Eg. toolbar: [ { attributes: {class: 'fa fa-arrows'}, command: 'tlb-move' }, ... ].
@@ -57,7 +57,7 @@ By default, when toolbar property is falsy the editor will add auto
 // -> Component

    • Returns Component

    replaceWith

    Replace a component with another one

    Parameters

    Examples

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

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

    setAttributes

    Update attributes of the component

    Parameters

    • attrsObject Key value attributes

    Examples

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

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

    setAttributes

    Update attributes of the component

    Parameters

    • attrsObject Key value attributes
    • opts (optional, default {})

    Examples

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

    Returns this

    addAttributes

    Add attributes to the component

    Parameters

    • attrsObject Key value attributes

    Examples

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

    Returns this

    getStyle

    Get the style of the component

    Returns Object

    setStyle

    Set the style on the component

    Parameters

    • propObject Key value style object (optional, default {})
    • opts (optional, default {})

    Examples

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

    Returns Object

    getAttributes

    Return all component's attributes

    Returns Object

    addClass

    Add classes

    Parameters

    Examples

    model.addClass('class1');
@@ -72,7 +72,7 @@ model.setCla
 model.removeClass('class1 class2');
 model.removeClass(['class1', 'class2']);
 // -> [SelectorObject, ...]
-

    Returns Array Array of removed selectors

    append

    Add new component children

    Parameters

    • components(Component | String) Component to add
    • optsObject Options, same as in model.add()(from backbone) (optional, default {})

    Examples

    someComponent.get('components').length // -> 0
+

    Returns Array Array of removed selectors

    getClasses

    Returns component's classes as an array of strings

    Returns Array

    append

    Add new component children

    Parameters

    • components(Component | String) Component to add
    • optsObject Options, same as in model.add()(from backbone) (optional, default {})

    Examples

    someComponent.get('components').length // -> 0
 const videoComponent = someComponent.append('<video></video><div></div>')[0];
 // This will add 2 components (`video` and `div`) to your `someComponent`
 someComponent.get('components').length // -> 2
@@ -88,9 +88,11 @@ console.log<
 // -> 2

    Returns (Collection | Array<Component>)

    parent

    Get the parent component, if exists

    Examples

    component.parent();
 // -> Component
-

    Returns Component

    getName

    Get the name of the component

    Returns String

    getIcon

    Get the icon string

    Returns String

    toHTML

    Return HTML string of the component

    Parameters

    • optsObject Options (optional, default {}) +

    Returns Component

    getTrait

    Get the trait by id/name

    Parameters

    • idString The id or name of the trait

    Examples

    const traitTitle = component.getTrait('title');
+traitTitle && traitTitle.set('label', 'New label');
+

    Returns Trait Trait model

    getName

    Get the name of the component

    Returns String

    getIcon

    Get the icon string

    Returns String

    toHTML

    Return HTML string of the component

    Parameters

    • optsObject Options (optional, default {})
      • opts.attributes(Object | Function) You can pass an object of custom attributes to replace -with the current one or you can even pass a function to generate attributes dynamically (optional, default null)

    Examples

    // Simple HTML return
+with the current one or you can even pass a function to generate attributes dynamically (optional, default null)
     Examples
    // Simple HTML return
 component.set({ tagName: 'span' });
 component.setAttributes({ title: 'Hello' });
 component.toHTML();
@@ -110,17 +112,17 @@ component.to
  },
 });
 // -> <span title="Custom attribute"></span>
-
    Returns String HTML string
     getId
    Return the component id
    Returns String
     setId
    Set new id on the component
     Parameters
    Returns this
     getEl
    Get the DOM element of the component. This works only of the
-component is already rendered
    Returns HTMLElement
     onAll
    Execute callback function on itself and all inner components
     Parameters
    • clbFunction Callback function, the model is passed as an argument
     Examples
    component.onAll(component => {
+
    Returns String HTML string
     getId
    Return the component id
    Returns String
     setId
    Set new id on the component
     Parameters
    Returns this
     getEl
    Get the DOM element of the component. This works only of the
+component is already rendered
    Returns HTMLElement
     onAll
    Execute callback function on itself and all inner components
     Parameters
    • clbFunction Callback function, the model is passed as an argument
     Examples
    component.onAll(component => {
  // do something with component
 })
-
    Returns this
     remove
    Remove the component
    Returns this
    Edit this page on GitHub
    Last Updated: 8/13/2018, 2:12:15 PM

    +

    Returns this

    remove

    Remove the component

    Returns this

    Edit this page on GitHub
    Last Updated: 9/20/2018, 10:49:01 PM

    ← Panels →

    - + diff --git a/docs/api/components.html b/docs/api/components.html index 4c90fbac3..46f95f0d6 100644 --- a/docs/api/components.html +++ b/docs/api/components.html @@ -9,7 +9,7 @@ - + @@ -84,6 +84,6 @@ updated immediately

    Returns + diff --git a/docs/api/css_composer.html b/docs/api/css_composer.html index 24497c4a6..05d334b0c 100644 --- a/docs/api/css_composer.html +++ b/docs/api/css_composer.html @@ -9,7 +9,7 @@ - + @@ -74,6 +74,6 @@ rule.set →

    - + diff --git a/docs/api/device_manager.html b/docs/api/device_manager.html index 1904a3bc4..96c687071 100644 --- a/docs/api/device_manager.html +++ b/docs/api/device_manager.html @@ -9,7 +9,7 @@ - + @@ -51,6 +51,6 @@ console.log< Selector Manager →

    - + diff --git a/docs/api/editor.html b/docs/api/editor.html index 431f8b8d7..b9a23661d 100644 --- a/docs/api/editor.html +++ b/docs/api/editor.html @@ -9,7 +9,7 @@ - + @@ -27,16 +27,16 @@ Twitter GitHub -

    Editor

    Editor contains the top level API which you'll probably use to customize the editor or extend it with plugins. +

    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

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

    Available Events

    You can make use of available events in this way

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

    Components

    • component:add - Triggered when a new component is added to the editor, the model is passed as an argument to the callback
    • component:remove - Triggered when a component is removed, the model is passed as an argument to the callback
    • component:clone - Triggered when a new component is added by a clone command, the model is passed as an argument to the callback
    • component:update - Triggered when a component is updated (moved, styled, etc.), the model is passed as an argument to the callback
    • component:update:{propertyName} - Listen any property change, the model is passed as an argument to the callback
    • component:styleUpdate - Triggered when the style of the component is updated, the model is passed as an argument to the callback
    • component:styleUpdate:{propertyName} - Listen for a specific style property change, the model is passed as an argument to the callback
    • component:selected - New component selected, the selected model is passed as an argument to the callback
    • component:deselected - Component deselected, the deselected model is passed as an argument to the callback
    • component:toggled - Component selection changed, toggled model is passed as an argument to the callback

    Blocks

    • block:add - New block added
    • block:remove - Block removed
    • block:drag:start - Started dragging block, model of the block is passed as an argument
    • block:drag - Dragging block, the block's model and the drag event are passed as arguments
    • block:drag:stop - Dragging of the block is stopped. As agruments for the callback you get, the dropped component model (if dropped successfully) and the model of the block

    Assets

    • asset:add - New asset added
    • asset:remove - Asset removed
    • asset:upload:start - Before the upload is started
    • asset:upload:end - After the upload is ended
    • asset:upload:error - On any error in upload, passes the error as an argument
    • asset:upload:response - On upload response, passes the result as an argument

    Keymaps

    • keymap:add - New keymap added. The new keyamp object is passed as an argument
    • keymap:remove - Keymap removed. The removed keyamp object is passed as an argument
    • keymap:emit - Some keymap emitted, in arguments you get keymapId, shortcutUsed, Event
    • keymap:emit:{keymapId} - keymapId emitted, in arguments you get keymapId, shortcutUsed, Event

    Style Manager

    • styleManager:change - Triggered on style property change from new selected component, the view of the property is passed as an argument to the callback
    • styleManager:change:{propertyName} - As above but for a specific style property

    Storages

    • 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

    Canvas

    • canvas:dragenter - When something is dragged inside the canvas, DataTransfer instance passed as an argument
    • canvas:dragover - When something is dragging on canvas, DataTransfer instance passed as an argument
    • canvas:drop - Something is dropped in canvas, DataTransfer instance and the dropped model are passed as arguments
    • canvas:dragend - When a drag operation is ended, DataTransfer instance passed as an argument
    • canvas:dragdata - On any dataTransfer parse, DataTransfer instance and the result are passed as arguments. +

    Components

    • component:add - Triggered when a new component is added to the editor, the model is passed as an argument to the callback
    • component:remove - Triggered when a component is removed, the model is passed as an argument to the callback
    • component:clone - Triggered when a new component is added by a clone command, the model is passed as an argument to the callback
    • component:update - Triggered when a component is updated (moved, styled, etc.), the model is passed as an argument to the callback
    • component:update:{propertyName} - Listen any property change, the model is passed as an argument to the callback
    • component:styleUpdate - Triggered when the style of the component is updated, the model is passed as an argument to the callback
    • component:styleUpdate:{propertyName} - Listen for a specific style property change, the model is passed as an argument to the callback
    • component:selected - New component selected, the selected model is passed as an argument to the callback
    • component:deselected - Component deselected, the deselected model is passed as an argument to the callback
    • component:toggled - Component selection changed, toggled model is passed as an argument to the callback

    Blocks

    • block:add - New block added
    • block:remove - Block removed
    • block:drag:start - Started dragging block, model of the block is passed as an argument
    • block:drag - Dragging block, the block's model and the drag event are passed as arguments
    • block:drag:stop - Dragging of the block is stopped. As agruments for the callback you get, the dropped component model (if dropped successfully) and the model of the block

    Assets

    • asset:add - New asset added
    • asset:remove - Asset removed
    • asset:upload:start - Before the upload is started
    • asset:upload:end - After the upload is ended
    • asset:upload:error - On any error in upload, passes the error as an argument
    • asset:upload:response - On upload response, passes the result as an argument

    Keymaps

    • keymap:add - New keymap added. The new keyamp object is passed as an argument
    • keymap:remove - Keymap removed. The removed keyamp object is passed as an argument
    • keymap:emit - Some keymap emitted, in arguments you get keymapId, shortcutUsed, Event
    • keymap:emit:{keymapId} - keymapId emitted, in arguments you get keymapId, shortcutUsed, Event

    Style Manager

    • styleManager:update:target - The target (Component or CSSRule) is changed
    • styleManager:change - Triggered on style property change from new selected component, the view of the property is passed as an argument to the callback
    • styleManager:change:{propertyName} - As above but for a specific style property

    Storages

    • 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

    Canvas

    • canvas:dragenter - When something is dragged inside the canvas, DataTransfer instance passed as an argument
    • canvas:dragover - When something is dragging on canvas, DataTransfer instance passed as an argument
    • canvas:drop - Something is dropped in canvas, DataTransfer instance and the dropped model are passed as arguments
    • canvas:dragend - When a drag operation is ended, DataTransfer instance passed as an argument
    • canvas:dragdata - On any dataTransfer parse, DataTransfer instance and the result are passed as arguments. By changing result.content you're able to customize what is dropped

    Selectors

    • selector:add - Triggers when a new selector/class is created

    RTE

    • 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

    Commands

    • run:{commandName} - Triggered when some command is called to run (eg. editor.runCommand('preview'))
    • stop:{commandName} - Triggered when some command is called to stop (eg. editor.stopCommand('preview'))
    • run:{commandName}:before - Triggered before the command is called
    • stop:{commandName}:before - Triggered before the command is called to stop
    • abort:{commandName} - Triggered when the command execution is aborted (editor.on(run:preview:before, opts => opts.abort = 1);)

    General

    • canvasScroll - Triggered when the canvas is scrolle
    • undo - Undo executed
    • redo - Redo executed
    • load - When the editor is loaded

    getConfig

    Returns configuration object

    Parameters

    Returns any Returns the configuration object or -the value of the specified property

    getHtml

    Returns HTML built inside canvas

    Parameters

    • opts

    Returns string HTML string

    getCss

    Returns CSS built inside canvas

    Parameters

    • optsObject Options (optional, default {})

    Returns string CSS string

    getJs

    Returns JS of all components

    Returns string JS string

    getComponents

    Returns components in JSON format object

    Returns Object

    setComponents

    Set components inside editor's canvas. This method overrides actual components

    Parameters

    Examples

    editor.setComponents('<div class="cls">New component</div>');
+the value of the specified property
     getHtml
    Returns HTML built inside canvas
     Parameters
    • opts
    Returns string HTML string
     getCss
    Returns CSS built inside canvas
     Parameters
    • optsObject Options (optional, default {})
    Returns string CSS string
     getJs
    Returns JS of all components
    Returns string JS string
     getComponents
    Return the complete tree of components. Use getWrapper to include also the wrapper
    Returns Components
     getWrapper
    Return the wrapper and its all components
    Returns Component
     setComponents
    Set components inside editor's canvas. This method overrides actual components
     Parameters
     Examples
    editor.setComponents('<div class="cls">New component</div>');
 // or
 editor.setComponents({
  type: 'text',
@@ -123,13 +123,13 @@ custom parser, pass null as the argument
    
 // Callbacks of those events will always receive the message and
 // options, as arguments, eg:
 // editor.on('log:info', (msg, opts) => console.info(msg, opts))
-
    Returns this
     on
    Attach event
     Parameters
    Returns this
     off
    Detach event
     Parameters
    Returns this
     trigger
    Trigger event
     Parameters
    Returns this
     destroy
    Destroy the editor
     render
    Render editor
    Returns HTMLElement
    Edit this page on GitHub
    Last Updated: 7/9/2018, 12:48:25 AM

    +

    Returns this

    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

    Edit this page on GitHub
    Last Updated: 9/20/2018, 10:49:01 PM

    ← Canvas →

    - + diff --git a/docs/api/index.html b/docs/api/index.html index 9b3b3d1eb..0b2bb2429 100644 --- a/docs/api/index.html +++ b/docs/api/index.html @@ -9,7 +9,7 @@ - + @@ -31,6 +31,6 @@ Editor →

    - + diff --git a/docs/api/keymaps.html b/docs/api/keymaps.html index 695821a21..86c532640 100644 --- a/docs/api/keymaps.html +++ b/docs/api/keymaps.html @@ -9,7 +9,7 @@ - + @@ -65,6 +65,6 @@ or just a command id as a string

    + diff --git a/docs/api/modal_dialog.html b/docs/api/modal_dialog.html index 545217226..09917b460 100644 --- a/docs/api/modal_dialog.html +++ b/docs/api/modal_dialog.html @@ -9,7 +9,7 @@ - + @@ -43,6 +43,6 @@ Rich Text Editor →

    - + diff --git a/docs/api/panels.html b/docs/api/panels.html index f1e2d7b33..40c67791c 100644 --- a/docs/api/panels.html +++ b/docs/api/panels.html @@ -9,7 +9,7 @@ - + @@ -87,6 +87,6 @@ command: func Style Manager →

    - + diff --git a/docs/api/rich_text_editor.html b/docs/api/rich_text_editor.html index 75d42dea9..c4620ef8e 100644 --- a/docs/api/rich_text_editor.html +++ b/docs/api/rich_text_editor.html @@ -9,7 +9,7 @@ - + @@ -74,6 +74,6 @@ rte.add →

    - + diff --git a/docs/api/selector_manager.html b/docs/api/selector_manager.html index dcb27b271..aee145526 100644 --- a/docs/api/selector_manager.html +++ b/docs/api/selector_manager.html @@ -9,7 +9,7 @@ - + @@ -59,6 +59,6 @@ sm.addClass< CSS Composer →

    - + diff --git a/docs/api/storage_manager.html b/docs/api/storage_manager.html index 06b745f13..f2010da7d 100644 --- a/docs/api/storage_manager.html +++ b/docs/api/storage_manager.html @@ -9,7 +9,7 @@ - + @@ -65,6 +65,6 @@ storageManager. + diff --git a/docs/api/style_manager.html b/docs/api/style_manager.html index 1fa122072..e3a83a9b0 100644 --- a/docs/api/style_manager.html +++ b/docs/api/style_manager.html @@ -9,7 +9,7 @@ - + @@ -27,7 +27,7 @@ Twitter GitHub -

    StyleManager

    With Style Manager you build categories (called sectors) of CSS properties which could be used to customize the style of components. +

    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

    const editor = grapesjs.init({
  styleManager: {
    // options
@@ -82,13 +82,14 @@ passed entity
    .render();
 propView.model.on('change:value', ...);
 someContainer.appendChild(propView.el);
-

    Returns PropertyView

    Edit this page on GitHub
    Last Updated: 7/8/2018, 11:17:15 PM

    +

    Returns PropertyView

    setTarget

    Select different target for the Style Manager. +It could be a Component, CSSRule, or a string of any CSS selector

    Parameters

    • target(Component | CSSRule | String)
    • opts

    Returns Styleable A Component or CSSRule

    Edit this page on GitHub
    Last Updated: 7/8/2018, 11:17:15 PM

    ← Storage Manager →

    - + diff --git a/docs/api/undo_manager.html b/docs/api/undo_manager.html index a7f5fc427..e4bb803d4 100644 --- a/docs/api/undo_manager.html +++ b/docs/api/undo_manager.html @@ -9,7 +9,7 @@ - + @@ -50,6 +50,6 @@ stack.each Keymaps

    - + diff --git a/docs/assets/js/12.9c91baa4.js b/docs/assets/js/12.9c91baa4.js deleted file mode 100644 index 7c6d521f6..000000000 --- a/docs/assets/js/12.9c91baa4.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{246:function(e,t,r){"use strict";r.r(t);var a=r(1),s=Object(a.a)({},function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("div",{staticClass:"content"},[e._m(0),r("p"),e._m(1),r("p"),e._m(2),r("p",[e._v('At first look you might probably think it\'s just another kind of page/HTML builder, but actually is something more. GrapesJS is a multi-purpose, Web Builder Framework, which means it allows you easily create your, drag & drop enabled, builder of "THINGS". For "THINGS" we consider anything web structure related, so HTML at first, but don\'t just think about web pages, we use HTML-like structure basically everywhere: Newsletters (eg. '),r("a",{attrs:{href:"https://mjml.io/",target:"_blank",rel:"noopener noreferrer"}},[e._v("MJML"),r("OutboundLink")],1),e._v("), Native Mobile Applications (eg. "),r("a",{attrs:{href:"https://github.com/facebook/react-native",target:"_blank",rel:"noopener noreferrer"}},[e._v("React Native"),r("OutboundLink")],1),e._v("), Native Desktop Applications (eg. "),r("a",{attrs:{href:"https://vuido.mimec.org",target:"_blank",rel:"noopener noreferrer"}},[e._v("Vuido"),r("OutboundLink")],1),e._v("), PDFs (eg. "),r("a",{attrs:{href:"https://github.com/diegomura/react-pdf",target:"_blank",rel:"noopener noreferrer"}},[e._v("React PDF"),r("OutboundLink")],1),e._v("), etc. So, for everything you can imagine as a set of elements like "),r("code",[e._v('... other nested elements ...')]),e._v(" you can create easily a GrapesJS builder around it and then use it independently in some of your applications.\nGrapesJS comes along with different features and tools which enable you to craft easy to use builders, which will allow your users to create complex HTML-like templates without any knowledge of coding.")]),e._m(3),r("p",[e._v("Mainly, GrapesJS was designed to be used inside some CMS 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. Then, with the same concept, instead of creating just an application we decided to create a framework that could be extended and used by everyone for any kind purpose.")]),e._m(4),r("p",[e._v("To show up of what GrapesJS is capable of we have created some presets.")]),r("ul",[r("li",[r("a",{attrs:{href:"https://github.com/artf/grapesjs-preset-webpage",target:"_blank",rel:"noopener noreferrer"}},[e._v("grapesjs-preset-webpage"),r("OutboundLink")],1),e._v(" - "),r("a",{attrs:{href:"http://artf.github.io/grapesjs/demo.html",target:"_blank",rel:"noopener noreferrer"}},[e._v("Webpage Builder"),r("OutboundLink")],1)]),r("li",[r("a",{attrs:{href:"https://github.com/artf/grapesjs-preset-newsletter",target:"_blank",rel:"noopener noreferrer"}},[e._v("grapesjs-preset-newsletter"),r("OutboundLink")],1),e._v(" - "),r("a",{attrs:{href:"http://artf.github.io/grapesjs/demo-newsletter-editor.html",target:"_blank",rel:"noopener noreferrer"}},[e._v("Newsletter Builder"),r("OutboundLink")],1)]),r("li",[r("a",{attrs:{href:"https://github.com/artf/grapesjs-mjml",target:"_blank",rel:"noopener noreferrer"}},[e._v("grapesjs-mjml"),r("OutboundLink")],1),e._v(" - "),r("a",{attrs:{href:"http://artf.github.io/grapesjs/demo-mjml.html",target:"_blank",rel:"noopener noreferrer"}},[e._v("Newsletter Builder with MJML"),r("OutboundLink")],1)])]),r("p",[e._v("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.")]),e._m(5),r("p",[e._v("Latest version: "),r("a",{attrs:{href:"https://www.npmjs.com/package/grapesjs",target:"_blank",rel:"noopener noreferrer"}},[r("img",{attrs:{src:"https://img.shields.io/npm/v/grapesjs.svg?colorB=e67891",alt:"npm"}}),r("OutboundLink")],1)]),r("p",[e._v("You can download GrapesJS from one of this sources")]),e._m(6),e._m(7),r("p",[e._v("To track changes made in the library we rely on "),r("a",{attrs:{href:"https://github.com/artf/grapesjs/releases",target:"_blank",rel:"noopener noreferrer"}},[e._v("Github Releases"),r("OutboundLink")],1)])])},[function(){var e=this.$createElement,t=this._self._c||e;return t("h1",{attrs:{id:"introduction"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#introduction","aria-hidden":"true"}},[this._v("#")]),this._v(" Introduction")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"table-of-contents"},[t("ul",[t("li",[t("a",{attrs:{href:"#what-is-grapesjs"}},[this._v("What is GrapesJS?")])]),t("li",[t("a",{attrs:{href:"#why-grapesjs"}},[this._v("Why GrapesJS?")])]),t("li",[t("a",{attrs:{href:"#quick-start"}},[this._v("Quick Start")])]),t("li",[t("a",{attrs:{href:"#download"}},[this._v("Download")])]),t("li",[t("a",{attrs:{href:"#changelog"}},[this._v("Changelog")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"what-is-grapesjs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#what-is-grapesjs","aria-hidden":"true"}},[this._v("#")]),this._v(" What is GrapesJS?")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"why-grapesjs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#why-grapesjs","aria-hidden":"true"}},[this._v("#")]),this._v(" Why GrapesJS?")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"quick-start"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quick-start","aria-hidden":"true"}},[this._v("#")]),this._v(" Quick Start")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"download"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#download","aria-hidden":"true"}},[this._v("#")]),this._v(" Download")])},function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("ul",[r("li",[e._v("CDNs\n"),r("ul",[r("li",[e._v("unpkg\n"),r("ul",[r("li",[r("code",[e._v("https://unpkg.com/grapesjs")])]),r("li",[r("code",[e._v("https://unpkg.com/grapesjs/dist/css/grapes.min.css")])])])]),r("li",[e._v("cdnjs\n"),r("ul",[r("li",[r("code",[e._v("https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/grapes.min.js")])]),r("li",[r("code",[e._v("https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/css/grapes.min.css")])])])])])]),r("li",[e._v("npm\n"),r("ul",[r("li",[r("code",[e._v("npm i grapesjs")])])])]),r("li",[e._v("git\n"),r("ul",[r("li",[r("code",[e._v("git clone https://github.com/artf/grapesjs.git")])])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"changelog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#changelog","aria-hidden":"true"}},[this._v("#")]),this._v(" Changelog")])}],!1,null,null,null);s.options.__file="README.md";t.default=s.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/12.b6040463.js b/docs/assets/js/12.b6040463.js new file mode 100644 index 000000000..c2d9a5abe --- /dev/null +++ b/docs/assets/js/12.b6040463.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{246:function(e,t,r){"use strict";r.r(t);var a=r(1),s=Object(a.a)({},function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("div",{staticClass:"content"},[e._m(0),r("p"),e._m(1),r("p"),e._m(2),r("p",[e._v('At first glance 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. '),r("a",{attrs:{href:"https://mjml.io/",target:"_blank",rel:"noopener noreferrer"}},[e._v("MJML"),r("OutboundLink")],1),e._v("), Native Mobile Applications (eg. "),r("a",{attrs:{href:"https://github.com/facebook/react-native",target:"_blank",rel:"noopener noreferrer"}},[e._v("React Native"),r("OutboundLink")],1),e._v("), Native Desktop Applications (eg. "),r("a",{attrs:{href:"https://vuido.mimec.org",target:"_blank",rel:"noopener noreferrer"}},[e._v("Vuido"),r("OutboundLink")],1),e._v("), PDFs (eg. "),r("a",{attrs:{href:"https://github.com/diegomura/react-pdf",target:"_blank",rel:"noopener noreferrer"}},[e._v("React PDF"),r("OutboundLink")],1),e._v("), etc. So, for everything you can imagine as a set of elements like "),r("code",[e._v('... other nested elements ...')]),e._v(" you can create easily a GrapesJS builder around it and then use it independently your applications.\nGrapesJS 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.")]),e._m(3),r("p",[e._v("GrapesJS was designed primarily to 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.")]),e._m(4),r("p",[e._v("To showcase the power of GrapesJS we have created some presets.")]),r("ul",[r("li",[r("a",{attrs:{href:"https://github.com/artf/grapesjs-preset-webpage",target:"_blank",rel:"noopener noreferrer"}},[e._v("grapesjs-preset-webpage"),r("OutboundLink")],1),e._v(" - "),r("a",{attrs:{href:"http://artf.github.io/grapesjs/demo.html",target:"_blank",rel:"noopener noreferrer"}},[e._v("Webpage Builder"),r("OutboundLink")],1)]),r("li",[r("a",{attrs:{href:"https://github.com/artf/grapesjs-preset-newsletter",target:"_blank",rel:"noopener noreferrer"}},[e._v("grapesjs-preset-newsletter"),r("OutboundLink")],1),e._v(" - "),r("a",{attrs:{href:"http://artf.github.io/grapesjs/demo-newsletter-editor.html",target:"_blank",rel:"noopener noreferrer"}},[e._v("Newsletter Builder"),r("OutboundLink")],1)]),r("li",[r("a",{attrs:{href:"https://github.com/artf/grapesjs-mjml",target:"_blank",rel:"noopener noreferrer"}},[e._v("grapesjs-mjml"),r("OutboundLink")],1),e._v(" - "),r("a",{attrs:{href:"http://artf.github.io/grapesjs/demo-mjml.html",target:"_blank",rel:"noopener noreferrer"}},[e._v("Newsletter Builder with MJML"),r("OutboundLink")],1)])]),r("p",[e._v("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.")]),e._m(5),r("p",[e._v("Latest version: "),r("a",{attrs:{href:"https://www.npmjs.com/package/grapesjs",target:"_blank",rel:"noopener noreferrer"}},[r("img",{attrs:{src:"https://img.shields.io/npm/v/grapesjs.svg?colorB=e67891",alt:"npm"}}),r("OutboundLink")],1)]),r("p",[e._v("You can download GrapesJS from one of these sources")]),e._m(6),e._m(7),r("p",[e._v("To track changes made in the library we rely on "),r("a",{attrs:{href:"https://github.com/artf/grapesjs/releases",target:"_blank",rel:"noopener noreferrer"}},[e._v("Github Releases"),r("OutboundLink")],1)])])},[function(){var e=this.$createElement,t=this._self._c||e;return t("h1",{attrs:{id:"introduction"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#introduction","aria-hidden":"true"}},[this._v("#")]),this._v(" Introduction")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"table-of-contents"},[t("ul",[t("li",[t("a",{attrs:{href:"#what-is-grapesjs"}},[this._v("What is GrapesJS?")])]),t("li",[t("a",{attrs:{href:"#why-grapesjs"}},[this._v("Why GrapesJS?")])]),t("li",[t("a",{attrs:{href:"#quick-start"}},[this._v("Quick Start")])]),t("li",[t("a",{attrs:{href:"#download"}},[this._v("Download")])]),t("li",[t("a",{attrs:{href:"#changelog"}},[this._v("Changelog")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"what-is-grapesjs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#what-is-grapesjs","aria-hidden":"true"}},[this._v("#")]),this._v(" What is GrapesJS?")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"why-grapesjs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#why-grapesjs","aria-hidden":"true"}},[this._v("#")]),this._v(" Why GrapesJS?")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"quick-start"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quick-start","aria-hidden":"true"}},[this._v("#")]),this._v(" Quick Start")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"download"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#download","aria-hidden":"true"}},[this._v("#")]),this._v(" Download")])},function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("ul",[r("li",[e._v("CDNs\n"),r("ul",[r("li",[e._v("unpkg\n"),r("ul",[r("li",[r("code",[e._v("https://unpkg.com/grapesjs")])]),r("li",[r("code",[e._v("https://unpkg.com/grapesjs/dist/css/grapes.min.css")])])])]),r("li",[e._v("cdnjs\n"),r("ul",[r("li",[r("code",[e._v("https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/grapes.min.js")])]),r("li",[r("code",[e._v("https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/css/grapes.min.css")])])])])])]),r("li",[e._v("npm\n"),r("ul",[r("li",[r("code",[e._v("npm i grapesjs")])])])]),r("li",[e._v("git\n"),r("ul",[r("li",[r("code",[e._v("git clone https://github.com/artf/grapesjs.git")])])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"changelog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#changelog","aria-hidden":"true"}},[this._v("#")]),this._v(" Changelog")])}],!1,null,null,null);s.options.__file="README.md";t.default=s.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/18.8ca9fc74.js b/docs/assets/js/18.8ca9fc74.js new file mode 100644 index 000000000..e9d87a62c --- /dev/null +++ b/docs/assets/js/18.8ca9fc74.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{252:function(t,e,a){"use strict";a.r(e);var s=a(1),n=Object(s.a)({},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("The Component object represents a single node of our template structure, so when you update its properties the changes are\nimmediately reflected on the canvas and in the code to export (indeed, when you ask to export the code we just go through all\nthe tree of nodes).\nAn example on how to update properties:")]),t._m(1),t._m(2),a("ul",[a("li",[a("code",[t._v("type")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("?")]),t._v(" Component type, eg. "),a("code",[t._v("text")]),t._v(", "),a("code",[t._v("image")]),t._v(", "),a("code",[t._v("video")]),t._v(", etc.")]),a("li",[a("code",[t._v("tagName")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("?")]),t._v(" HTML tag of the component, eg. "),a("code",[t._v("span")]),t._v(". Default: "),a("code",[t._v("div")])]),a("li",[a("code",[t._v("attributes")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v("?")]),t._v(" Key-value object of the component's attributes, eg. "),a("code",[t._v("{ title: 'Hello' }")]),t._v(" Default: "),a("code",[t._v("{}")])]),a("li",[a("code",[t._v("name")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("?")]),t._v(" Name of the component. Will be used, for example, in Layers and badges")]),a("li",[a("code",[t._v("removable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" When "),a("code",[t._v("true")]),t._v(" the component is removable from the canvas, default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("draggable")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")?")]),t._v(" Indicates if it's possible to drag the component inside others.\nYou can also specify a query string to indentify elements,\neg. "),a("code",[t._v("'.some-class[title=Hello], [data-gjs-type=column]'")]),t._v(" means you can drag the component only inside elements\ncontaining "),a("code",[t._v("some-class")]),t._v(" class and "),a("code",[t._v("Hello")]),t._v(" title, and "),a("code",[t._v("column")]),t._v(" components. Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("droppable")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")?")]),t._v(" Indicates if it's possible to drop other components inside. You can use\na query string as with "),a("code",[t._v("draggable")]),t._v(". Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("badgable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" Set to false if you don't want to see the badge (with the name) over the component. Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("stylable")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(">)?")]),t._v(" True if it's possible to style the component.\nYou can also indicate an array of CSS properties which is possible to style, eg. "),a("code",[t._v("['color', 'width']")]),t._v(", all other properties\nwill be hidden from the style manager. Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("stylable-require")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(">?")]),t._v(" Indicate an array of style properties to show up which has been marked as "),a("code",[t._v("toRequire")]),t._v(". Default: "),a("code",[t._v("[]")])]),a("li",[a("code",[t._v("unstylable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(">?")]),t._v(" Indicate an array of style properties which should be hidden from the style manager. Default: "),a("code",[t._v("[]")])]),a("li",[a("code",[t._v("style-signature")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(">?")]),t._v(" This option comes handy when you need to remove or export strictly component-specific rules. Be default, if this option is not empty, the editor will remove rules when there are no components, of that type, in the canvas. Eg. '['.navbar', '[navbar-']'. Default: "),a("code",[t._v("''")])]),a("li",[a("code",[t._v("highlightable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" It can be highlighted with 'dotted' borders if true. Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("copyable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" True if it's possible to clone the component. Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("resizable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" Indicates if it's possible to resize the component. It's also possible to pass an object as "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/utils/Resizer.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("options for the Resizer"),a("OutboundLink")],1),t._v(". Default: "),a("code",[t._v("false")])]),a("li",[a("code",[t._v("editable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" Allow to edit the content of the component (used on Text components). Default: "),a("code",[t._v("false")])]),a("li",[a("code",[t._v("layerable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" Set to "),a("code",[t._v("false")]),t._v(" if you need to hide the component inside Layers. Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("selectable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" Allow component to be selected when clicked. Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("hoverable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" Shows a highlight outline when hovering on the element if "),a("code",[t._v("true")]),t._v(". Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("void")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" This property is used by the HTML exporter as void elements don't have closing tags, eg. "),a("code",[t._v("
    ")]),t._v(", "),a("code",[t._v("
    ")]),t._v(", etc. Default: "),a("code",[t._v("false")])]),a("li",[a("code",[t._v("content")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("?")]),t._v(" Content of the component (not escaped) which will be appended before children rendering. Default: "),a("code",[t._v("''")])]),a("li",[a("code",[t._v("icon")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("?")]),t._v(" Component's icon, this string will be inserted before the name (in Layers and badge), eg. it can be an HTML string '"),a("i",{staticClass:"fa fa-square-o"}),t._v("'. Default: "),a("code",[t._v("''")])]),a("li",[a("code",[t._v("script")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1),t._v(")?")]),t._v(" Component's javascript. More about it "),a("router-link",{attrs:{to:"/modules/Components-js.html"}},[t._v("here")]),t._v(". Default: "),a("code",[t._v("''")])],1),a("li",[a("code",[t._v("traits")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")>?")]),t._v(" Component's traits. More about it "),a("router-link",{attrs:{to:"/modules/Traits.html"}},[t._v("here")]),t._v(". Default: "),a("code",[t._v("['id', 'title']")])],1),a("li",[a("code",[t._v("propagate")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(">?")]),t._v(" Indicates an array of properties which will be inhereted by all NEW appended children.\nFor example if you create a component likes this: "),a("code",[t._v("{ removable: false, draggable: false, propagate: ['removable', 'draggable'] }")]),t._v("\nand append some new component inside, the new added component will get the exact same properties indicated in the "),a("code",[t._v("propagate")]),t._v(" array (and the "),a("code",[t._v("propagate")]),t._v(" property itself). Default: "),a("code",[t._v("[]")])]),a("li",[a("code",[t._v("toolbar")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(">?")]),t._v(" Set an array of items to show up inside the toolbar when the component is selected (move, clone, delete).\nEg. "),a("code",[t._v("toolbar: [ { attributes: {class: 'fa fa-arrows'}, command: 'tlb-move' }, ... ]")]),t._v(".\nBy default, when "),a("code",[t._v("toolbar")]),t._v(" property is falsy the editor will add automatically commands like "),a("code",[t._v("move")]),t._v(", "),a("code",[t._v("delete")]),t._v(", etc. based on its properties.")]),t._m(3)]),t._m(4),a("p",[t._v("Check component's type")]),t._m(5),a("ul",[a("li",[a("code",[t._v("type")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Component type")])]),t._m(6),t._m(7),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)])]),t._m(8),t._m(9),t._m(10),a("ul",[a("li",[a("code",[t._v("query")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Query string")])]),t._m(11),t._m(12),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of components")]),t._m(13),t._m(14),t._m(15),a("ul",[a("li",[a("code",[t._v("query")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Query string")])]),t._m(16),t._m(17),t._m(18),t._m(19),a("p",[t._v("Replace a component with another one")]),t._m(20),a("ul",[a("li",[a("code",[t._v("el")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"#component"}},[t._v("Component")]),t._v(")")]),t._v(" Component or HTML string")])]),t._m(21),t._m(22),a("p",[t._v("Returns "),a("strong",[t._v("("),a("a",{attrs:{href:"#component"}},[t._v("Component")]),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"#component"}},[t._v("Component")]),t._v(">)")]),t._v(" New added component/s")]),t._m(23),a("p",[t._v("Update attributes of the component")]),t._m(24),a("ul",[a("li",[a("code",[t._v("attrs")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Key value attributes")]),t._m(25)]),t._m(26),t._m(27),t._m(28),t._m(29),a("p",[t._v("Add attributes to the component")]),t._m(30),a("ul",[a("li",[a("code",[t._v("attrs")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Key value attributes")])]),t._m(31),t._m(32),t._m(33),t._m(34),a("p",[t._v("Get the style of the component")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(35),a("p",[t._v("Set the style on the component")]),t._m(36),a("ul",[a("li",[a("code",[t._v("prop")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Key value style object (optional, default "),a("code",[t._v("{}")]),t._v(")")]),t._m(37)]),t._m(38),t._m(39),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(40),a("p",[t._v("Return all component's attributes")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(41),a("p",[t._v("Add classes")]),t._m(42),a("ul",[a("li",[a("code",[t._v("classes")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")")]),t._v(" Array or string of classes")])]),t._m(43),t._m(44),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of added selectors")]),t._m(45),a("p",[t._v("Set classes (resets current collection)")]),t._m(46),a("ul",[a("li",[a("code",[t._v("classes")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")")]),t._v(" Array or string of classes")])]),t._m(47),t._m(48),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of added selectors")]),t._m(49),a("p",[t._v("Remove classes")]),t._m(50),a("ul",[a("li",[a("code",[t._v("classes")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")")]),t._v(" Array or string of classes")])]),t._m(51),t._m(52),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of removed selectors")]),t._m(53),a("p",[t._v("Returns component's classes as an array of strings")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)])]),t._m(54),a("p",[t._v("Add new component children")]),t._m(55),a("ul",[a("li",[a("code",[t._v("components")]),a("strong",[t._v("("),a("a",{attrs:{href:"#component"}},[t._v("Component")]),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")")]),t._v(" Component to add")]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options, same as in "),a("code",[t._v("model.add()")]),t._v("(from backbone) (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(56),t._m(57),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of appended components")]),t._m(58),t._m(59),t._m(60),a("ul",[a("li",[a("code",[t._v("components")]),a("strong",[t._v("("),a("a",{attrs:{href:"#component"}},[t._v("Component")]),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")?")]),t._v(" Components to set")])]),t._m(61),t._m(62),a("p",[t._v("Returns "),a("strong",[t._v("(Collection | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"#component"}},[t._v("Component")]),t._v(">)")])]),t._m(63),a("p",[t._v("Get the parent component, if exists")]),t._m(64),t._m(65),t._m(66),t._m(67),a("p",[t._v("Get the trait by id/name")]),t._m(68),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" The "),a("code",[t._v("id")]),t._v(" or "),a("code",[t._v("name")]),t._v(" of the trait")])]),t._m(69),t._m(70),t._m(71),t._m(72),a("p",[t._v("Get the name of the component")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)])]),t._m(73),a("p",[t._v("Get the icon string")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)])]),t._m(74),a("p",[t._v("Return HTML string of the component")]),t._m(75),a("ul",[a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options (optional, default "),a("code",[t._v("{}")]),t._v(")\n"),a("ul",[a("li",[a("code",[t._v("opts.attributes")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1),t._v(")")]),t._v(" You can pass an object of custom attributes to replace\nwith the current one or you can even pass a function to generate attributes dynamically (optional, default "),a("code",[t._v("null")]),t._v(")")])])])]),t._m(76),t._m(77),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" HTML string")]),t._m(78),a("p",[t._v("Return the component id")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)])]),t._m(79),a("p",[t._v("Set new id on the component")]),t._m(80),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)])])]),t._m(81),t._m(82),a("p",[t._v("Get the DOM element of the component. This works only of the\ncomponent is already rendered")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._m(83),a("p",[t._v("Execute callback function on itself and all inner components")]),t._m(84),a("ul",[a("li",[a("code",[t._v("clb")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function, the model is passed as an argument")])]),t._m(85),t._m(86),t._m(87),t._m(88),a("p",[t._v("Remove the component")]),t._m(89)])},[function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"component"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#component","aria-hidden":"true"}},[this._v("#")]),this._v(" Component")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("set")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n tagName"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'span'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n removable"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token boolean"}},[t._v("false")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncomponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("get")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'tagName'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> 'span'")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"properties"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#properties","aria-hidden":"true"}},[this._v("#")]),this._v(" Properties")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("components")]),e("strong",[this._v("Collection<"),e("a",{attrs:{href:"#component"}},[this._v("Component")]),this._v(">?")]),this._v(" Children components. Default: "),e("code",[this._v("null")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"is"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#is","aria-hidden":"true"}},[this._v("#")]),this._v(" is")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("is")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'image'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> false")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"find"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#find","aria-hidden":"true"}},[this._v("#")]),this._v(" find")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Find inner components by query string.\n"),e("strong",[this._v("ATTENTION")]),this._v(": this method works only with already rendered component")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("find")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'div > .class'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> [Component, Component, ...]")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"closest"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#closest","aria-hidden":"true"}},[this._v("#")]),this._v(" closest")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Find the closest parent component by query string.\n"),e("strong",[this._v("ATTENTION")]),this._v(": this method works only with already rendered component")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("closest")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'div.some-class'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> Component")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[e("a",{attrs:{href:"#component"}},[this._v("Component")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"replacewith"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#replacewith","aria-hidden":"true"}},[this._v("#")]),this._v(" replaceWith")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("replaceWith")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'
    Some new content
    '")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> Component")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setattributes"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setattributes","aria-hidden":"true"}},[this._v("#")]),this._v(" setAttributes")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("opts")]),this._v(" (optional, default "),e("code",[this._v("{}")]),this._v(")")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setAttributes")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" id"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'test'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'data-key'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'value'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addattributes"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addattributes","aria-hidden":"true"}},[this._v("#")]),this._v(" addAttributes")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addAttributes")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'data-key'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'value'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getstyle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getstyle","aria-hidden":"true"}},[this._v("#")]),this._v(" getStyle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setstyle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setstyle","aria-hidden":"true"}},[this._v("#")]),this._v(" setStyle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("opts")]),this._v(" (optional, default "),e("code",[this._v("{}")]),this._v(")")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setStyle")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getattributes"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getattributes","aria-hidden":"true"}},[this._v("#")]),this._v(" getAttributes")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addclass"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addclass","aria-hidden":"true"}},[this._v("#")]),this._v(" addClass")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'class1 class2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'class2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> [SelectorObject, ...]")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setclass"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setclass","aria-hidden":"true"}},[this._v("#")]),this._v(" setClass")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-9","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-9","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'class1 class2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'class2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> [SelectorObject, ...]")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"removeclass"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#removeclass","aria-hidden":"true"}},[this._v("#")]),this._v(" removeClass")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-10","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-10","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("removeClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("removeClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'class1 class2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("removeClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'class2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> [SelectorObject, ...]")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getclasses"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getclasses","aria-hidden":"true"}},[this._v("#")]),this._v(" getClasses")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"append"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#append","aria-hidden":"true"}},[this._v("#")]),this._v(" append")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-11"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-11","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-11"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-11","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("someComponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("get")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'components'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length "),a("span",{attrs:{class:"token comment"}},[t._v("// -> 0")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" videoComponent "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" someComponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("append")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'
    '")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token number"}},[t._v("0")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// This will add 2 components (`video` and `div`) to your `someComponent`")]),t._v("\nsomeComponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("get")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'components'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length "),a("span",{attrs:{class:"token comment"}},[t._v("// -> 2")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// You can pass components directly")]),t._v("\notherComponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("append")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("otherComponent2"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\notherComponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("append")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("otherComponent3"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" otherComponent4"),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"components"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#components","aria-hidden":"true"}},[this._v("#")]),this._v(" components")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Set new collection if "),e("code",[this._v("components")]),this._v(" are provided, otherwise the\ncurrent collection is returned")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-12"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-12","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-12"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-12","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token comment"}},[t._v("// Set new collection")]),t._v("\ncomponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("components")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'
    '")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Get current collection")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" collection "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("components")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("log")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("collection"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> 2")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"parent"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parent","aria-hidden":"true"}},[this._v("#")]),this._v(" parent")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-13"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-13","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("parent")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> Component")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[e("a",{attrs:{href:"#component"}},[this._v("Component")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"gettrait"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gettrait","aria-hidden":"true"}},[this._v("#")]),this._v(" getTrait")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-13"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-13","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-14"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-14","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" traitTitle "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getTrait")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'title'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ntraitTitle "),a("span",{attrs:{class:"token operator"}},[t._v("&&")]),t._v(" traitTitle"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("set")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'label'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'New label'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Trait")]),this._v(" Trait model")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getname"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getname","aria-hidden":"true"}},[this._v("#")]),this._v(" getName")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"geticon"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#geticon","aria-hidden":"true"}},[this._v("#")]),this._v(" getIcon")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"tohtml"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#tohtml","aria-hidden":"true"}},[this._v("#")]),this._v(" toHTML")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-14"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-14","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-15"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-15","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token comment"}},[t._v("// Simple HTML return")]),t._v("\ncomponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("set")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" tagName"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'span'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncomponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setAttributes")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Hello'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncomponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("toHTML")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v('// -> ')]),t._v("\n\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Custom attributes")]),t._v("\ncomponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("toHTML")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" attributes"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'data-test'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Hello'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v('// -> ')]),t._v("\n\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Custom dynamic attributes")]),t._v("\ncomponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("toHTML")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token function"}},[t._v("attributes")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" attributes"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("get")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'tagName'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'span'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n attributes"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("title "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Custom attribute'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" attributes"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v('// -> ')]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getid"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getid","aria-hidden":"true"}},[this._v("#")]),this._v(" getId")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setid"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setid","aria-hidden":"true"}},[this._v("#")]),this._v(" setId")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-15"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-15","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getel"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getel","aria-hidden":"true"}},[this._v("#")]),this._v(" getEl")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"onall"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#onall","aria-hidden":"true"}},[this._v("#")]),this._v(" onAll")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-16"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-16","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-16"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-16","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("onAll")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("component "),a("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// do something with component")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"remove"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#remove","aria-hidden":"true"}},[this._v("#")]),this._v(" remove")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])}],!1,null,null,null);n.options.__file="component.md";e.default=n.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/18.f155b4c4.js b/docs/assets/js/18.f155b4c4.js deleted file mode 100644 index 5d990c43a..000000000 --- a/docs/assets/js/18.f155b4c4.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{252:function(t,e,a){"use strict";a.r(e);var s=a(1),n=Object(s.a)({},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("The Component object represents a single node of our template structure, so when you update its properties the changes are\nimmediatly reflected on the canvas and in the code to export (indeed, when you ask to export the code we just go through all\nthe tree of nodes).\nAn example on how to update properties:")]),t._m(1),t._m(2),a("ul",[a("li",[a("code",[t._v("type")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("?")]),t._v(" Component type, eg. "),a("code",[t._v("text")]),t._v(", "),a("code",[t._v("image")]),t._v(", "),a("code",[t._v("video")]),t._v(", etc.")]),a("li",[a("code",[t._v("tagName")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("?")]),t._v(" HTML tag of the component, eg. "),a("code",[t._v("span")]),t._v(". Default: "),a("code",[t._v("div")])]),a("li",[a("code",[t._v("attributes")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v("?")]),t._v(" Key-value object of the component's attributes, eg. "),a("code",[t._v("{ title: 'Hello' }")]),t._v(" Default: "),a("code",[t._v("{}")])]),a("li",[a("code",[t._v("name")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("?")]),t._v(" Name of the component. Will be used, for example, in Layers and badges")]),a("li",[a("code",[t._v("removable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" When "),a("code",[t._v("true")]),t._v(" the component is removable from the canvas, default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("draggable")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")?")]),t._v(" Indicates if it's possible to drag the component inside others.\nYou can also specify a query string to indentify elements,\neg. "),a("code",[t._v("'.some-class[title=Hello], [data-gjs-type=column]'")]),t._v(" means you can drag the component only inside elements\ncontaining "),a("code",[t._v("some-class")]),t._v(" class and "),a("code",[t._v("Hello")]),t._v(" title, and "),a("code",[t._v("column")]),t._v(" components. Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("droppable")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")?")]),t._v(" Indicates if it's possible to drop other components inside. You can use\na query string as with "),a("code",[t._v("draggable")]),t._v(". Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("badgable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" Set to false if you don't want to see the badge (with the name) over the component. Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("stylable")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(">)?")]),t._v(" True if it's possible to style the component.\nYou can also indicate an array of CSS properties which is possible to style, eg. "),a("code",[t._v("['color', 'width']")]),t._v(", all other properties\nwill be hidden from the style manager. Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("stylable-require")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(">?")]),t._v(" Indicate an array of style properties to show up which has been marked as "),a("code",[t._v("toRequire")]),t._v(". Default: "),a("code",[t._v("[]")])]),a("li",[a("code",[t._v("unstylable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(">?")]),t._v(" Indicate an array of style properties which should be hidden from the style manager. Default: "),a("code",[t._v("[]")])]),a("li",[a("code",[t._v("highlightable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" It can be highlighted with 'dotted' borders if true. Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("copyable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" True if it's possible to clone the component. Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("resizable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" Indicates if it's possible to resize the component. It's also possible to pass an object as "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/utils/Resizer.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("options for the Resizer"),a("OutboundLink")],1),t._v(". Default: "),a("code",[t._v("false")])]),a("li",[a("code",[t._v("editable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" Allow to edit the content of the component (used on Text components). Default: "),a("code",[t._v("false")])]),a("li",[a("code",[t._v("layerable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" Set to "),a("code",[t._v("false")]),t._v(" if you need to hide the component inside Layers. Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("selectable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" Allow component to be selected when clicked. Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("hoverable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" Shows a highlight outline when hovering on the element if "),a("code",[t._v("true")]),t._v(". Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("void")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" This property is used by the HTML exporter as void elements don't have closing tags, eg. "),a("code",[t._v("
    ")]),t._v(", "),a("code",[t._v("
    ")]),t._v(", etc. Default: "),a("code",[t._v("false")])]),a("li",[a("code",[t._v("content")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("?")]),t._v(" Content of the component (not escaped) which will be appended before children rendering. Default: "),a("code",[t._v("''")])]),a("li",[a("code",[t._v("icon")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("?")]),t._v(" Component's icon, this string will be inserted before the name (in Layers and badge), eg. it can be an HTML string '"),a("i",{staticClass:"fa fa-square-o"}),t._v("'. Default: "),a("code",[t._v("''")])]),a("li",[a("code",[t._v("script")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1),t._v(")?")]),t._v(" Component's javascript. More about it "),a("router-link",{attrs:{to:"/modules/Components-js.html"}},[t._v("here")]),t._v(". Default: "),a("code",[t._v("''")])],1),a("li",[a("code",[t._v("traits")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")>?")]),t._v(" Component's traits. More about it "),a("router-link",{attrs:{to:"/modules/Traits.html"}},[t._v("here")]),t._v(". Default: "),a("code",[t._v("['id', 'title']")])],1),a("li",[a("code",[t._v("propagate")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(">?")]),t._v(" Indicates an array of properties which will be inhereted by all NEW appended children.\nFor example if you create a component likes this: "),a("code",[t._v("{ removable: false, draggable: false, propagate: ['removable', 'draggable'] }")]),t._v("\nand append some new component inside, the new added component will get the exact same properties indicated in the "),a("code",[t._v("propagate")]),t._v(" array (and the "),a("code",[t._v("propagate")]),t._v(" property itself). Default: "),a("code",[t._v("[]")])]),a("li",[a("code",[t._v("toolbar")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(">?")]),t._v(" Set an array of items to show up inside the toolbar when the component is selected (move, clone, delete).\nEg. "),a("code",[t._v("toolbar: [ { attributes: {class: 'fa fa-arrows'}, command: 'tlb-move' }, ... ]")]),t._v(".\nBy default, when "),a("code",[t._v("toolbar")]),t._v(" property is falsy the editor will add automatically commands like "),a("code",[t._v("move")]),t._v(", "),a("code",[t._v("delete")]),t._v(", etc. based on its properties.")]),t._m(3)]),t._m(4),a("p",[t._v("Check component's type")]),t._m(5),a("ul",[a("li",[a("code",[t._v("type")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Component type")])]),t._m(6),t._m(7),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)])]),t._m(8),t._m(9),t._m(10),a("ul",[a("li",[a("code",[t._v("query")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Query string")])]),t._m(11),t._m(12),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of components")]),t._m(13),t._m(14),t._m(15),a("ul",[a("li",[a("code",[t._v("query")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Query string")])]),t._m(16),t._m(17),t._m(18),t._m(19),a("p",[t._v("Replace a component with another one")]),t._m(20),a("ul",[a("li",[a("code",[t._v("el")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"#component"}},[t._v("Component")]),t._v(")")]),t._v(" Component or HTML string")])]),t._m(21),t._m(22),a("p",[t._v("Returns "),a("strong",[t._v("("),a("a",{attrs:{href:"#component"}},[t._v("Component")]),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"#component"}},[t._v("Component")]),t._v(">)")]),t._v(" New added component/s")]),t._m(23),a("p",[t._v("Update attributes of the component")]),t._m(24),a("ul",[a("li",[a("code",[t._v("attrs")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Key value attributes")])]),t._m(25),t._m(26),t._m(27),t._m(28),a("p",[t._v("Add attributes to the component")]),t._m(29),a("ul",[a("li",[a("code",[t._v("attrs")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Key value attributes")])]),t._m(30),t._m(31),t._m(32),t._m(33),a("p",[t._v("Get the style of the component")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(34),a("p",[t._v("Set the style on the component")]),t._m(35),a("ul",[a("li",[a("code",[t._v("prop")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Key value style object (optional, default "),a("code",[t._v("{}")]),t._v(")")]),t._m(36)]),t._m(37),t._m(38),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(39),a("p",[t._v("Return all component's attributes")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(40),a("p",[t._v("Add classes")]),t._m(41),a("ul",[a("li",[a("code",[t._v("classes")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")")]),t._v(" Array or string of classes")])]),t._m(42),t._m(43),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of added selectors")]),t._m(44),a("p",[t._v("Set classes (resets current collection)")]),t._m(45),a("ul",[a("li",[a("code",[t._v("classes")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")")]),t._v(" Array or string of classes")])]),t._m(46),t._m(47),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of added selectors")]),t._m(48),a("p",[t._v("Remove classes")]),t._m(49),a("ul",[a("li",[a("code",[t._v("classes")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")")]),t._v(" Array or string of classes")])]),t._m(50),t._m(51),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of removed selectors")]),t._m(52),a("p",[t._v("Add new component children")]),t._m(53),a("ul",[a("li",[a("code",[t._v("components")]),a("strong",[t._v("("),a("a",{attrs:{href:"#component"}},[t._v("Component")]),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")")]),t._v(" Component to add")]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options, same as in "),a("code",[t._v("model.add()")]),t._v("(from backbone) (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(54),t._m(55),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of appended components")]),t._m(56),t._m(57),t._m(58),a("ul",[a("li",[a("code",[t._v("components")]),a("strong",[t._v("("),a("a",{attrs:{href:"#component"}},[t._v("Component")]),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")?")]),t._v(" Components to set")])]),t._m(59),t._m(60),a("p",[t._v("Returns "),a("strong",[t._v("(Collection | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"#component"}},[t._v("Component")]),t._v(">)")])]),t._m(61),a("p",[t._v("Get the parent component, if exists")]),t._m(62),t._m(63),t._m(64),t._m(65),a("p",[t._v("Get the name of the component")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)])]),t._m(66),a("p",[t._v("Get the icon string")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)])]),t._m(67),a("p",[t._v("Return HTML string of the component")]),t._m(68),a("ul",[a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options (optional, default "),a("code",[t._v("{}")]),t._v(")\n"),a("ul",[a("li",[a("code",[t._v("opts.attributes")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1),t._v(")")]),t._v(" You can pass an object of custom attributes to replace\nwith the current one or you can even pass a function to generate attributes dynamically (optional, default "),a("code",[t._v("null")]),t._v(")")])])])]),t._m(69),t._m(70),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" HTML string")]),t._m(71),a("p",[t._v("Return the component id")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)])]),t._m(72),a("p",[t._v("Set new id on the component")]),t._m(73),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)])])]),t._m(74),t._m(75),a("p",[t._v("Get the DOM element of the component. This works only of the\ncomponent is already rendered")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._m(76),a("p",[t._v("Execute callback function on itself and all inner components")]),t._m(77),a("ul",[a("li",[a("code",[t._v("clb")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function, the model is passed as an argument")])]),t._m(78),t._m(79),t._m(80),t._m(81),a("p",[t._v("Remove the component")]),t._m(82)])},[function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"component"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#component","aria-hidden":"true"}},[this._v("#")]),this._v(" Component")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("set")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n tagName"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'span'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n removable"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token boolean"}},[t._v("false")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncomponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("get")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'tagName'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> 'span'")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"properties"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#properties","aria-hidden":"true"}},[this._v("#")]),this._v(" Properties")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("components")]),e("strong",[this._v("Collection<"),e("a",{attrs:{href:"#component"}},[this._v("Component")]),this._v(">?")]),this._v(" Children components. Default: "),e("code",[this._v("null")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"is"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#is","aria-hidden":"true"}},[this._v("#")]),this._v(" is")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("is")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'image'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> false")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"find"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#find","aria-hidden":"true"}},[this._v("#")]),this._v(" find")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Find inner components by query string.\n"),e("strong",[this._v("ATTENTION")]),this._v(": this method works only with already rendered component")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("find")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'div > .class'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> [Component, Component, ...]")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"closest"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#closest","aria-hidden":"true"}},[this._v("#")]),this._v(" closest")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Find the closest parent component by query string.\n"),e("strong",[this._v("ATTENTION")]),this._v(": this method works only with already rendered component")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("closest")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'div.some-class'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> Component")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[e("a",{attrs:{href:"#component"}},[this._v("Component")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"replacewith"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#replacewith","aria-hidden":"true"}},[this._v("#")]),this._v(" replaceWith")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("replaceWith")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'
    Some new content
    '")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> Component")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setattributes"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setattributes","aria-hidden":"true"}},[this._v("#")]),this._v(" setAttributes")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setAttributes")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" id"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'test'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'data-key'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'value'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addattributes"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addattributes","aria-hidden":"true"}},[this._v("#")]),this._v(" addAttributes")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addAttributes")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'data-key'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'value'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getstyle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getstyle","aria-hidden":"true"}},[this._v("#")]),this._v(" getStyle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setstyle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setstyle","aria-hidden":"true"}},[this._v("#")]),this._v(" setStyle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("opts")]),this._v(" (optional, default "),e("code",[this._v("{}")]),this._v(")")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setStyle")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getattributes"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getattributes","aria-hidden":"true"}},[this._v("#")]),this._v(" getAttributes")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addclass"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addclass","aria-hidden":"true"}},[this._v("#")]),this._v(" addClass")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'class1 class2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'class2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> [SelectorObject, ...]")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setclass"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setclass","aria-hidden":"true"}},[this._v("#")]),this._v(" setClass")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-9","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-9","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'class1 class2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'class2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> [SelectorObject, ...]")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"removeclass"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#removeclass","aria-hidden":"true"}},[this._v("#")]),this._v(" removeClass")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-10","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-10","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("removeClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("removeClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'class1 class2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("removeClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'class2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> [SelectorObject, ...]")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"append"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#append","aria-hidden":"true"}},[this._v("#")]),this._v(" append")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-11"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-11","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-11"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-11","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("someComponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("get")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'components'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length "),a("span",{attrs:{class:"token comment"}},[t._v("// -> 0")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" videoComponent "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" someComponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("append")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'
    '")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token number"}},[t._v("0")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// This will add 2 components (`video` and `div`) to your `someComponent`")]),t._v("\nsomeComponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("get")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'components'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length "),a("span",{attrs:{class:"token comment"}},[t._v("// -> 2")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// You can pass components directly")]),t._v("\notherComponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("append")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("otherComponent2"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\notherComponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("append")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("otherComponent3"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" otherComponent4"),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"components"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#components","aria-hidden":"true"}},[this._v("#")]),this._v(" components")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Set new collection if "),e("code",[this._v("components")]),this._v(" are provided, otherwise the\ncurrent collection is returned")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-12"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-12","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-12"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-12","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token comment"}},[t._v("// Set new collection")]),t._v("\ncomponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("components")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'
    '")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Get current collection")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" collection "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("components")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("log")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("collection"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> 2")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"parent"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parent","aria-hidden":"true"}},[this._v("#")]),this._v(" parent")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-13"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-13","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("parent")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> Component")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[e("a",{attrs:{href:"#component"}},[this._v("Component")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getname"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getname","aria-hidden":"true"}},[this._v("#")]),this._v(" getName")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"geticon"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#geticon","aria-hidden":"true"}},[this._v("#")]),this._v(" getIcon")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"tohtml"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#tohtml","aria-hidden":"true"}},[this._v("#")]),this._v(" toHTML")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-13"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-13","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-14"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-14","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token comment"}},[t._v("// Simple HTML return")]),t._v("\ncomponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("set")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" tagName"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'span'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncomponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setAttributes")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Hello'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncomponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("toHTML")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v('// -> ')]),t._v("\n\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Custom attributes")]),t._v("\ncomponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("toHTML")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" attributes"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'data-test'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Hello'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v('// -> ')]),t._v("\n\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Custom dynamic attributes")]),t._v("\ncomponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("toHTML")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token function"}},[t._v("attributes")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" attributes"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("get")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'tagName'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'span'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n attributes"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("title "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Custom attribute'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" attributes"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v('// -> ')]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getid"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getid","aria-hidden":"true"}},[this._v("#")]),this._v(" getId")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setid"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setid","aria-hidden":"true"}},[this._v("#")]),this._v(" setId")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-14"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-14","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getel"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getel","aria-hidden":"true"}},[this._v("#")]),this._v(" getEl")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"onall"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#onall","aria-hidden":"true"}},[this._v("#")]),this._v(" onAll")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-15"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-15","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-15"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-15","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("onAll")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("component "),a("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// do something with component")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"remove"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#remove","aria-hidden":"true"}},[this._v("#")]),this._v(" remove")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])}],!1,null,null,null);n.options.__file="component.md";e.default=n.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/22.1be8550c.js b/docs/assets/js/22.1be8550c.js new file mode 100644 index 000000000..d8abd0044 --- /dev/null +++ b/docs/assets/js/22.1be8550c.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{236:function(t,e,a){"use strict";a.r(e);var s=a(1),n=Object(s.a)({},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("Editor contains the top level API which you'll probably use to customize the editor or extend it with plugins.\nYou get the Editor instance on init method and you can pass options via its "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/editor/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._m(1),t._m(2),a("p",[t._v("You can make use of available events in this way")]),t._m(3),t._m(4),t._m(5),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),t._m(13),t._m(14),t._m(15),t._m(16),t._m(17),t._m(18),t._m(19),t._m(20),t._m(21),t._m(22),t._m(23),t._m(24),t._m(25),t._m(26),a("p",[t._v("Returns configuration object")]),t._m(27),a("ul",[a("li",[a("code",[t._v("prop")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v("?")]),t._v(" Property name")])]),t._m(28),t._m(29),a("p",[t._v("Returns HTML built inside canvas")]),t._m(30),t._m(31),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" HTML string")]),t._m(32),a("p",[t._v("Returns CSS built inside canvas")]),t._m(33),a("ul",[a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" CSS string")]),t._m(34),a("p",[t._v("Returns JS of all components")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" JS string")]),t._m(35),t._m(36),t._m(37),t._m(38),a("p",[t._v("Return the wrapper and its all components")]),t._m(39),t._m(40),a("p",[t._v("Set components inside editor's canvas. This method overrides actual components")]),t._m(41),a("ul",[a("li",[a("code",[t._v("components")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(")")]),t._v(" HTML string or components model")])]),t._m(42),t._m(43),t._m(44),t._m(45),a("p",[t._v("Add components")]),t._m(46),a("ul",[a("li",[a("code",[t._v("components")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(")")]),t._v(" HTML string or components model")]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options\n"),a("ul",[a("li",[a("code",[t._v("opts.avoidUpdateStyle")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)]),t._v(" If the HTML string contains styles,\nby default, they will be created and, if already exist, updated. When this option\nis true, styles already created will not be updated. (optional, default "),a("code",[t._v("false")]),t._v(")")])])])]),t._m(47),t._m(48),a("p",[t._v("Returns "),a("strong",[t._v("(Model | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")])]),t._m(49),a("p",[t._v("Returns style in JSON format object")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(50),a("p",[t._v("Set style inside editor's canvas. This method overrides actual style")]),t._m(51),a("ul",[a("li",[a("code",[t._v("style")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(")")]),t._v(" CSS string or style model")])]),t._m(52),t._m(53),t._m(54),t._m(55),a("p",[t._v("Returns the last selected component, if there is one")]),t._m(56),t._m(57),a("p",[t._v("Returns an array of all selected components")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)])]),t._m(58),a("p",[t._v("Get a stylable entity from the selected component.\nIf you select a component without classes the entity is the Component\nitself and all changes will go inside its 'style' attribute. Otherwise,\nif the selected component has one or more classes, the function will\nreturn the corresponding CSS Rule")]),t._m(59),t._m(60),a("p",[t._v("Select a component")]),t._m(61),a("ul",[a("li",[a("code",[t._v("el")]),a("strong",[t._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1),t._v(")")]),t._v(" Component to select")])]),t._m(62),t._m(63),t._m(64),t._m(65),a("p",[t._v("Add component to selection")]),t._m(66),a("ul",[a("li",[a("code",[t._v("el")]),a("strong",[t._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")]),t._v(" Component to select")])]),t._m(67),t._m(68),t._m(69),t._m(70),a("p",[t._v("Remove component from selection")]),t._m(71),a("ul",[a("li",[a("code",[t._v("el")]),a("strong",[t._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")]),t._v(" Component to select")])]),t._m(72),t._m(73),t._m(74),t._m(75),a("p",[t._v("Toggle component selection")]),t._m(76),a("ul",[a("li",[a("code",[t._v("el")]),a("strong",[t._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")]),t._v(" Component to select")])]),t._m(77),t._m(78),t._m(79),t._m(80),a("p",[t._v("Set device to the editor. If the device exists it will\nchange the canvas to the proper width")]),t._m(81),a("ul",[a("li",[a("code",[t._v("name")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Name of the device")])]),t._m(82),t._m(83),t._m(84),t._m(85),a("p",[t._v("Return the actual active device")]),t._m(86),t._m(87),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Device name")]),t._m(88),a("p",[t._v("Execute command")]),t._m(89),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Command ID")]),a("li",[a("code",[t._v("options")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom options (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(90),t._m(91),t._m(92),t._m(93),a("p",[t._v("Stop the command if stop method was provided")]),t._m(94),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Command ID")]),a("li",[a("code",[t._v("options")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom options (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(95),t._m(96),t._m(97),t._m(98),a("p",[t._v("Store data to the current storage")]),t._m(99),a("ul",[a("li",[a("code",[t._v("clb")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Stored data")]),t._m(100),a("p",[t._v("Load data from the current storage")]),t._m(101),a("ul",[a("li",[a("code",[t._v("clb")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Stored data")]),t._m(102),a("p",[t._v("Returns container element. The one which was indicated as 'container'\non init method")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._m(103),t._m(104),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("number"),a("OutboundLink")],1)])]),t._m(105),a("p",[t._v("Replace the built-in Rich Text Editor with a custom one.")]),t._m(106),a("ul",[a("li",[a("code",[t._v("obj")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom RTE Interface")])]),t._m(107),t._m(108),t._m(109),t._m(110),t._m(111),a("ul",[a("li",[a("code",[t._v("parser")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1),t._v(" | null)")]),t._v(" Parser function")])]),t._m(112),t._m(113),t._m(114),t._m(115),a("p",[t._v("Trigger event log message")]),t._m(116),a("ul",[t._m(117),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom options (optional, default "),a("code",[t._v("{}")]),t._v(")\n"),a("ul",[a("li",[a("code",[t._v("opts.ns")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Namespace of the log (eg. to use in plugins) (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("opts.level")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Level of the log, "),a("code",[t._v("debug")]),t._v(", "),a("code",[t._v("info")]),t._v(", "),a("code",[t._v("warning")]),t._v(", "),a("code",[t._v("error")]),t._v(" (optional, default "),a("code",[t._v("'debug'")]),t._v(")")])])])]),t._m(118),t._m(119),t._m(120),t._m(121),a("p",[t._v("Attach event")]),t._m(122),a("ul",[a("li",[a("code",[t._v("event")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Event name")]),a("li",[a("code",[t._v("callback")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),t._m(123),t._m(124),a("p",[t._v("Attach event and detach it after the first run")]),t._m(125),a("ul",[a("li",[a("code",[t._v("event")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Event name")]),a("li",[a("code",[t._v("callback")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),t._m(126),t._m(127),a("p",[t._v("Detach event")]),t._m(128),a("ul",[a("li",[a("code",[t._v("event")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Event name")]),a("li",[a("code",[t._v("callback")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),t._m(129),t._m(130),a("p",[t._v("Trigger event")]),t._m(131),a("ul",[a("li",[a("code",[t._v("event")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Event to trigger")])]),t._m(132),t._m(133),a("p",[t._v("Destroy the editor")]),t._m(134),a("p",[t._v("Render editor")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])])])},[function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"editor"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#editor","aria-hidden":"true"}},[this._v("#")]),this._v(" Editor")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("init")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"available-events"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#available-events","aria-hidden":"true"}},[this._v("#")]),this._v(" Available Events")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("on")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'EVENT-NAME'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("some"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" argument"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// do something")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"components"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#components","aria-hidden":"true"}},[this._v("#")]),this._v(" Components")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("component:add")]),t._v(" - Triggered when a new component is added to the editor, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:remove")]),t._v(" - Triggered when a component is removed, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:clone")]),t._v(" - Triggered when a new component is added by a clone command, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:update")]),t._v(" - Triggered when a component is updated (moved, styled, etc.), the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:update:{propertyName}")]),t._v(" - Listen any property change, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:styleUpdate")]),t._v(" - Triggered when the style of the component is updated, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:styleUpdate:{propertyName}")]),t._v(" - Listen for a specific style property change, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:selected")]),t._v(" - New component selected, the selected model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:deselected")]),t._v(" - Component deselected, the deselected model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:toggled")]),t._v(" - Component selection changed, toggled model is passed as an argument to the callback")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"blocks"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#blocks","aria-hidden":"true"}},[this._v("#")]),this._v(" Blocks")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("block:add")]),t._v(" - New block added")]),a("li",[a("code",[t._v("block:remove")]),t._v(" - Block removed")]),a("li",[a("code",[t._v("block:drag:start")]),t._v(" - Started dragging block, model of the block is passed as an argument")]),a("li",[a("code",[t._v("block:drag")]),t._v(" - Dragging block, the block's model and the drag event are passed as arguments")]),a("li",[a("code",[t._v("block:drag:stop")]),t._v(" - Dragging of the block is stopped. As agruments for the callback you get, the dropped component model (if dropped successfully) and the model of the block")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"assets"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#assets","aria-hidden":"true"}},[this._v("#")]),this._v(" Assets")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("asset:add")]),t._v(" - New asset added")]),a("li",[a("code",[t._v("asset:remove")]),t._v(" - Asset removed")]),a("li",[a("code",[t._v("asset:upload:start")]),t._v(" - Before the upload is started")]),a("li",[a("code",[t._v("asset:upload:end")]),t._v(" - After the upload is ended")]),a("li",[a("code",[t._v("asset:upload:error")]),t._v(" - On any error in upload, passes the error as an argument")]),a("li",[a("code",[t._v("asset:upload:response")]),t._v(" - On upload response, passes the result as an argument")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"keymaps"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#keymaps","aria-hidden":"true"}},[this._v("#")]),this._v(" Keymaps")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("keymap:add")]),t._v(" - New keymap added. The new keyamp object is passed as an argument")]),a("li",[a("code",[t._v("keymap:remove")]),t._v(" - Keymap removed. The removed keyamp object is passed as an argument")]),a("li",[a("code",[t._v("keymap:emit")]),t._v(" - Some keymap emitted, in arguments you get keymapId, shortcutUsed, Event")]),a("li",[a("code",[t._v("keymap:emit:{keymapId}")]),t._v(" - "),a("code",[t._v("keymapId")]),t._v(" emitted, in arguments you get keymapId, shortcutUsed, Event")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"style-manager"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#style-manager","aria-hidden":"true"}},[this._v("#")]),this._v(" Style Manager")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("styleManager:update:target")]),this._v(" - The target (Component or CSSRule) is changed")]),e("li",[e("code",[this._v("styleManager:change")]),this._v(" - Triggered on style property change from new selected component, the view of the property is passed as an argument to the callback")]),e("li",[e("code",[this._v("styleManager:change:{propertyName}")]),this._v(" - As above but for a specific style property")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"storages"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#storages","aria-hidden":"true"}},[this._v("#")]),this._v(" Storages")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("storage:start")]),t._v(" - Before the storage request is started")]),a("li",[a("code",[t._v("storage:start:store")]),t._v(" - Before the store request. The object to store is passed as an argumnet (which you can edit)")]),a("li",[a("code",[t._v("storage:start:load")]),t._v(" - Before the load request. Items to load are passed as an argumnet (which you can edit)")]),a("li",[a("code",[t._v("storage:load")]),t._v(" - Triggered when something was loaded from the storage, loaded object passed as an argumnet")]),a("li",[a("code",[t._v("storage:store")]),t._v(" - Triggered when something is stored to the storage, stored object passed as an argumnet")]),a("li",[a("code",[t._v("storage:end")]),t._v(" - After the storage request is ended")]),a("li",[a("code",[t._v("storage:end:store")]),t._v(" - After the store request")]),a("li",[a("code",[t._v("storage:end:load")]),t._v(" - After the load request")]),a("li",[a("code",[t._v("storage:error")]),t._v(" - On any error on storage request, passes the error as an argument")]),a("li",[a("code",[t._v("storage:error:store")]),t._v(" - Error on store request, passes the error as an argument")]),a("li",[a("code",[t._v("storage:error:load")]),t._v(" - Error on load request, passes the error as an argument")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"canvas"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#canvas","aria-hidden":"true"}},[this._v("#")]),this._v(" Canvas")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("canvas:dragenter")]),t._v(" - When something is dragged inside the canvas, "),a("code",[t._v("DataTransfer")]),t._v(" instance passed as an argument")]),a("li",[a("code",[t._v("canvas:dragover")]),t._v(" - When something is dragging on canvas, "),a("code",[t._v("DataTransfer")]),t._v(" instance passed as an argument")]),a("li",[a("code",[t._v("canvas:drop")]),t._v(" - Something is dropped in canvas, "),a("code",[t._v("DataTransfer")]),t._v(" instance and the dropped model are passed as arguments")]),a("li",[a("code",[t._v("canvas:dragend")]),t._v(" - When a drag operation is ended, "),a("code",[t._v("DataTransfer")]),t._v(" instance passed as an argument")]),a("li",[a("code",[t._v("canvas:dragdata")]),t._v(" - On any dataTransfer parse, "),a("code",[t._v("DataTransfer")]),t._v(" instance and the "),a("code",[t._v("result")]),t._v(" are passed as arguments.\nBy changing "),a("code",[t._v("result.content")]),t._v(" you're able to customize what is dropped")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"selectors"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#selectors","aria-hidden":"true"}},[this._v("#")]),this._v(" Selectors")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("selector:add")]),this._v(" - Triggers when a new selector/class is created")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"rte"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#rte","aria-hidden":"true"}},[this._v("#")]),this._v(" RTE")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("rte:enable")]),this._v(" - RTE enabled. The view, on which RTE is enabled, is passed as an argument")]),e("li",[e("code",[this._v("rte:disable")]),this._v(" - RTE disabled. The view, on which RTE is disabled, is passed as an argument")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"commands"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#commands","aria-hidden":"true"}},[this._v("#")]),this._v(" Commands")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("run:{commandName}")]),t._v(" - Triggered when some command is called to run (eg. editor.runCommand('preview'))")]),a("li",[a("code",[t._v("stop:{commandName}")]),t._v(" - Triggered when some command is called to stop (eg. editor.stopCommand('preview'))")]),a("li",[a("code",[t._v("run:{commandName}:before")]),t._v(" - Triggered before the command is called")]),a("li",[a("code",[t._v("stop:{commandName}:before")]),t._v(" - Triggered before the command is called to stop")]),a("li",[a("code",[t._v("abort:{commandName}")]),t._v(" - Triggered when the command execution is aborted ("),a("code",[t._v("editor.on(")]),t._v("run:preview:before"),a("code",[t._v(", opts => opts.abort = 1);")]),t._v(")")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"general"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#general","aria-hidden":"true"}},[this._v("#")]),this._v(" General")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("canvasScroll")]),t._v(" - Triggered when the canvas is scrolle")]),a("li",[a("code",[t._v("undo")]),t._v(" - Undo executed")]),a("li",[a("code",[t._v("redo")]),t._v(" - Redo executed")]),a("li",[a("code",[t._v("load")]),t._v(" - When the editor is loaded")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getconfig"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getconfig","aria-hidden":"true"}},[this._v("#")]),this._v(" getConfig")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("any")]),this._v(" Returns the configuration object or\nthe value of the specified property")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"gethtml"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gethtml","aria-hidden":"true"}},[this._v("#")]),this._v(" getHtml")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("opts")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getcss"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcss","aria-hidden":"true"}},[this._v("#")]),this._v(" getCss")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getjs"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getjs","aria-hidden":"true"}},[this._v("#")]),this._v(" getJs")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getcomponents"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcomponents","aria-hidden":"true"}},[this._v("#")]),this._v(" getComponents")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Return the complete tree of components. Use "),e("code",[this._v("getWrapper")]),this._v(" to include also the wrapper")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Components")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getwrapper"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getwrapper","aria-hidden":"true"}},[this._v("#")]),this._v(" getWrapper")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Component")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setcomponents"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setcomponents","aria-hidden":"true"}},[this._v("#")]),this._v(" setComponents")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setComponents")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'
    New component
    '")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// or")]),t._v("\neditor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setComponents")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n type"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'text'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n classes"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'cls'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n content"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'New component'")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addcomponents"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addcomponents","aria-hidden":"true"}},[this._v("#")]),this._v(" addComponents")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addComponents")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'
    New component
    '")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// or")]),t._v("\neditor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addComponents")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n type"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'text'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n classes"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'cls'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n content"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'New component'")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getstyle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getstyle","aria-hidden":"true"}},[this._v("#")]),this._v(" getStyle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setstyle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setstyle","aria-hidden":"true"}},[this._v("#")]),this._v(" setStyle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setStyle")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'.cls{color: red}'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("//or")]),t._v("\neditor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setStyle")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n selectors"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'cls'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n style"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getselected"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getselected","aria-hidden":"true"}},[this._v("#")]),this._v(" getSelected")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Model")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getselectedall"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getselectedall","aria-hidden":"true"}},[this._v("#")]),this._v(" getSelectedAll")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getselectedtostyle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getselectedtostyle","aria-hidden":"true"}},[this._v("#")]),this._v(" getSelectedToStyle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Model")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"select"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#select","aria-hidden":"true"}},[this._v("#")]),this._v(" select")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token comment"}},[t._v("// Select dropped block")]),t._v("\neditor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("on")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'block:drag:stop'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("function")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("select")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"selectadd"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#selectadd","aria-hidden":"true"}},[this._v("#")]),this._v(" selectAdd")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("selectAdd")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"selectremove"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#selectremove","aria-hidden":"true"}},[this._v("#")]),this._v(" selectRemove")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-9","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("selectRemove")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"selecttoggle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#selecttoggle","aria-hidden":"true"}},[this._v("#")]),this._v(" selectToggle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-10","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("selectToggle")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setdevice"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setdevice","aria-hidden":"true"}},[this._v("#")]),this._v(" setDevice")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-11"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-11","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setDevice")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'Tablet'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getdevice"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getdevice","aria-hidden":"true"}},[this._v("#")]),this._v(" getDevice")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-9","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" device "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getDevice")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("log")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// 'Tablet'")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"runcommand"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#runcommand","aria-hidden":"true"}},[this._v("#")]),this._v(" runCommand")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-12"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-12","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-10","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("runCommand")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myCommand'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("someValue"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token number"}},[t._v("1")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("any")]),this._v(" The return is defined by the command")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"stopcommand"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#stopcommand","aria-hidden":"true"}},[this._v("#")]),this._v(" stopCommand")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-13"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-13","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-11"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-11","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("stopCommand")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myCommand'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("someValue"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token number"}},[t._v("1")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("any")]),this._v(" The return is defined by the command")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"store"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#store","aria-hidden":"true"}},[this._v("#")]),this._v(" store")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-14"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-14","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"load"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#load","aria-hidden":"true"}},[this._v("#")]),this._v(" load")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-15"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-15","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getcontainer"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcontainer","aria-hidden":"true"}},[this._v("#")]),this._v(" getContainer")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getdirtycount"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getdirtycount","aria-hidden":"true"}},[this._v("#")]),this._v(" getDirtyCount")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Return the count of changes made to the content and not yet stored.\nThis count resets at any "),e("code",[this._v("store()")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setcustomrte"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setcustomrte","aria-hidden":"true"}},[this._v("#")]),this._v(" setCustomRte")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-16"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-16","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-12"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-12","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setCustomRte")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// Function for enabling custom RTE")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// el is the HTMLElement of the double clicked Text Component")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// rte is the same instance you have returned the first time you call")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// enable(). This is useful if need to check if the RTE is already enabled so")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// ion this case you'll need to return the RTE and the end of the function")]),t._v("\n enable"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("function")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rte"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n rte "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{attrs:{class:"token class-name"}},[t._v("MyCustomRte")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// this depends on the Custom RTE API")]),t._v("\n "),a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n "),a("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" rte"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// return the RTE instance")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),a("span",{attrs:{class:"token comment"}},[t._v("// Disable the editor, called for example when you unfocus the Text Component")]),t._v("\n disable"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("function")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rte"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n rte"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("blur")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// this depends on the Custom RTE API")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Called when the Text Component is focused again. If you returned the RTE instance")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// from the enable function, the enable won't be called again instead will call focus,")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// in this case to avoid double binding of the editor")]),t._v("\n focus"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rte"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n rte"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("focus")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// this depends on the Custom RTE API")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setcustomparsercss"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setcustomparsercss","aria-hidden":"true"}},[this._v("#")]),this._v(" setCustomParserCss")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Replace the default CSS parser with a custom one.\nThe parser function receives a CSS string as a parameter and expects\nan array of CSSRule objects as a result. If you need to remove the\ncustom parser, pass "),e("code",[this._v("null")]),this._v(" as the argument")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-17"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-17","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-13"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-13","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setCustomParserCss")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("css "),a("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" result "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// ... parse the CSS string")]),t._v("\n result"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("push")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n selectors"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'.someclass, div .otherclass'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n style"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),a("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" result"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"log"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#log","aria-hidden":"true"}},[this._v("#")]),this._v(" log")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-18"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-18","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("msg")]),e("strong",[this._v("any")]),this._v(" Message to log")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-14"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-14","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("log")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'Something done!'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ns"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'from-plugin-x'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" level"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'info'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// This will trigger following events")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// `log`, `log:info`, `log-from-plugin-x`, `log-from-plugin-x:info`")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Callbacks of those events will always receive the message and")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// options, as arguments, eg:")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// editor.on('log:info', (msg, opts) => console.info(msg, opts))")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"on"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#on","aria-hidden":"true"}},[this._v("#")]),this._v(" on")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-19"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-19","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"once"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#once","aria-hidden":"true"}},[this._v("#")]),this._v(" once")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-20"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-20","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"off"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#off","aria-hidden":"true"}},[this._v("#")]),this._v(" off")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-21"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-21","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"trigger"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#trigger","aria-hidden":"true"}},[this._v("#")]),this._v(" trigger")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-22"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-22","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"destroy"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#destroy","aria-hidden":"true"}},[this._v("#")]),this._v(" destroy")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"render"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#render","aria-hidden":"true"}},[this._v("#")]),this._v(" render")])}],!1,null,null,null);n.options.__file="editor.md";e.default=n.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/22.4044a85d.js b/docs/assets/js/22.4044a85d.js deleted file mode 100644 index 03de19b92..000000000 --- a/docs/assets/js/22.4044a85d.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{236:function(t,e,a){"use strict";a.r(e);var s=a(1),n=Object(s.a)({},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("Editor contains the top level API which you'll probably use to customize the editor or extend it with plugins.\nYou get the Editor instance on init method and you can pass options via its "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/editor/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._m(1),t._m(2),a("p",[t._v("You can make use of available events in this way")]),t._m(3),t._m(4),t._m(5),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),t._m(13),t._m(14),t._m(15),t._m(16),t._m(17),t._m(18),t._m(19),t._m(20),t._m(21),t._m(22),t._m(23),t._m(24),t._m(25),t._m(26),a("p",[t._v("Returns configuration object")]),t._m(27),a("ul",[a("li",[a("code",[t._v("prop")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v("?")]),t._v(" Property name")])]),t._m(28),t._m(29),a("p",[t._v("Returns HTML built inside canvas")]),t._m(30),t._m(31),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" HTML string")]),t._m(32),a("p",[t._v("Returns CSS built inside canvas")]),t._m(33),a("ul",[a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" CSS string")]),t._m(34),a("p",[t._v("Returns JS of all components")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" JS string")]),t._m(35),a("p",[t._v("Returns components in JSON format object")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(36),a("p",[t._v("Set components inside editor's canvas. This method overrides actual components")]),t._m(37),a("ul",[a("li",[a("code",[t._v("components")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(")")]),t._v(" HTML string or components model")])]),t._m(38),t._m(39),t._m(40),t._m(41),a("p",[t._v("Add components")]),t._m(42),a("ul",[a("li",[a("code",[t._v("components")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(")")]),t._v(" HTML string or components model")]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options\n"),a("ul",[a("li",[a("code",[t._v("opts.avoidUpdateStyle")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)]),t._v(" If the HTML string contains styles,\nby default, they will be created and, if already exist, updated. When this option\nis true, styles already created will not be updated. (optional, default "),a("code",[t._v("false")]),t._v(")")])])])]),t._m(43),t._m(44),a("p",[t._v("Returns "),a("strong",[t._v("(Model | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")])]),t._m(45),a("p",[t._v("Returns style in JSON format object")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(46),a("p",[t._v("Set style inside editor's canvas. This method overrides actual style")]),t._m(47),a("ul",[a("li",[a("code",[t._v("style")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(")")]),t._v(" CSS string or style model")])]),t._m(48),t._m(49),t._m(50),t._m(51),a("p",[t._v("Returns the last selected component, if there is one")]),t._m(52),t._m(53),a("p",[t._v("Returns an array of all selected components")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)])]),t._m(54),a("p",[t._v("Get a stylable entity from the selected component.\nIf you select a component without classes the entity is the Component\nitself and all changes will go inside its 'style' attribute. Otherwise,\nif the selected component has one or more classes, the function will\nreturn the corresponding CSS Rule")]),t._m(55),t._m(56),a("p",[t._v("Select a component")]),t._m(57),a("ul",[a("li",[a("code",[t._v("el")]),a("strong",[t._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1),t._v(")")]),t._v(" Component to select")])]),t._m(58),t._m(59),t._m(60),t._m(61),a("p",[t._v("Add component to selection")]),t._m(62),a("ul",[a("li",[a("code",[t._v("el")]),a("strong",[t._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")]),t._v(" Component to select")])]),t._m(63),t._m(64),t._m(65),t._m(66),a("p",[t._v("Remove component from selection")]),t._m(67),a("ul",[a("li",[a("code",[t._v("el")]),a("strong",[t._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")]),t._v(" Component to select")])]),t._m(68),t._m(69),t._m(70),t._m(71),a("p",[t._v("Toggle component selection")]),t._m(72),a("ul",[a("li",[a("code",[t._v("el")]),a("strong",[t._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")]),t._v(" Component to select")])]),t._m(73),t._m(74),t._m(75),t._m(76),a("p",[t._v("Set device to the editor. If the device exists it will\nchange the canvas to the proper width")]),t._m(77),a("ul",[a("li",[a("code",[t._v("name")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Name of the device")])]),t._m(78),t._m(79),t._m(80),t._m(81),a("p",[t._v("Return the actual active device")]),t._m(82),t._m(83),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Device name")]),t._m(84),a("p",[t._v("Execute command")]),t._m(85),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Command ID")]),a("li",[a("code",[t._v("options")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom options (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(86),t._m(87),t._m(88),t._m(89),a("p",[t._v("Stop the command if stop method was provided")]),t._m(90),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Command ID")]),a("li",[a("code",[t._v("options")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom options (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(91),t._m(92),t._m(93),t._m(94),a("p",[t._v("Store data to the current storage")]),t._m(95),a("ul",[a("li",[a("code",[t._v("clb")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Stored data")]),t._m(96),a("p",[t._v("Load data from the current storage")]),t._m(97),a("ul",[a("li",[a("code",[t._v("clb")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Stored data")]),t._m(98),a("p",[t._v("Returns container element. The one which was indicated as 'container'\non init method")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._m(99),t._m(100),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("number"),a("OutboundLink")],1)])]),t._m(101),a("p",[t._v("Replace the built-in Rich Text Editor with a custom one.")]),t._m(102),a("ul",[a("li",[a("code",[t._v("obj")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom RTE Interface")])]),t._m(103),t._m(104),t._m(105),t._m(106),t._m(107),a("ul",[a("li",[a("code",[t._v("parser")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1),t._v(" | null)")]),t._v(" Parser function")])]),t._m(108),t._m(109),t._m(110),t._m(111),a("p",[t._v("Trigger event log message")]),t._m(112),a("ul",[t._m(113),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom options (optional, default "),a("code",[t._v("{}")]),t._v(")\n"),a("ul",[a("li",[a("code",[t._v("opts.ns")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Namespace of the log (eg. to use in plugins) (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("opts.level")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Level of the log, "),a("code",[t._v("debug")]),t._v(", "),a("code",[t._v("info")]),t._v(", "),a("code",[t._v("warning")]),t._v(", "),a("code",[t._v("error")]),t._v(" (optional, default "),a("code",[t._v("'debug'")]),t._v(")")])])])]),t._m(114),t._m(115),t._m(116),t._m(117),a("p",[t._v("Attach event")]),t._m(118),a("ul",[a("li",[a("code",[t._v("event")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Event name")]),a("li",[a("code",[t._v("callback")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),t._m(119),t._m(120),a("p",[t._v("Detach event")]),t._m(121),a("ul",[a("li",[a("code",[t._v("event")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Event name")]),a("li",[a("code",[t._v("callback")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),t._m(122),t._m(123),a("p",[t._v("Trigger event")]),t._m(124),a("ul",[a("li",[a("code",[t._v("event")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Event to trigger")])]),t._m(125),t._m(126),a("p",[t._v("Destroy the editor")]),t._m(127),a("p",[t._v("Render editor")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])])])},[function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"editor"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#editor","aria-hidden":"true"}},[this._v("#")]),this._v(" Editor")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("init")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"available-events"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#available-events","aria-hidden":"true"}},[this._v("#")]),this._v(" Available Events")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("on")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'EVENT-NAME'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("some"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" argument"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// do something")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"components"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#components","aria-hidden":"true"}},[this._v("#")]),this._v(" Components")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("component:add")]),t._v(" - Triggered when a new component is added to the editor, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:remove")]),t._v(" - Triggered when a component is removed, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:clone")]),t._v(" - Triggered when a new component is added by a clone command, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:update")]),t._v(" - Triggered when a component is updated (moved, styled, etc.), the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:update:{propertyName}")]),t._v(" - Listen any property change, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:styleUpdate")]),t._v(" - Triggered when the style of the component is updated, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:styleUpdate:{propertyName}")]),t._v(" - Listen for a specific style property change, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:selected")]),t._v(" - New component selected, the selected model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:deselected")]),t._v(" - Component deselected, the deselected model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:toggled")]),t._v(" - Component selection changed, toggled model is passed as an argument to the callback")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"blocks"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#blocks","aria-hidden":"true"}},[this._v("#")]),this._v(" Blocks")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("block:add")]),t._v(" - New block added")]),a("li",[a("code",[t._v("block:remove")]),t._v(" - Block removed")]),a("li",[a("code",[t._v("block:drag:start")]),t._v(" - Started dragging block, model of the block is passed as an argument")]),a("li",[a("code",[t._v("block:drag")]),t._v(" - Dragging block, the block's model and the drag event are passed as arguments")]),a("li",[a("code",[t._v("block:drag:stop")]),t._v(" - Dragging of the block is stopped. As agruments for the callback you get, the dropped component model (if dropped successfully) and the model of the block")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"assets"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#assets","aria-hidden":"true"}},[this._v("#")]),this._v(" Assets")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("asset:add")]),t._v(" - New asset added")]),a("li",[a("code",[t._v("asset:remove")]),t._v(" - Asset removed")]),a("li",[a("code",[t._v("asset:upload:start")]),t._v(" - Before the upload is started")]),a("li",[a("code",[t._v("asset:upload:end")]),t._v(" - After the upload is ended")]),a("li",[a("code",[t._v("asset:upload:error")]),t._v(" - On any error in upload, passes the error as an argument")]),a("li",[a("code",[t._v("asset:upload:response")]),t._v(" - On upload response, passes the result as an argument")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"keymaps"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#keymaps","aria-hidden":"true"}},[this._v("#")]),this._v(" Keymaps")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("keymap:add")]),t._v(" - New keymap added. The new keyamp object is passed as an argument")]),a("li",[a("code",[t._v("keymap:remove")]),t._v(" - Keymap removed. The removed keyamp object is passed as an argument")]),a("li",[a("code",[t._v("keymap:emit")]),t._v(" - Some keymap emitted, in arguments you get keymapId, shortcutUsed, Event")]),a("li",[a("code",[t._v("keymap:emit:{keymapId}")]),t._v(" - "),a("code",[t._v("keymapId")]),t._v(" emitted, in arguments you get keymapId, shortcutUsed, Event")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"style-manager"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#style-manager","aria-hidden":"true"}},[this._v("#")]),this._v(" Style Manager")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("styleManager:change")]),this._v(" - Triggered on style property change from new selected component, the view of the property is passed as an argument to the callback")]),e("li",[e("code",[this._v("styleManager:change:{propertyName}")]),this._v(" - As above but for a specific style property")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"storages"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#storages","aria-hidden":"true"}},[this._v("#")]),this._v(" Storages")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("storage:start")]),t._v(" - Before the storage request is started")]),a("li",[a("code",[t._v("storage:start:store")]),t._v(" - Before the store request. The object to store is passed as an argumnet (which you can edit)")]),a("li",[a("code",[t._v("storage:start:load")]),t._v(" - Before the load request. Items to load are passed as an argumnet (which you can edit)")]),a("li",[a("code",[t._v("storage:load")]),t._v(" - Triggered when something was loaded from the storage, loaded object passed as an argumnet")]),a("li",[a("code",[t._v("storage:store")]),t._v(" - Triggered when something is stored to the storage, stored object passed as an argumnet")]),a("li",[a("code",[t._v("storage:end")]),t._v(" - After the storage request is ended")]),a("li",[a("code",[t._v("storage:end:store")]),t._v(" - After the store request")]),a("li",[a("code",[t._v("storage:end:load")]),t._v(" - After the load request")]),a("li",[a("code",[t._v("storage:error")]),t._v(" - On any error on storage request, passes the error as an argument")]),a("li",[a("code",[t._v("storage:error:store")]),t._v(" - Error on store request, passes the error as an argument")]),a("li",[a("code",[t._v("storage:error:load")]),t._v(" - Error on load request, passes the error as an argument")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"canvas"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#canvas","aria-hidden":"true"}},[this._v("#")]),this._v(" Canvas")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("canvas:dragenter")]),t._v(" - When something is dragged inside the canvas, "),a("code",[t._v("DataTransfer")]),t._v(" instance passed as an argument")]),a("li",[a("code",[t._v("canvas:dragover")]),t._v(" - When something is dragging on canvas, "),a("code",[t._v("DataTransfer")]),t._v(" instance passed as an argument")]),a("li",[a("code",[t._v("canvas:drop")]),t._v(" - Something is dropped in canvas, "),a("code",[t._v("DataTransfer")]),t._v(" instance and the dropped model are passed as arguments")]),a("li",[a("code",[t._v("canvas:dragend")]),t._v(" - When a drag operation is ended, "),a("code",[t._v("DataTransfer")]),t._v(" instance passed as an argument")]),a("li",[a("code",[t._v("canvas:dragdata")]),t._v(" - On any dataTransfer parse, "),a("code",[t._v("DataTransfer")]),t._v(" instance and the "),a("code",[t._v("result")]),t._v(" are passed as arguments.\nBy changing "),a("code",[t._v("result.content")]),t._v(" you're able to customize what is dropped")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"selectors"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#selectors","aria-hidden":"true"}},[this._v("#")]),this._v(" Selectors")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("selector:add")]),this._v(" - Triggers when a new selector/class is created")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"rte"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#rte","aria-hidden":"true"}},[this._v("#")]),this._v(" RTE")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("rte:enable")]),this._v(" - RTE enabled. The view, on which RTE is enabled, is passed as an argument")]),e("li",[e("code",[this._v("rte:disable")]),this._v(" - RTE disabled. The view, on which RTE is disabled, is passed as an argument")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"commands"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#commands","aria-hidden":"true"}},[this._v("#")]),this._v(" Commands")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("run:{commandName}")]),t._v(" - Triggered when some command is called to run (eg. editor.runCommand('preview'))")]),a("li",[a("code",[t._v("stop:{commandName}")]),t._v(" - Triggered when some command is called to stop (eg. editor.stopCommand('preview'))")]),a("li",[a("code",[t._v("run:{commandName}:before")]),t._v(" - Triggered before the command is called")]),a("li",[a("code",[t._v("stop:{commandName}:before")]),t._v(" - Triggered before the command is called to stop")]),a("li",[a("code",[t._v("abort:{commandName}")]),t._v(" - Triggered when the command execution is aborted ("),a("code",[t._v("editor.on(")]),t._v("run:preview:before"),a("code",[t._v(", opts => opts.abort = 1);")]),t._v(")")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"general"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#general","aria-hidden":"true"}},[this._v("#")]),this._v(" General")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("canvasScroll")]),t._v(" - Triggered when the canvas is scrolle")]),a("li",[a("code",[t._v("undo")]),t._v(" - Undo executed")]),a("li",[a("code",[t._v("redo")]),t._v(" - Redo executed")]),a("li",[a("code",[t._v("load")]),t._v(" - When the editor is loaded")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getconfig"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getconfig","aria-hidden":"true"}},[this._v("#")]),this._v(" getConfig")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("any")]),this._v(" Returns the configuration object or\nthe value of the specified property")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"gethtml"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gethtml","aria-hidden":"true"}},[this._v("#")]),this._v(" getHtml")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("opts")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getcss"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcss","aria-hidden":"true"}},[this._v("#")]),this._v(" getCss")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getjs"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getjs","aria-hidden":"true"}},[this._v("#")]),this._v(" getJs")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getcomponents"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcomponents","aria-hidden":"true"}},[this._v("#")]),this._v(" getComponents")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setcomponents"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setcomponents","aria-hidden":"true"}},[this._v("#")]),this._v(" setComponents")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setComponents")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'
    New component
    '")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// or")]),t._v("\neditor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setComponents")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n type"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'text'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n classes"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'cls'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n content"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'New component'")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addcomponents"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addcomponents","aria-hidden":"true"}},[this._v("#")]),this._v(" addComponents")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addComponents")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'
    New component
    '")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// or")]),t._v("\neditor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addComponents")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n type"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'text'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n classes"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'cls'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n content"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'New component'")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getstyle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getstyle","aria-hidden":"true"}},[this._v("#")]),this._v(" getStyle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setstyle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setstyle","aria-hidden":"true"}},[this._v("#")]),this._v(" setStyle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setStyle")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'.cls{color: red}'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("//or")]),t._v("\neditor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setStyle")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n selectors"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'cls'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n style"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getselected"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getselected","aria-hidden":"true"}},[this._v("#")]),this._v(" getSelected")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Model")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getselectedall"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getselectedall","aria-hidden":"true"}},[this._v("#")]),this._v(" getSelectedAll")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getselectedtostyle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getselectedtostyle","aria-hidden":"true"}},[this._v("#")]),this._v(" getSelectedToStyle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Model")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"select"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#select","aria-hidden":"true"}},[this._v("#")]),this._v(" select")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token comment"}},[t._v("// Select dropped block")]),t._v("\neditor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("on")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'block:drag:stop'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("function")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("select")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"selectadd"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#selectadd","aria-hidden":"true"}},[this._v("#")]),this._v(" selectAdd")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("selectAdd")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"selectremove"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#selectremove","aria-hidden":"true"}},[this._v("#")]),this._v(" selectRemove")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-9","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("selectRemove")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"selecttoggle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#selecttoggle","aria-hidden":"true"}},[this._v("#")]),this._v(" selectToggle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-10","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("selectToggle")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setdevice"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setdevice","aria-hidden":"true"}},[this._v("#")]),this._v(" setDevice")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-11"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-11","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setDevice")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'Tablet'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getdevice"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getdevice","aria-hidden":"true"}},[this._v("#")]),this._v(" getDevice")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-9","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" device "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getDevice")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("log")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// 'Tablet'")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"runcommand"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#runcommand","aria-hidden":"true"}},[this._v("#")]),this._v(" runCommand")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-12"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-12","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-10","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("runCommand")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myCommand'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("someValue"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token number"}},[t._v("1")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("any")]),this._v(" The return is defined by the command")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"stopcommand"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#stopcommand","aria-hidden":"true"}},[this._v("#")]),this._v(" stopCommand")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-13"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-13","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-11"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-11","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("stopCommand")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myCommand'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("someValue"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token number"}},[t._v("1")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("any")]),this._v(" The return is defined by the command")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"store"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#store","aria-hidden":"true"}},[this._v("#")]),this._v(" store")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-14"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-14","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"load"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#load","aria-hidden":"true"}},[this._v("#")]),this._v(" load")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-15"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-15","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getcontainer"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcontainer","aria-hidden":"true"}},[this._v("#")]),this._v(" getContainer")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getdirtycount"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getdirtycount","aria-hidden":"true"}},[this._v("#")]),this._v(" getDirtyCount")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Return the count of changes made to the content and not yet stored.\nThis count resets at any "),e("code",[this._v("store()")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setcustomrte"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setcustomrte","aria-hidden":"true"}},[this._v("#")]),this._v(" setCustomRte")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-16"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-16","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-12"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-12","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setCustomRte")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// Function for enabling custom RTE")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// el is the HTMLElement of the double clicked Text Component")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// rte is the same instance you have returned the first time you call")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// enable(). This is useful if need to check if the RTE is already enabled so")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// ion this case you'll need to return the RTE and the end of the function")]),t._v("\n enable"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("function")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rte"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n rte "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{attrs:{class:"token class-name"}},[t._v("MyCustomRte")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// this depends on the Custom RTE API")]),t._v("\n "),a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n "),a("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" rte"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// return the RTE instance")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),a("span",{attrs:{class:"token comment"}},[t._v("// Disable the editor, called for example when you unfocus the Text Component")]),t._v("\n disable"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("function")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rte"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n rte"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("blur")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// this depends on the Custom RTE API")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Called when the Text Component is focused again. If you returned the RTE instance")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// from the enable function, the enable won't be called again instead will call focus,")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// in this case to avoid double binding of the editor")]),t._v("\n focus"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rte"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n rte"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("focus")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// this depends on the Custom RTE API")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setcustomparsercss"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setcustomparsercss","aria-hidden":"true"}},[this._v("#")]),this._v(" setCustomParserCss")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Replace the default CSS parser with a custom one.\nThe parser function receives a CSS string as a parameter and expects\nan array of CSSRule objects as a result. If you need to remove the\ncustom parser, pass "),e("code",[this._v("null")]),this._v(" as the argument")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-17"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-17","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-13"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-13","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setCustomParserCss")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("css "),a("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" result "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// ... parse the CSS string")]),t._v("\n result"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("push")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n selectors"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'.someclass, div .otherclass'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n style"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),a("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" result"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"log"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#log","aria-hidden":"true"}},[this._v("#")]),this._v(" log")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-18"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-18","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("msg")]),e("strong",[this._v("any")]),this._v(" Message to log")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-14"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-14","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("log")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'Something done!'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ns"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'from-plugin-x'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" level"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'info'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// This will trigger following events")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// `log`, `log:info`, `log-from-plugin-x`, `log-from-plugin-x:info`")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Callbacks of those events will always receive the message and")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// options, as arguments, eg:")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// editor.on('log:info', (msg, opts) => console.info(msg, opts))")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"on"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#on","aria-hidden":"true"}},[this._v("#")]),this._v(" on")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-19"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-19","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"off"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#off","aria-hidden":"true"}},[this._v("#")]),this._v(" off")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-20"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-20","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"trigger"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#trigger","aria-hidden":"true"}},[this._v("#")]),this._v(" trigger")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-21"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-21","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"destroy"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#destroy","aria-hidden":"true"}},[this._v("#")]),this._v(" destroy")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"render"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#render","aria-hidden":"true"}},[this._v("#")]),this._v(" render")])}],!1,null,null,null);n.options.__file="editor.md";e.default=n.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/29.245014e9.js b/docs/assets/js/29.245014e9.js deleted file mode 100644 index 4e732666d..000000000 --- a/docs/assets/js/29.245014e9.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{229:function(t,e,a){"use strict";a.r(e);var r=a(1),s=Object(r.a)({},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("With Style Manager you build categories (called sectors) of CSS properties which could be used to customize the style of components.\nYou can customize the initial state of the module from the editor initialization, by passing the following "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/style_manager/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._m(1),a("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),a("p",[t._v("Get configuration object")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(5),a("p",[t._v("Add new sector to the collection. If the sector with the same id already exists,\nthat one will be returned")]),t._m(6),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Sector id")]),a("li",[a("code",[t._v("sector")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Object representing sector\n"),a("ul",[a("li",[a("code",[t._v("sector.name")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Sector's label (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("sector.open")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)]),t._v(" Indicates if the sector should be opened (optional, default "),a("code",[t._v("true")]),t._v(")")]),a("li",[a("code",[t._v("sector.properties")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(">")]),t._v(" Array of properties (optional, default "),a("code",[t._v("[]")]),t._v(")")])])])]),t._m(7),t._m(8),t._m(9),t._m(10),a("p",[t._v("Get sector by id")]),t._m(11),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Sector id")])]),t._m(12),t._m(13),t._m(14),t._m(15),a("p",[t._v("Remove a sector by id")]),t._m(16),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Sector id")])]),t._m(17),t._m(18),t._m(19),t._m(20),a("p",[t._v("Get all sectors")]),t._m(21),t._m(22),a("p",[t._v("Add property to the sector identified by id")]),t._m(23),a("ul",[a("li",[a("code",[t._v("sectorId")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Sector id")]),a("li",[a("code",[t._v("property")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Property object\n"),a("ul",[a("li",[a("code",[t._v("property.name")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Name of the property (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("property.property")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" CSS property, eg. "),a("code",[t._v("min-height")]),t._v(" (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("property.type")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Type of the property: integer | radio | select | color | file | composite | stack (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("property.units")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(">")]),t._v(" Unit of measure available, eg. ['px','%','em']. Only for integer type (optional, default "),a("code",[t._v("[]")]),t._v(")")]),a("li",[a("code",[t._v("property.unit")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Default selected unit from "),a("code",[t._v("units")]),t._v(". Only for integer type (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("property.min")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("number"),a("OutboundLink")],1)]),t._v(" Min possible value. Only for integer type (optional, default "),a("code",[t._v("null")]),t._v(")")]),a("li",[a("code",[t._v("property.max")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("number"),a("OutboundLink")],1)]),t._v(" Max possible value. Only for integer type (optional, default "),a("code",[t._v("null")]),t._v(")")]),a("li",[a("code",[t._v("property.defaults")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Default value (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("property.info")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Some description (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("property.icon")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Class name. If exists no text will be displayed (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("property.preview")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)]),t._v(" Show layers preview. Only for stack type (optional, default "),a("code",[t._v("false")]),t._v(")")]),a("li",[a("code",[t._v("property.functionName")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Indicates if value need to be wrapped in some function, for istance "),a("code",[t._v("transform: rotate(90deg)")]),t._v(" (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("property.properties")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(">")]),t._v(" Nested properties for composite and stack type (optional, default "),a("code",[t._v("[]")]),t._v(")")]),a("li",[a("code",[t._v("property.layers")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(">")]),t._v(" Layers for stack properties (optional, default "),a("code",[t._v("[]")]),t._v(")")]),a("li",[a("code",[t._v("property.list")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(">")]),t._v(" List of possible options for radio and select types (optional, default "),a("code",[t._v("[]")]),t._v(")")])])])]),t._m(24),t._m(25),t._m(26),t._m(27),a("p",[t._v("Get property by its CSS name and sector id")]),t._m(28),a("ul",[a("li",[a("code",[t._v("sectorId")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Sector id")]),a("li",[a("code",[t._v("name")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" CSS property name, eg. 'min-height'")])]),t._m(29),t._m(30),t._m(31),t._m(32),a("p",[t._v("Remove a property from the sector")]),t._m(33),a("ul",[a("li",[a("code",[t._v("sectorId")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Sector id")]),a("li",[a("code",[t._v("name")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" CSS property name, eg. 'min-height'")])]),t._m(34),t._m(35),t._m(36),t._m(37),a("p",[t._v("Get properties of the sector")]),t._m(38),a("ul",[a("li",[a("code",[t._v("sectorId")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Sector id")])]),t._m(39),t._m(40),t._m(41),t._m(42),a("p",[t._v("Get what to style inside Style Manager. If you select the component\nwithout classes the entity is the Component itself and all changes will\ngo inside its 'style' property. Otherwise, if the selected component has\none or more classes, the function will return the corresponding CSS Rule")]),t._m(43),t._m(44),t._m(45),t._m(46),a("p",[t._v("Add new property type")]),t._m(47),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Type ID")]),a("li",[a("code",[t._v("definition")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Definition of the type. Each definition contains\n"),a("code",[t._v("model")]),t._v(" (business logic), "),a("code",[t._v("view")]),t._v(" (presentation logic)\nand "),a("code",[t._v("isType")]),t._v(" function which recognize the type of the\npassed entity")])]),t._m(48),t._m(49),t._m(50),a("p",[t._v("Get type")]),t._m(51),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Type ID")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Type definition")]),t._m(52),a("p",[t._v("Get all types")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)])]),t._m(53),a("p",[t._v("Create new property from type")]),t._m(54),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Type ID")]),a("li",[a("code",[t._v("options")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options (optional, default "),a("code",[t._v("{}")]),t._v(")\n"),a("ul",[a("li",[a("code",[t._v("options.model")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom model object (optional, default "),a("code",[t._v("{}")]),t._v(")")]),a("li",[a("code",[t._v("options.view")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom view object (optional, default "),a("code",[t._v("{}")]),t._v(")")])])])]),t._m(55),t._m(56),t._m(57)])},[function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"stylemanager"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#stylemanager","aria-hidden":"true"}},[this._v("#")]),this._v(" StyleManager")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("init")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n styleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" styleManager "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("StyleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("a",{attrs:{href:"#getconfig"}},[t._v("getConfig")])]),a("li",[a("a",{attrs:{href:"#addsector"}},[t._v("addSector")])]),a("li",[a("a",{attrs:{href:"#getsector"}},[t._v("getSector")])]),a("li",[a("a",{attrs:{href:"#removesector"}},[t._v("removeSector")])]),a("li",[a("a",{attrs:{href:"#getsectors"}},[t._v("getSectors")])]),a("li",[a("a",{attrs:{href:"#addproperty"}},[t._v("addProperty")])]),a("li",[a("a",{attrs:{href:"#getproperty"}},[t._v("getProperty")])]),a("li",[a("a",{attrs:{href:"#removeproperty"}},[t._v("removeProperty")])]),a("li",[a("a",{attrs:{href:"#getproperties"}},[t._v("getProperties")])]),a("li",[a("a",{attrs:{href:"#getmodeltostyle"}},[t._v("getModelToStyle")])]),a("li",[a("a",{attrs:{href:"#getmodeltostyle"}},[t._v("getModelToStyle")])]),a("li",[a("a",{attrs:{href:"#addtype"}},[t._v("addType")])]),a("li",[a("a",{attrs:{href:"#gettype"}},[t._v("getType")])]),a("li",[a("a",{attrs:{href:"#gettypes"}},[t._v("getTypes")])]),a("li",[a("a",{attrs:{href:"#createtype"}},[t._v("createType")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getconfig"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getconfig","aria-hidden":"true"}},[this._v("#")]),this._v(" getConfig")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addsector"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addsector","aria-hidden":"true"}},[this._v("#")]),this._v(" addSector")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sector "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addSector")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'mySector'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n name"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'My sector'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n open"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token boolean"}},[t._v("true")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n properties"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" name"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'My property'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Sector")]),this._v(" Added Sector")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getsector"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getsector","aria-hidden":"true"}},[this._v("#")]),this._v(" getSector")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sector "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getSector")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'mySector'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("(Sector | null)")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"removesector"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#removesector","aria-hidden":"true"}},[this._v("#")]),this._v(" removeSector")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" removed "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("removeSector")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'mySector'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Sector")]),this._v(" Removed sector")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getsectors"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getsectors","aria-hidden":"true"}},[this._v("#")]),this._v(" getSectors")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Sectors")]),this._v(" Collection of sectors")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addproperty"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addproperty","aria-hidden":"true"}},[this._v("#")]),this._v(" addProperty")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" property "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addProperty")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'mySector'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n name"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Minimum height'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n property"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'min-height'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n type"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'select'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n defaults"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'100px'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n list"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n value"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'100px'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n name"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'100'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n value"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'200px'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n name"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'200'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("(Property | null)")]),this._v(" Added Property or "),e("code",[this._v("null")]),this._v(" in case sector doesn't exist")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getproperty"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getproperty","aria-hidden":"true"}},[this._v("#")]),this._v(" getProperty")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" property "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getProperty")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'mySector'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{attrs:{class:"token string"}},[t._v("'min-height'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("(Property | null)")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"removeproperty"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#removeproperty","aria-hidden":"true"}},[this._v("#")]),this._v(" removeProperty")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" property "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("removeProperty")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'mySector'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'min-height'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Property")]),this._v(" Removed property")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getproperties"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getproperties","aria-hidden":"true"}},[this._v("#")]),this._v(" getProperties")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" properties "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getProperties")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'mySector'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Properties")]),this._v(" Collection of properties")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getmodeltostyle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getmodeltostyle","aria-hidden":"true"}},[this._v("#")]),this._v(" getModelToStyle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("model")]),e("strong",[this._v("Model")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Model")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addtype"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addtype","aria-hidden":"true"}},[this._v("#")]),this._v(" addType")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-9","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("styleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addType")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'my-type'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n isType"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value "),a("span",{attrs:{class:"token operator"}},[t._v("&&")]),t._v(" value"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("type "),a("span",{attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'my-type'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" value"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"gettype"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gettype","aria-hidden":"true"}},[this._v("#")]),this._v(" getType")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-10","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"gettypes"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gettypes","aria-hidden":"true"}},[this._v("#")]),this._v(" getTypes")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"createtype"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#createtype","aria-hidden":"true"}},[this._v("#")]),this._v(" createType")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-11"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-11","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-9","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" propView "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("createType")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'integer'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("units"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'px'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'rem'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\npropView"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("render")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\npropView"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("on")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'change:value'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token operator"}},[t._v("...")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nsomeContainer"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("appendChild")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("propView"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("el"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("PropertyView")])])}],!1,null,null,null);s.options.__file="style_manager.md";e.default=s.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/29.618f6056.js b/docs/assets/js/29.618f6056.js new file mode 100644 index 000000000..7eb8d58b1 --- /dev/null +++ b/docs/assets/js/29.618f6056.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{229:function(t,e,a){"use strict";a.r(e);var r=a(1),s=Object(r.a)({},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("With Style Manager you build categories (called sectors) of CSS properties which could be used to customize the style of components.\nYou can customize the initial state of the module from the editor initialization, by passing the following "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/style_manager/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._m(1),a("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),a("p",[t._v("Get configuration object")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(5),a("p",[t._v("Add new sector to the collection. If the sector with the same id already exists,\nthat one will be returned")]),t._m(6),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Sector id")]),a("li",[a("code",[t._v("sector")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Object representing sector\n"),a("ul",[a("li",[a("code",[t._v("sector.name")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Sector's label (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("sector.open")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)]),t._v(" Indicates if the sector should be opened (optional, default "),a("code",[t._v("true")]),t._v(")")]),a("li",[a("code",[t._v("sector.properties")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(">")]),t._v(" Array of properties (optional, default "),a("code",[t._v("[]")]),t._v(")")])])])]),t._m(7),t._m(8),t._m(9),t._m(10),a("p",[t._v("Get sector by id")]),t._m(11),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Sector id")])]),t._m(12),t._m(13),t._m(14),t._m(15),a("p",[t._v("Remove a sector by id")]),t._m(16),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Sector id")])]),t._m(17),t._m(18),t._m(19),t._m(20),a("p",[t._v("Get all sectors")]),t._m(21),t._m(22),a("p",[t._v("Add property to the sector identified by id")]),t._m(23),a("ul",[a("li",[a("code",[t._v("sectorId")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Sector id")]),a("li",[a("code",[t._v("property")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Property object\n"),a("ul",[a("li",[a("code",[t._v("property.name")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Name of the property (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("property.property")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" CSS property, eg. "),a("code",[t._v("min-height")]),t._v(" (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("property.type")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Type of the property: integer | radio | select | color | file | composite | stack (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("property.units")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(">")]),t._v(" Unit of measure available, eg. ['px','%','em']. Only for integer type (optional, default "),a("code",[t._v("[]")]),t._v(")")]),a("li",[a("code",[t._v("property.unit")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Default selected unit from "),a("code",[t._v("units")]),t._v(". Only for integer type (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("property.min")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("number"),a("OutboundLink")],1)]),t._v(" Min possible value. Only for integer type (optional, default "),a("code",[t._v("null")]),t._v(")")]),a("li",[a("code",[t._v("property.max")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("number"),a("OutboundLink")],1)]),t._v(" Max possible value. Only for integer type (optional, default "),a("code",[t._v("null")]),t._v(")")]),a("li",[a("code",[t._v("property.defaults")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Default value (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("property.info")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Some description (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("property.icon")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Class name. If exists no text will be displayed (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("property.preview")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)]),t._v(" Show layers preview. Only for stack type (optional, default "),a("code",[t._v("false")]),t._v(")")]),a("li",[a("code",[t._v("property.functionName")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Indicates if value need to be wrapped in some function, for istance "),a("code",[t._v("transform: rotate(90deg)")]),t._v(" (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("property.properties")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(">")]),t._v(" Nested properties for composite and stack type (optional, default "),a("code",[t._v("[]")]),t._v(")")]),a("li",[a("code",[t._v("property.layers")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(">")]),t._v(" Layers for stack properties (optional, default "),a("code",[t._v("[]")]),t._v(")")]),a("li",[a("code",[t._v("property.list")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(">")]),t._v(" List of possible options for radio and select types (optional, default "),a("code",[t._v("[]")]),t._v(")")])])])]),t._m(24),t._m(25),t._m(26),t._m(27),a("p",[t._v("Get property by its CSS name and sector id")]),t._m(28),a("ul",[a("li",[a("code",[t._v("sectorId")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Sector id")]),a("li",[a("code",[t._v("name")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" CSS property name, eg. 'min-height'")])]),t._m(29),t._m(30),t._m(31),t._m(32),a("p",[t._v("Remove a property from the sector")]),t._m(33),a("ul",[a("li",[a("code",[t._v("sectorId")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Sector id")]),a("li",[a("code",[t._v("name")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" CSS property name, eg. 'min-height'")])]),t._m(34),t._m(35),t._m(36),t._m(37),a("p",[t._v("Get properties of the sector")]),t._m(38),a("ul",[a("li",[a("code",[t._v("sectorId")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Sector id")])]),t._m(39),t._m(40),t._m(41),t._m(42),a("p",[t._v("Get what to style inside Style Manager. If you select the component\nwithout classes the entity is the Component itself and all changes will\ngo inside its 'style' property. Otherwise, if the selected component has\none or more classes, the function will return the corresponding CSS Rule")]),t._m(43),t._m(44),t._m(45),t._m(46),a("p",[t._v("Add new property type")]),t._m(47),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Type ID")]),a("li",[a("code",[t._v("definition")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Definition of the type. Each definition contains\n"),a("code",[t._v("model")]),t._v(" (business logic), "),a("code",[t._v("view")]),t._v(" (presentation logic)\nand "),a("code",[t._v("isType")]),t._v(" function which recognize the type of the\npassed entity")])]),t._m(48),t._m(49),t._m(50),a("p",[t._v("Get type")]),t._m(51),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Type ID")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Type definition")]),t._m(52),a("p",[t._v("Get all types")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)])]),t._m(53),a("p",[t._v("Create new property from type")]),t._m(54),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Type ID")]),a("li",[a("code",[t._v("options")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options (optional, default "),a("code",[t._v("{}")]),t._v(")\n"),a("ul",[a("li",[a("code",[t._v("options.model")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom model object (optional, default "),a("code",[t._v("{}")]),t._v(")")]),a("li",[a("code",[t._v("options.view")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom view object (optional, default "),a("code",[t._v("{}")]),t._v(")")])])])]),t._m(55),t._m(56),t._m(57),t._m(58),a("p",[t._v("Select different target for the Style Manager.\nIt could be a Component, CSSRule, or a string of any CSS selector")]),t._m(59),a("ul",[a("li",[a("code",[t._v("target")]),a("strong",[t._v("(Component | CSSRule | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")")])]),t._m(60)]),t._m(61)])},[function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"stylemanager"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#stylemanager","aria-hidden":"true"}},[this._v("#")]),this._v(" StyleManager")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("init")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n styleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" styleManager "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("StyleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("a",{attrs:{href:"#getconfig"}},[t._v("getConfig")])]),a("li",[a("a",{attrs:{href:"#addsector"}},[t._v("addSector")])]),a("li",[a("a",{attrs:{href:"#getsector"}},[t._v("getSector")])]),a("li",[a("a",{attrs:{href:"#removesector"}},[t._v("removeSector")])]),a("li",[a("a",{attrs:{href:"#getsectors"}},[t._v("getSectors")])]),a("li",[a("a",{attrs:{href:"#addproperty"}},[t._v("addProperty")])]),a("li",[a("a",{attrs:{href:"#getproperty"}},[t._v("getProperty")])]),a("li",[a("a",{attrs:{href:"#removeproperty"}},[t._v("removeProperty")])]),a("li",[a("a",{attrs:{href:"#getproperties"}},[t._v("getProperties")])]),a("li",[a("a",{attrs:{href:"#getmodeltostyle"}},[t._v("getModelToStyle")])]),a("li",[a("a",{attrs:{href:"#getmodeltostyle"}},[t._v("getModelToStyle")])]),a("li",[a("a",{attrs:{href:"#addtype"}},[t._v("addType")])]),a("li",[a("a",{attrs:{href:"#gettype"}},[t._v("getType")])]),a("li",[a("a",{attrs:{href:"#gettypes"}},[t._v("getTypes")])]),a("li",[a("a",{attrs:{href:"#createtype"}},[t._v("createType")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getconfig"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getconfig","aria-hidden":"true"}},[this._v("#")]),this._v(" getConfig")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addsector"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addsector","aria-hidden":"true"}},[this._v("#")]),this._v(" addSector")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sector "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addSector")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'mySector'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n name"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'My sector'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n open"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token boolean"}},[t._v("true")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n properties"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" name"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'My property'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Sector")]),this._v(" Added Sector")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getsector"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getsector","aria-hidden":"true"}},[this._v("#")]),this._v(" getSector")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sector "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getSector")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'mySector'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("(Sector | null)")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"removesector"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#removesector","aria-hidden":"true"}},[this._v("#")]),this._v(" removeSector")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" removed "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("removeSector")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'mySector'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Sector")]),this._v(" Removed sector")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getsectors"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getsectors","aria-hidden":"true"}},[this._v("#")]),this._v(" getSectors")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Sectors")]),this._v(" Collection of sectors")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addproperty"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addproperty","aria-hidden":"true"}},[this._v("#")]),this._v(" addProperty")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" property "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addProperty")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'mySector'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n name"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Minimum height'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n property"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'min-height'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n type"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'select'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n defaults"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'100px'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n list"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n value"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'100px'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n name"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'100'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n value"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'200px'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n name"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'200'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("(Property | null)")]),this._v(" Added Property or "),e("code",[this._v("null")]),this._v(" in case sector doesn't exist")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getproperty"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getproperty","aria-hidden":"true"}},[this._v("#")]),this._v(" getProperty")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" property "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getProperty")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'mySector'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{attrs:{class:"token string"}},[t._v("'min-height'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("(Property | null)")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"removeproperty"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#removeproperty","aria-hidden":"true"}},[this._v("#")]),this._v(" removeProperty")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" property "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("removeProperty")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'mySector'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'min-height'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Property")]),this._v(" Removed property")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getproperties"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getproperties","aria-hidden":"true"}},[this._v("#")]),this._v(" getProperties")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" properties "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getProperties")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'mySector'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Properties")]),this._v(" Collection of properties")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getmodeltostyle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getmodeltostyle","aria-hidden":"true"}},[this._v("#")]),this._v(" getModelToStyle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("model")]),e("strong",[this._v("Model")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Model")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addtype"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addtype","aria-hidden":"true"}},[this._v("#")]),this._v(" addType")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-9","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("styleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addType")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'my-type'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n isType"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value "),a("span",{attrs:{class:"token operator"}},[t._v("&&")]),t._v(" value"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("type "),a("span",{attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'my-type'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" value"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"gettype"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gettype","aria-hidden":"true"}},[this._v("#")]),this._v(" getType")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-10","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"gettypes"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gettypes","aria-hidden":"true"}},[this._v("#")]),this._v(" getTypes")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"createtype"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#createtype","aria-hidden":"true"}},[this._v("#")]),this._v(" createType")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-11"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-11","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-9","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" propView "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("createType")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'integer'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("units"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'px'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'rem'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\npropView"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("render")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\npropView"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("on")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'change:value'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token operator"}},[t._v("...")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nsomeContainer"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("appendChild")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("propView"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("el"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("PropertyView")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"settarget"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#settarget","aria-hidden":"true"}},[this._v("#")]),this._v(" setTarget")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-12"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-12","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("opts")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Styleable")]),this._v(" A Component or CSSRule")])}],!1,null,null,null);s.options.__file="style_manager.md";e.default=s.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/32.27d2cf79.js b/docs/assets/js/32.27d2cf79.js new file mode 100644 index 000000000..48efe1874 --- /dev/null +++ b/docs/assets/js/32.27d2cf79.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{226:function(t,s,a){"use strict";a.r(s);var n=a(1),o=Object(n.a)({},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"content"},[t._m(0),t._m(1),t._m(2),a("p",[t._v("Before you start using GrapesJS, you'll have to import it. Let's import the latest version")]),t._m(3),a("p",[t._v("or if you're in a Node environment")]),t._m(4),t._m(5),a("p",[t._v("The first step is to define the interface of our editor. For this purpose we gonna start with basic HTML layouts. Finding a common structure for the UI of any project is not an easy task. That's why GrapesJS prefers to keep this process as simple as possible. We provide a few helpers, but let the user define the interface. This guarantees maximum flexibility.\nThe main part of the GrapesJS editor is the canvas, this is where you create the structure of your templates and you can't miss it. Let's try to initiate the editor with the canvas and no panels.")]),t._m(6),t._m(7),t._m(8),a("Demo",[a("DemoCanvasOnly")],1),a("p",[t._v("With just the canvas you're already able to move, copy and delete components from the structure. For now, we see the example template taken from the container. Next let's look at how to create and drag custom blocks into our canvas.")]),t._m(9),a("p",[t._v("The block in GrapesJS is just a reusable piece of HTML that you can drop in the canvas. A block can be an image, a button, or an entire section with videos, forms and iframes. Let's start by creating another container and append a few basic blocks inside of it. Later we can use this technique to build more complex structures.")]),t._m(10),t._m(11),t._m(12),a("Demo",[a("DemoBasicBlocks")],1),a("p",[t._v("As you can see we add our blocks via the initial configuration. Obviously there might be a case in which you would like to add them dynamically, in this case you have to use the "),a("router-link",{attrs:{to:"./api/block_manager.html"}},[t._v("Block Manager API")])],1),t._m(13),a("div",{staticClass:"tip custom-block"},[a("p",{staticClass:"custom-block-title"},[t._v("TIP")]),a("p",[t._v("If you want to learn more about blocks we suggest to read its dedicated article: "),a("router-link",{attrs:{to:"./modules/Blocks.html"}},[t._v("Block Manager Module")])],1)]),t._m(14),a("p",[t._v("Technically, once you drop your HTML block inside the canvas each element of the content is transformed into a GrapesJS Component. A GrapesJS Component is an object containing information about how the element is rendered in the canvas (managed in the View) and how it might look its final code (created by the properties in the Model). Generally, all Model properties are reflected in the View. Therefore, if you add a new attribute to the model, it will be available in the export code (which we will learn more about later), and the element you see in the canvas will be updated with new attributes.\nThis isn't totally out of the ordinary, but the unique thing about Components that you can create a totally decoupled View. This means you can show the user whatever you desire regardless of what is in the Model. For example, by dragging a placeholder text you can fetch and show instead a dynamic content. If you want to learn more about Custom Components, you should check out "),a("router-link",{attrs:{to:"./modules/Components.html"}},[t._v("Component Manager Module")]),t._v(".")],1),a("p",[t._v("GrapesJS comes with a few "),a("router-link",{attrs:{to:"./modules/Components.html#built-in-components"}},[t._v("built-in Components")]),t._v(" that enable different features once rendered in the canvas. For example, by double clicking on an image component you will see the default "),a("router-link",{attrs:{to:"./modules/Assets.html"}},[t._v("Asset Manager")]),t._v(", which you can customize or integrate you own. By double clicking on the text component you're able to edit it via the built-in Rich Text Editor, which is also customization and "),a("router-link",{attrs:{to:"./guides/Replace-Rich-Text-Editor.html"}},[t._v("replaceable")]),t._v(".")],1),a("p",[t._v("As we have seen before you can create Blocks directly as Components")]),t._m(15),a("div",{staticClass:"tip custom-block"},[a("p",{staticClass:"custom-block-title"},[t._v("TIP")]),a("p",[t._v("Check out the "),a("router-link",{attrs:{to:"./api/components.html"}},[t._v("Components API")]),t._v(" to learn how to interact with components dynamically")],1)]),a("p",[t._v("An example on how to select some inner component and replace its children with new contents")]),t._m(16),t._m(17),a("p",[t._v("Now that we have a canvas and custom blocks let's see how to create a new custom panel with some buttons inside (using "),a("router-link",{attrs:{to:"./api/panels.html"}},[t._v("Panels API")]),t._v(") which trigger commands (the core one or custom).")],1),t._m(18),t._m(19),t._m(20),a("Demo",[a("DemoCustomPanels")],1),a("p",[t._v("We have defined where to render the panel with "),a("code",[t._v("el: '#basic-panel'")]),t._v(" and then for each button we added a "),a("code",[t._v("command")]),t._v(" property. The command could be the id, an object with "),a("code",[t._v("run")]),t._v(" and "),a("code",[t._v("stop")]),t._v(" functions or simply a single function.\nTry to use "),a("router-link",{attrs:{to:"./api/commands.html"}},[t._v("Commands")]),t._v(" when possible, they allow you to track actions globally. Commands also execute callbacks before and after their execution (you can even interrupt them).")],1),t._m(21),a("div",{staticClass:"tip custom-block"},[a("p",{staticClass:"custom-block-title"},[t._v("TIP")]),a("p",[t._v("Check out the "),a("router-link",{attrs:{to:"./api/panels.html"}},[t._v("Panels API")]),t._v(" to see all the available methods")],1)]),t._m(22),a("p",[t._v("Another utility tool you might find useful when working with web elements is the layer manger. It's a tree overview of the structure nodes and enables you to manage it easier. To enable it you just have to specify where you want to render it")]),t._m(23),t._m(24),t._m(25),a("Demo",[a("DemoLayers")],1),t._m(26),a("p",[t._v("Once you have defined the structure of the template the next step is the ability to style it. To meet this need GrapesJS includes the Style Manager module which is composed by CSS style properties and sectors. To make it more clear, let's see how to define a basic set.")]),t._m(27),t._m(28),t._m(29),t._m(30),a("Demo",[a("DemoStyle")],1),a("p",[t._v("Inside Style Manager definition we use "),a("code",[t._v("buildProps")]),t._v(" which helps us create common properties from "),a("router-link",{attrs:{to:"./modules/Style-manager.html#built-in-properties"}},[t._v("available built-in objects")]),t._v(" then in "),a("code",[t._v("properties")]),t._v(" we can override same objects (eg. passing another "),a("code",[t._v("name")]),t._v(" to change the label) identified by "),a("code",[t._v("property")]),t._v(" name. As you can see from "),a("code",[t._v("custom-prop")]),t._v(" example it's a matter of defining the CSS "),a("code",[t._v("property")]),t._v(" and the input "),a("code",[t._v("type")]),t._v(". We suggest to check a more complete example of Style Manager properties usage from the "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/gh-pages/demo.html#L1000",target:"_blank",rel:"noopener noreferrer"}},[t._v("webpage preset demo"),a("OutboundLink")],1)],1),a("div",{staticClass:"tip custom-block"},[a("p",{staticClass:"custom-block-title"},[t._v("TIP")]),a("p",[t._v("Check the "),a("router-link",{attrs:{to:"./api/panels.html"}},[t._v("Style Manager API")]),t._v(" to see how to update sectors and properties dynamically")],1)]),t._m(31),a("p",[t._v("Most of the time you would style your components and place them somewhere in the structure, but sometimes your components might need custom attributes or even custom behaviors and for this need you can make use of traits. Traits are commonly used to update HTML element attributes (eg. "),a("code",[t._v("placeholder")]),t._v(" for inputs or "),a("code",[t._v("alt")]),t._v(" for images), but you can also define your own custom traits. Access the selected Component model and do whatever you want. For this guide, we going to show you how to render available traits, for more details on how to extend them we suggest you read the "),a("router-link",{attrs:{to:"./modules/Traits.html"}},[t._v("Trait Manager Module page")]),t._v(".")],1),a("p",[t._v("Let's create a new container for traits. Tell the editor where to render it and update the sidebar switcher")]),t._m(32),t._m(33),a("Demo",[a("DemoTraits")],1),a("p",[t._v("Now if you switch to the Trait panel and select one of the inner components you should see its default traits.")]),t._m(34),a("p",[t._v("GrapesJS implements a module which allows you to work with responsive templates easily. Let's see how to define different devices and a button for device switching")]),t._m(35),t._m(36),t._m(37),a("Demo",[a("DemoDevices")],1),t._m(38),t._m(39),a("p",[t._v("What about the mobile-first approach? You can achieve it by changing your configurations in this way:")]),t._m(40),a("div",{staticClass:"tip custom-block"},[a("p",{staticClass:"custom-block-title"},[t._v("TIP")]),a("p",[t._v("Check out the "),a("router-link",{attrs:{to:"./api/panels.html"}},[t._v("Device Manager API")]),t._v(" to see all the available methods")],1)]),t._m(41),a("p",[t._v("Once you have finished with defining your builder interface the next step would be to setup the storing and loading process.\nGrapesJS implements 2 simple type of storages inside its Storage Manager: The local (by using "),a("code",[t._v("localStorage")]),t._v(", active by default) and the remote one. Those are enough to cover most of the cases, but it's also possible to add new implementations ("),a("a",{attrs:{href:"https://github.com/artf/grapesjs-indexeddb",target:"_blank",rel:"noopener noreferrer"}},[t._v("grapesjs-indexeddb"),a("OutboundLink")],1),t._v(" is a good example).\nLet's see how the default options work")]),t._m(42),t._m(43),a("p",[t._v("Let's look at the configuration required to setup the remote storage")]),t._m(44),a("p",[t._v("As you might noticed, we've left some default options unchanged: Increased changes necessary for autosave triggering and passed remote endpoints.\nIf you prefer you could also disable the autosaving and you can do so using a custom command")]),t._m(45),a("p",[t._v("To get a better overview of the Storage Manager and how you should store/load the template, or how to define new storages you should read the "),a("router-link",{attrs:{to:"./modules/Storage.html"}},[t._v("Storage Manager Module")]),t._v(" page")],1),t._m(46),a("p",[t._v("One last step that might actually improve a lot your editor personality is how it's look visually. To achieve an easy theming we have adapted an atomic design for this purpose. To customize the main palette of colors all you have to do is to change few CSS rules. Alternatively if you include GrapesJS styles via SCSS you can make use of its "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/dev/src/styles/scss/_gjs_variables.scss",target:"_blank",rel:"noopener noreferrer"}},[t._v("internal variables"),a("OutboundLink")],1),t._v(" and declare your variables before the import")]),t._m(47),a("p",[t._v("In case of a simple CSS you'll have to put your rules after the GrapesJS styles.\nTo complete our builder let's customize its color palette and to make it more visually \"readable\" we can replace all button labels with SVG icons")]),t._m(48),a("p",[t._v("and here is our final result")]),a("Demo",{attrs:{id:"final-result"}},[a("DemoTheme")],1)],1)},[function(){var t=this.$createElement,s=this._self._c||t;return s("h1",{attrs:{id:"getting-started"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getting-started","aria-hidden":"true"}},[this._v("#")]),this._v(" Getting Started")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("This is a step-by-step guide for anyone who wants to create their own builder with GrapesJS. This is not a comprehensive guide, just a concise overview of most common modules. Follow along to create a page builder from scratch. Skip to the end of this page to see the "),s("a",{attrs:{href:"#final-result"}},[this._v("final result")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"import-the-library"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#import-the-library","aria-hidden":"true"}},[this._v("#")]),this._v(" Import the library")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("link")]),t._v(" "),a("span",{attrs:{class:"token attr-name"}},[t._v("rel")]),a("span",{attrs:{class:"token attr-value"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("stylesheet"),a("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{attrs:{class:"token attr-name"}},[t._v("href")]),a("span",{attrs:{class:"token attr-value"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("//unpkg.com/grapesjs/dist/css/grapes.min.css"),a("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),a("span",{attrs:{class:"token attr-name"}},[t._v("src")]),a("span",{attrs:{class:"token attr-value"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("//unpkg.com/grapesjs"),a("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{attrs:{class:"token script language-javascript"}}),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v('\x3c!--\nIf you need plugins, put them below the main grapesjs script\n - + @@ -28,6 +28,6 @@ GitHub

    FAQ

    Coming soon

    Edit this page on GitHub
    Last Updated: 7/9/2018, 12:48:25 AM
    - + diff --git a/docs/getting-started.html b/docs/getting-started.html index 8789f7714..0275ea23d 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -9,7 +9,7 @@ - + @@ -27,20 +27,18 @@ Twitter GitHub -

    Getting Started

    This guide is a step-by-step introduction for everyone who wants to start creating its own builder with GrapesJS. This is not a complete guide of all functionalities but just a concise overview of most common modules. -Let's see how to create a completely customized page builder from scratch. The last demo of this page represents the final result

    Import the library

    Before start using GrapesJS you have to import it inside your project, so let's import its latest version

    <link rel="stylesheet" href="//unpkg.com/grapesjs/dist/css/grapes.min.css">
+

    Getting Started

    This is a step-by-step guide for anyone who wants to create their own builder with GrapesJS. This is not a comprehensive guide, just a concise overview of most common modules. Follow along to create a page builder from scratch. Skip to the end of this page to see the final result

    Import the library

    Before you start using GrapesJS, you'll have to import it. Let's import the latest version

    <link rel="stylesheet" href="//unpkg.com/grapesjs/dist/css/grapes.min.css">
 <script src="//unpkg.com/grapesjs"></script>
 <!--
 If you need plugins, put them below the main grapesjs script
 <script src="/path/to/some/plugin.min.js"></script>
 -->
-

    or if you're in node environment

    import 'grapesjs/dist/css/grapes.min.css';
+

    or if you're in a Node environment

    import 'grapesjs/dist/css/grapes.min.css';
 import grapesjs from 'grapesjs';
 // If you need plugins, put them below the main grapesjs script
 // import 'grapesjs-some-plugin';
-

    Start from the canvas

    The first step is to define the interface of our editor and for this purpose we gonna start from basic HTML layouts. -Finding a common structure for the UI of any project is not an easy task that's why GrapesJS prefers to keep this process as simple as possible, by providing just few helpers but letting the user define the whole interface, this guarantees maximum flexibility. -The main part of the GrapesJS editor is the canvas, this is where you gonna create the whole structure of your templates and you definitely can't miss it. Let's try to initiate the editor with just the canvas and no panels.

    <div id="gjs">
+

    Start from the canvas

    The first step is to define the interface of our editor. For this purpose we gonna start with basic HTML layouts. Finding a common structure for the UI of any project is not an easy task. That's why GrapesJS prefers to keep this process as simple as possible. We provide a few helpers, but let the user define the interface. This guarantees maximum flexibility. +The main part of the GrapesJS editor is the canvas, this is where you create the structure of your templates and you can't miss it. Let's try to initiate the editor with the canvas and no panels.

    <div id="gjs">
   <h1>Hello World Component!</h1>
 </div>
 
    const editor = grapesjs.init({
@@ -68,7 +66,7 @@ The main part of the GrapesJS editor is the canvas, this is where you gonna crea
   width: 100%;
   height: 100%;
 }
-

    Hello World Component!

    With just the canvas you're already able to move, copy and delete components from the structure (when you select components in the canvas, the toolbar is shown). For now we just see the example template taken from the container. Let's see now how can we create and drag custom blocks into our canvas.

    Add Blocks

    The block in GrapesJS is just a reusable piece of HTML that you can drop in the canvas. A block can be an image, a button, or an entire section with videos, forms and iframes. Let's start from creating another container and append inside it few basic blocks which we can later use to build more complex structures.




     

    <div id="gjs">
+

    Hello World Component!

    With just the canvas you're already able to move, copy and delete components from the structure. For now, we see the example template taken from the container. Next let's look at how to create and drag custom blocks into our canvas.

    Add Blocks

    The block in GrapesJS is just a reusable piece of HTML that you can drop in the canvas. A block can be an image, a button, or an entire section with videos, forms and iframes. Let's start by creating another container and append a few basic blocks inside of it. Later we can use this technique to build more complex structures.




     

    <div id="gjs">
   ...
 </div>
 <div id="blocks"></div>
@@ -109,13 +107,13 @@ The main part of the GrapesJS editor is the canvas, this is where you gonna crea
   height: auto;
   min-height: auto;
 }
-

    Hello World Component!

    As you see we add our blocks via the initial configuration, which is ok, but obviously there might be the case you would like to add them dynamically, in this case you have to use the Block Manager API

    editor.BlockManager.add('my-block-id', {
+

    Hello World Component!

    As you can see we add our blocks via the initial configuration. Obviously there might be a case in which you would like to add them dynamically, in this case you have to use the Block Manager API

    editor.BlockManager.add('my-block-id', {
   label: '...',
   category: '...',
   // ...
 })
-

    TIP

    If you want to get more about blocks we suggest to read its dedicated page: Block Manager Module

    Define Components

    Technically, once you drop your HTML block inside the canvas each element of the content is transformed in GrapesJS Component, which is an object containing informations about how the element is rendered in the canvas (managed in the View) and how it might look its final code (created by the properties in the Model). Generally, all Model properties are reflected in the View, so, for example, if you add a new attribute to the model, not only it will be available in the export code (will see later how to get it) but also the element you see in the canvas is updated with new attributes. -While this is a common behavior what it's cool about Components that you can create a totally decoupled view and show to the user whatever you desire (so not necessary reflecting the model). For example, by dragging a placeholder text you can fetch and show instead a dynamic content. If want to get more about Custom Components and how to create and extend them, we recommend to check out Component Manager Module.

    GrapesJS comes along with few built-in Components which enable different core features once rendered in canvas. Just to mention few of them, by double clicking on the image component you will see show up the default Asset Manager, which you can customize or integrate you own, by double clicking on the text component you're able to edit it via the built-in Rich Text Editor, which is also customizable and replaceable.

    As we have seen before you can create Blocks directly as Components

    editor.BlockManager.add('my-block-id', {
+

    TIP

    If you want to learn more about blocks we suggest to read its dedicated article: Block Manager Module

    Define Components

    Technically, once you drop your HTML block inside the canvas each element of the content is transformed into a GrapesJS Component. A GrapesJS Component is an object containing information about how the element is rendered in the canvas (managed in the View) and how it might look its final code (created by the properties in the Model). Generally, all Model properties are reflected in the View. Therefore, if you add a new attribute to the model, it will be available in the export code (which we will learn more about later), and the element you see in the canvas will be updated with new attributes. +This isn't totally out of the ordinary, but the unique thing about Components that you can create a totally decoupled View. This means you can show the user whatever you desire regardless of what is in the Model. For example, by dragging a placeholder text you can fetch and show instead a dynamic content. If you want to learn more about Custom Components, you should check out Component Manager Module.

    GrapesJS comes with a few built-in Components that enable different features once rendered in the canvas. For example, by double clicking on an image component you will see the default Asset Manager, which you can customize or integrate you own. By double clicking on the text component you're able to edit it via the built-in Rich Text Editor, which is also customization and replaceable.

    As we have seen before you can create Blocks directly as Components

    editor.BlockManager.add('my-block-id', {
   // ...
   content: {
     tagName: 'div',
@@ -134,7 +132,7 @@ While this is a common behavior what it's cool about Components that you can cre
     ]
   }
 })
-

    TIP

    Check the Components API and see how to interact with components dynamically

    An example on how to select some inner component and replace its children with new contents

    // The wrapper is the root Component
+

    TIP

    Check out the Components API to learn how to interact with components dynamically

    An example on how to select some inner component and replace its children with new contents

    // The wrapper is the root Component
 const wrapper = editor.DomComponents.getWrapper();
 const myComponent = wrapper.find('div.my-component')[0];
 myComponent.components().forEach(component => /* ... do something ... */);
@@ -192,8 +190,8 @@ editor.Panels}
   ],
 });
-

    Hello World Component!

    So, we have defined where to render the panel with el: '#basic-panel' and then for each button we added a command property. The command could be the id, an object with run and stop functions or simply a single function. -Try to use Commands when possible, they allow you to track actions globally and execute also callbacks before and after their execution (you can even interrupt them).

    editor.on('run:export-template:before', opts => {
+

    Hello World Component!

    We have defined where to render the panel with el: '#basic-panel' and then for each button we added a command property. The command could be the id, an object with run and stop functions or simply a single function. +Try to use Commands when possible, they allow you to track actions globally. Commands also execute callbacks before and after their execution (you can even interrupt them).

    editor.on('run:export-template:before', opts => {
   console.log('Before the command run');
   if (0 /* some condition */) {
     opts.abort = 1;
@@ -201,7 +199,7 @@ Try to use Commands when possible, they al
 });
 editor.on('run:export-template', () => console.log('After the command run'));
 editor.on('abort:export-template', () => console.log('Command aborted'));
-

    TIP

    Check the Panels API to see all the available methods

    Layers

    Another utility tool you might find useful when working with web elements is a layer manger. It's just a tree overview of the structure nodes and enables you to manage it easier. To enable it you just have to specify where you want to render it




     
     
     
     
     
     
     
     


    <div class="panel__top">
+

    TIP

    Check out the Panels API to see all the available methods

    Layers

    Another utility tool you might find useful when working with web elements is the layer manger. It's a tree overview of the structure nodes and enables you to manage it easier. To enable it you just have to specify where you want to render it




     
     
     
     
     
     
     
     


    <div class="panel__top">
     <div class="panel__basic-actions"></div>
 </div>
 <div class="editor-row">
@@ -255,7 +253,7 @@ editor.on}]
   }
 });
-

    Hello World Component!

    Style Manager

    Once you have defined the structure of the template probably the next step is the ability to style it. To meet this need GrapesJS includes the Style Manager module which is composed by CSS style properties and sectors. To make it more clear, let's see how to define a basic set.

    Let's start from adding one more panel inside the panel__right and another one in panel__top which will contain a Layer/Style Manager switcher



     




     



    <div class="panel__top">
+

    Hello World Component!

    Style Manager

    Once you have defined the structure of the template the next step is the ability to style it. To meet this need GrapesJS includes the Style Manager module which is composed by CSS style properties and sectors. To make it more clear, let's see how to define a basic set.

    Let's start by adding one more panel inside the panel__right and another one in panel__top which will contain a Layer/Style Manager switcher



     




     



    <div class="panel__top">
     <div class="panel__basic-actions"></div>
     <div class="panel__switcher"></div>
 </div>
@@ -370,7 +368,7 @@ editor.Commands.style.display = 'none';
   },
 });
-

    Hello World Component!

    Inside Style Manager definition we use buildProps which helps us create common properties from available built-in objects then in properties we can override same objects (eg. passing another name to change the label) identified by property name. As you can see from custom-prop example it's a matter of defining the CSS property and the input type. We suggest to check a more complete example of Style Manager properties usage from the webpage preset demo

    TIP

    Check the Style Manager API to see how to update sectors and properties dynamically

    Traits

    Most of the time you would style your components and place them somewhere in the structure, but sometimes your components might need custom attributes or even custom behaviors and for this need you can make use of traits. A common use of traits is the ability to update HTML element attributes (eg. placeholder for inputs or alt for images) but you can also define your own custom traits, access the selected Component model and do whatever you want. For this guide, we just gonna show you how to render available traits, for more details on how to extend them we suggest to read the Trait Manager Module page.

    Let's create a new container for traits, tell the editor where to render it and update the sidebar switcher





     



    ...
+

    Hello World Component!

    Inside Style Manager definition we use buildProps which helps us create common properties from available built-in objects then in properties we can override same objects (eg. passing another name to change the label) identified by property name. As you can see from custom-prop example it's a matter of defining the CSS property and the input type. We suggest to check a more complete example of Style Manager properties usage from the webpage preset demo

    TIP

    Check the Style Manager API to see how to update sectors and properties dynamically

    Traits

    Most of the time you would style your components and place them somewhere in the structure, but sometimes your components might need custom attributes or even custom behaviors and for this need you can make use of traits. Traits are commonly used to update HTML element attributes (eg. placeholder for inputs or alt for images), but you can also define your own custom traits. Access the selected Component model and do whatever you want. For this guide, we going to show you how to render available traits, for more details on how to extend them we suggest you read the Trait Manager Module page.

    Let's create a new container for traits. Tell the editor where to render it and update the sidebar switcher





     



    ...
   <div class="panel__right">
     <div class="layers-container"></div>
     <div class="styles-container"></div>
@@ -416,7 +414,7 @@ editor.Commandsthis.getTraitsEl(editor).style.display = 'none';
   },
 });
-

    Hello World Component!

    Now if you switch to the Trait panel and select some of the inner component you should see its default traits.

    Responsive templates

    GrapesJS implements also a module which allows you to work with responsive templates easily. Let's see how to define different devices and some button for device switching



     




    <div class="panel__top">
+

    Hello World Component!

    Now if you switch to the Trait panel and select one of the inner components you should see its default traits.

    Responsive templates

    GrapesJS implements a module which allows you to work with responsive templates easily. Let's see how to define different devices and a button for device switching



     




    <div class="panel__top">
     <div class="panel__basic-actions"></div>
     <div class="panel__devices"></div>
     <div class="panel__switcher"></div>
@@ -468,7 +466,7 @@ editor.Commands.Commands.add('set-device-mobile', {
   run: editor => editor.setDevice('Mobile')
 });
-

    Hello World Component!

    As you can see from the commands definition we just use the editor.setDevice method to change the size of the viewport. In case you need to trigger some action on device change you can setup a listener like this:

    editor.on('change:device', () => console.log('Current device: ', editor.getDevice()));
+

    Hello World Component!

    As you can see from the commands definition we use the editor.setDevice method to change the size of the viewport. In case you need to trigger an action on device change you can setup a listener like this:

    editor.on('change:device', () => console.log('Current device: ', editor.getDevice()));

    What about the mobile-first approach? You can achieve it by changing your configurations in this way:

    const editor = grapesjs.init({
   // ...
   mediaCondition: 'min-width', // default is `max-width`
@@ -488,9 +486,9 @@ editor.Commands// Set initial device as Mobile
 editor.setDevice('Mobile');
-

    TIP

    Check the Device Manager API to get all available methods

    Store & load data

    Once you finished with defining you builder interface the next step would be to setup the storing and loading process. -GrapesJS implements 2 simple type of storages inside its Storage Manager, the local (by using localStorage, active by default) and the remote one. Those are enough to cover most of the cases, but it's also possible to add new implementations (grapesjs-indexeddb is a good example). -Let's see how the default options looks like

    grapesjs.init({
+

    TIP

    Check out the Device Manager API to see all the available methods

    Store & load data

    Once you have finished with defining your builder interface the next step would be to setup the storing and loading process. +GrapesJS implements 2 simple type of storages inside its Storage Manager: The local (by using localStorage, active by default) and the remote one. Those are enough to cover most of the cases, but it's also possible to add new implementations (grapesjs-indexeddb is a good example). +Let's see how the default options work

    grapesjs.init({
     // ...
     storageManager: {
       id: 'gjs-',             // Prefix identifier that will be used inside storing and loading
@@ -504,7 +502,7 @@ Let's see how the default options looks like
    : true,         // Enable/Disable storing of rules as CSS string
     }
 });
-

    Worth noting the default id parameter which adds a prefix for all keys to store. If you check the localStorage inside the devtool panel you'll see something like { 'gjs-components': '....' ...} in this way it prevents the risk of collisions.

    Let's check also the configuration required to setup the remote storage

    grapesjs.init({
+

    It is worth noting that the default id parameter adds a prefix for all keys to store. If you check the localStorage inside the devtool panel you'll see something like { 'gjs-components': '....' ...} this way it lessens the risk of collisions.

    Let's look at the configuration required to setup the remote storage

    grapesjs.init({
     // ...
     storageManager: {
       type: 'remote',
@@ -515,8 +513,8 @@ Let's see how the default options looks like
    : {}, // Custom headers for the remote storage request
     }
 });
-

    As you might noticed, we've left some default option unchanged, increased changes necessary for autosave triggering and passed remote endpoints. -If you prefer you could also disable the autosaving and do it by yourself using some custom command

    // ...
+

    As you might noticed, we've left some default options unchanged: Increased changes necessary for autosave triggering and passed remote endpoints. +If you prefer you could also disable the autosaving and you can do so using a custom command

    // ...
   storageManager: {
     type: 'remote',
     autosave: false,
@@ -535,7 +533,7 @@ If you prefer you could also disable the autosaving and do it by yourself using
     ]
   }
 // ...
-

    To get a better overview of the Storage Manager, how correctly you should store/load the template and how to define new storages you have to read the Storage Manager Module page

    Theming

    One last step that might actually improve a lot your editor personality is how it's look visually. To achieve an easy theming we have adapted an atomic design for this purpose. To customize the main palette of colors all you have to do is to change few CSS rules or if you include GrapesJS styles via SCSS you can make use of its internal variables and declare yours before the import

    // Put your variables before the grapesjs style import
+

    To get a better overview of the Storage Manager and how you should store/load the template, or how to define new storages you should read the Storage Manager Module page

    Theming

    One last step that might actually improve a lot your editor personality is how it's look visually. To achieve an easy theming we have adapted an atomic design for this purpose. To customize the main palette of colors all you have to do is to change few CSS rules. Alternatively if you include GrapesJS styles via SCSS you can make use of its internal variables and declare your variables before the import

    // Put your variables before the GrapesJS style import
 
 // Palette variables
 $primaryColor: #444;
@@ -546,8 +544,8 @@ If you prefer you could also disable the autosaving and do it by yourself using
 // ...
 
 @import "grapesjs/src/styles/scss/main.scss";
-

    In case of a simple CSS you just have to put your rules after the GrapesJS styles. -To complete our builder let's customize its color palette and to make it more visually "readable" we gonna replace all button labels with SVG icons

    /* We can remove the border we've set at the beginnig */
+

    In case of a simple CSS you'll have to put your rules after the GrapesJS styles. +To complete our builder let's customize its color palette and to make it more visually "readable" we can replace all button labels with SVG icons

    /* We can remove the border we've set at the beginnig */
 #gjs {
   border: none;
 }
@@ -574,13 +572,13 @@ To complete our builder let's customize its color palette and to make it more vi
 .gjs-four-color-h:hover {
   color: #ec5896;
 }
-

    and here is our final result

    Hello World Component!

    Edit this page on GitHub
    Last Updated: 7/14/2018, 1:29:46 AM

    +

    and here is our final result

    Hello World Component!

    Edit this page on GitHub
    Last Updated: 10/26/2018, 1:39:09 PM

    ← Asset Manager →

    - + diff --git a/docs/guides/Custom-CSS-parser.html b/docs/guides/Custom-CSS-parser.html index 21472c5a2..8023cc898 100644 --- a/docs/guides/Custom-CSS-parser.html +++ b/docs/guides/Custom-CSS-parser.html @@ -9,7 +9,7 @@ - + @@ -209,6 +209,6 @@ editor.setCu ←

    - + diff --git a/docs/guides/Replace-Rich-Text-Editor.html b/docs/guides/Replace-Rich-Text-Editor.html index 727e20e4f..e16ce2787 100644 --- a/docs/guides/Replace-Rich-Text-Editor.html +++ b/docs/guides/Replace-Rich-Text-Editor.html @@ -9,7 +9,7 @@ - + @@ -101,6 +101,6 @@ Obviously, each third-party library has its own APIs and can present some limita Use Custom CSS Parser →

    - + diff --git a/docs/index.html b/docs/index.html index 92e5ae1d0..6f0cc0ec0 100644 --- a/docs/index.html +++ b/docs/index.html @@ -6,10 +6,10 @@ Introduction | GrapesJS - - + + - + @@ -27,16 +27,16 @@ Twitter GitHub -

    Introduction

    What is GrapesJS?

    At first look you might probably think it's just another kind of page/HTML builder, but actually is something more. GrapesJS is a multi-purpose, Web Builder Framework, which means it allows you easily create your, drag & drop enabled, builder of "THINGS". For "THINGS" we consider anything web structure related, so HTML at first, but don't just think about web pages, we use HTML-like structure basically everywhere: Newsletters (eg. MJML), Native Mobile Applications (eg. React Native), Native Desktop Applications (eg. Vuido), PDFs (eg. React PDF), 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 some of your applications. -GrapesJS comes along with different features and tools which enable you to craft easy to use builders, which will allow your users to create complex HTML-like templates without any knowledge of coding.

    Why GrapesJS?

    Mainly, GrapesJS was designed to be used inside some CMS 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. Then, with the same concept, instead of creating just an application we decided to create a framework that could be extended and used by everyone for any kind purpose.

    Quick Start

    To show up of what GrapesJS is capable of 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

    You can download GrapesJS from one of this sources

    Introduction

    What is GrapesJS?

    At first glance 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), Native Mobile Applications (eg. React Native), Native Desktop Applications (eg. Vuido), PDFs (eg. React PDF), 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 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 to 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

    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

    Edit this page on GitHub
    Last Updated: 8/13/2018, 2:12:15 PM

    +

    Changelog

    To track changes made in the library we rely on Github Releases

    Edit this page on GitHub
    Last Updated: 10/25/2018, 11:55:39 PM

    Getting Started →

    - + diff --git a/docs/modules/Assets.html b/docs/modules/Assets.html index d22ba8eba..4bbd07166 100644 --- a/docs/modules/Assets.html +++ b/docs/modules/Assets.html @@ -6,10 +6,10 @@ Asset Manager | GrapesJS - - + + - + @@ -27,7 +27,7 @@ Twitter GitHub -

    Asset Manager

    GrapesJS - Asset Manager

    In this section, you will see how to setup and take the full advantage of built-in Asset Manager in GrapesJS, which is intentionally lightweight and implements just an image in its core, but as you'll see next it's easy to extend and create your own asset types.

    Configuration

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

    const editor = grapesjs.init({
+

    Asset Manager

    GrapesJS - Asset Manager

    In this section, you will see how to setup and take the full advantage of built-in Asset Manager in GrapesJS. The Asset Manager is lightweight and implements just an image in its core, but as you'll see next it's easy to extend and create your own asset types.

    Configuration

    To change default configurations you'll have to pass assetManager property with the main configuration object

    const editor = grapesjs.init({
   ...
   assetManager: {
     assets: [...],
@@ -35,7 +35,7 @@
   }
 });

    You can update most of them later by using getConfig inside of the module

    const amConfig = editor.AssetManager.getConfig();
-

    Below the list of currently available options

      // Default assets
+

    Below is a list of currently available options

      // Default assets
   // eg. [
   //  'https://...image1.png',
   //  'https://...image2.png',
@@ -116,7 +116,7 @@
 
   // Default title for the asset manager modal
   modalTitle: 'Select Image',
-

    Not always docs are in inline with its code, therefore we'd suggest to keep an eye at the current state of configurations by checking the dedicated source file Asset Manager Config

    Initialization

    The Asset Manager is ready to work by default, so just pass few urls to see them loaded

    const editor = grapesjs.init({
+

    Sometimes the code gets ahead of the docs, therefore we'd suggest to keep an eye at the current state of configurations by checking the dedicated source file Asset Manager Config

    Initialization

    The Asset Manager is ready to work by default, so pass few URLs to see them loaded

    const editor = grapesjs.init({
   ...
   assetManager: {
     assets: [
@@ -138,7 +138,7 @@
     ],
   }
 });
-

    If you want a complete list of available properties check the source AssetImage Model

    The built-in Asset Manager modal is implemented and is showing up when requested. By default, you can make it appear by dragging Image Components in canvas, double clicking on images and all other stuff related to images (eg. CSS styling)

    Showing up of the modal is registered with a command, so you can make it appear with this

    // This command shows only assets with `image` type
+

    If you want a complete list of available properties check out the source AssetImage Model

    The built-in Asset Manager modal is implemented and is showing up when requested. By default, you can make it appear by dragging Image Components in canvas, double clicking on images and all other stuff related to images (eg. CSS styling)

    Making the modal appear is registered with a command, so you can make it appear with this

    // This command shows only assets with `image` type
 editor.runCommand('open-assets');

    Worth nothing that by doing this you can't do much with assets (if you double click on them nothing happens) and this is because you've not indicated any target. Try just to select an image in your canvas and run this in console (you should first make the editor globally available window.editor = editor; in your script)

    editor.runCommand('open-assets', {
   target: editor.getSelected()
@@ -159,7 +159,7 @@ editor.runCo
   }
   // ...
 ]);
-

    Now if you call the render(), without any argument, you will see all the assets rendered

    // without any argument
+

    Now if you call the render(), without an argument, you will see all the assets rendered

    // without any argument
 am.render();
 
 am.getAll().length // <- 3
@@ -172,9 +172,9 @@ am.render.getAll().length // Still have 3 assets
 am.getAllVisible().length // but only 2 are shown
-

    Obviously, you can mix more arrays of assets

    am.render([...assets1, ...assets2, ...assets3]);
+

    You can also mix arrays of assets

    am.render([...assets1, ...assets2, ...assets3]);

    If you want to customize the asset manager container you can get its HTMLElement

    am.getContainer().insertAdjacentHTML('afterbegin', '<div><button type="button">Click</button></div>');
-

    For more APIs methods check out the API Reference

    Define new Asset type

    Generally speaking, an asset is not only an image, it could be a video, svg-icon, or any other kind of document. Each type of the asset is applied in our templates/pages differently. If you need to change the image of the Component all you need is another url in src attribute, but in case of svg-icon, for instance, its not the same, you might want to replace the element with a new <svg> content. Besides this you also have to deal with the presentation/preview of the asset inside the panel/modal, like for example showing a thumbnail for big images or the possibility to preview videos.

    Defining a new asset it means we have to push on top of the 'Stack of Types' a new layer. This stack is iterated by the editor at any addition of the asset and tries to associate the correct type.

    am.add('https://.../image.png');
+

    For more APIs methods check out the API Reference

    Define new Asset type

    Generally speaking, images aren't the only asset you'll use, it could be a video, svg-icon, or any other kind of document. Each type of asset is applied in our templates/pages differently. If you need to change the image of the Component all you need is another url in src attribute. However In case of a svg-icon, its not the same, you might want to replace the element with a new <svg> content. Besides this you also have to deal with the presentation/preview of the asset inside the panel/modal. For example, showing a thumbnail for big images or the possibility to preview videos.

    Defining a new asset it means we have to push on top of the 'Stack of Types' a new layer. This stack is iterated over by the editor at any addition of the asset and tries to associate the correct type.

    am.add('https://.../image.png');
 // string, url, ends with '.png' -> it's an 'image' type
 
 am.add('<svg ...');
@@ -182,7 +182,7 @@ am.add.add({type: 'video', src: '...'});
 // an object, has 'video' type key -> 'video' type
-

    Obviously, it's up to you tell the editor how to recognize your type and for this purpose you have to use isType() method. +

    It's up to you tell the editor how to recognize your type and for this purpose you should to use isType() method. Let's see now an example of how we'd start to defining a type like svg-icon

    am.addType('svg-icon', {
   // `value` is for example the argument passed in `am.add(VALUE);`
   isType(value) {
@@ -199,7 +199,7 @@ Let's see now an example of how we'd start to defining a type like svg-ico
     }
   }
 })
-

    With this snippet you can already add SVGs, the asset manager will assign correctly the appropriate type.

    // Add some random SVG
+

    With this snippet you can already add SVGs, the asset manager will assign the appropriate type.

    // Add some random SVG
 am.add(`<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
   <path d="M22,9 C22,8.4 21.5,8 20.75,8 L3.25,8 C2.5,8 2,8.4 2,9 L2,15 C2,15.6 2.5,16 3.25,16 L20.75,16 C21.5,16 22,15.6 22,15 L22,9 Z M21,15 L3,15 L3,9 L21,9 L21,15 Z"></path>
   <polygon points="4 10 5 10 5 14 4 14"></polygon>
@@ -207,7 +207,7 @@ am.add

    The default open-assets command shows only image assets, so to render svg-icon run this

    am.render(am.getAll().filter(
   asset => asset.get('type') == 'svg-icon'
 ));
-

    You should see something like this

    The SVG asset is not correctly rendered and this is because we haven't yet configured its view

    am.addType('svg-icon', {
+

    You should see something like this

    The SVG asset is not rendered correctly and this is because we haven't yet configured its view

    am.addType('svg-icon', {
   view: {
     // `getPreview()` and `getInfo()` are just few helpers, you can
     // override the entire template with `template()`
@@ -250,7 +250,7 @@ am.add},
   isType(value) {...}
 })
-

    Our custom svg-icon asset is ready to use, you can also add a model to the addType definition which should group the business logic of your asset but usually it's optional so you can skip this part.

    // Just an example of model use
+

    Our custom svg-icon asset is ready to use. You can also add a model to the addType definition to group the business logic of your asset, but usually it's optional.

    // Just an example of model use
 am.addType('svg-icon', {
   model: {
     // With `default` you define model's default properties
@@ -269,7 +269,7 @@ am.addType: {...},
   isType(value) {...}
 })
-

    Extend Asset Types

    Extending asset types is basically the same as adding them, you can just choose what type to extend and how.

    // svgIconType will contain the definition (model, view, isType)
+

    Extend Asset Types

    Extending asset types is basically the same as adding them, you can choose what type to extend and how.

    // svgIconType will contain the definition (model, view, isType)
 const svgIconType = am.getType('svg-icon');
 
 // Add new type and extend another one
@@ -304,7 +304,7 @@ am.addType}
   },
 })
-

    Uploading assets

    Asset Manager includes an easy to use, drag and drop, uploader and integrates few UI helpers. The default uploader is already visible when you open the Asset Manager.

    You can click on the uploader to start select your files or just drag them directly from your computer to trigger the uploader. Obviously, before make it work you have to setup your server in order to receive your assets and specify the upload endpoint in configurations

    let editor = grapesjs.init({
+

    Uploading assets

    Asset Manager includes an easy to use, drag-and-drop uploader with a few UI helpers. The default uploader is already visible when you open the Asset Manager.

    You can click on the uploader to select your files or just drag them directly from your computer to trigger the uploader. Obviously, before it will work you have to setup your server to receive your assets and specify the upload endpoint in your configuration

    let editor = grapesjs.init({
   ...
   assetManager: {
     ...
@@ -317,7 +317,7 @@ am.addType},
   ...
 });
-

    Listeners

    If you want to execute some action before/after the uploading process (eg. loading animation) or even on response, you can make use of these listeners

    // The upload is started
+

    Listeners

    If you want to execute an action before/after the uploading process (eg. loading animation) or even on response, you can make use of these listeners

    // The upload is started
 editor.on('asset:upload:start', () => {
   ...
   startAnimation();
@@ -339,7 +339,7 @@ editor.on.on('asset:upload:response', (response) => {
   ...
 });
-

    Response

    When the uploading is over, by default (via config parameter autoAdd: 1), the editor expects to receive a JSON of uploaded assets in a data key as a response and tries to add them to the main collection. The JSON might look like this:

    {
+

    Response

    When the uploading is over, by default (via config parameter autoAdd: 1), the editor expects to receive a JSON blob of uploaded assets in a data key as a response and tries to add them to the main collection. The JSON might look like this:

    {
   data: [
     'https://.../image.png',
     // ...
@@ -352,7 +352,7 @@ editor.on// ...
   ]
 }
-

    Setup Dropzone

    There is also another helper which improve the uploading of assets, a full-width editor dropzone.

    All you have to do is to activate it and possibly set a custom content (you might also want to hide the default uploader)

    const editor = grapesjs.init({
+

    Setup Dropzone

    There is another helper which improves the uploading of assets: A full-width editor dropzone.

    All you have to do is to activate it and possibly set a custom content (you might also want to hide the default uploader)

    const editor = grapesjs.init({
   ...
   assetManager: {
     ...,
@@ -360,13 +360,13 @@ editor.on: '<div class="dropzone-inner">Drop here your assets</div>'
   }
 });
-

    Events

    Currently available events you can listen to

    • asset:add - New asset added
    • asset:remove - Asset removed
    • asset:upload:start - Before the upload is started
    • asset:upload:end - After the upload is ended
    • asset:upload:error - On any error in upload, passes the error as an argument
    • asset:upload:response - On upload response, passes the result as an argument
    Edit this page on GitHub
    Last Updated: 9/17/2018, 3:16:58 AM

    +

    Events

    Currently available events you can listen to

    • asset:add - New asset added
    • asset:remove - Asset removed
    • asset:upload:start - Before the upload is started
    • asset:upload:end - After the upload is ended
    • asset:upload:error - On any error in upload, passes the error as an argument
    • asset:upload:response - On upload response, passes the result as an argument
    Edit this page on GitHub
    Last Updated: 10/26/2018, 1:52:41 PM

    ← Block Manager →

    - + diff --git a/docs/modules/Blocks.html b/docs/modules/Blocks.html index ef612a4ff..4deab41e9 100644 --- a/docs/modules/Blocks.html +++ b/docs/modules/Blocks.html @@ -6,10 +6,10 @@ Block Manager | GrapesJS - - + + - + @@ -27,7 +27,7 @@ Twitter GitHub -

    Block Manager

    GrapesJS - Block Manager

    The Block is a group of Components and can be easily reused inside templates.

    To better understand the difference between components and blocks, the component is more atomic so, for example, a single image, a text box or a map fits perfectly in this concept. The block is what the end user will drag inside the canvas, so it could contain a single image (single Component) or the entire section like, for example, the footer with a lot of components inside (texts, images, inputs, etc).

    Check Components page to see the list of built-in components and how to create your own.

    Let's see how to add a new block to the editor using the Blocks API

    var editor = grapesjs.init({...});
+

    Block Manager

    GrapesJS - Block Manager

    The Block is a group of Components and can be easily reused inside templates.

    The difference between components and blocks: The component is more atomic, so a single image, a text box or a map is a component. The block is what the end user will drag inside the canvas, so it could contain a single image (single Component) or the entire section like, for example, the footer with a lot of components inside (texts, images, inputs, etc).

    Check out the Components page to see the list of built-in components and how to create your own.

    Let's see how to add a new block to the editor using the Blocks API

    var editor = grapesjs.init({...});
 var blockManager = editor.BlockManager;
 
 // 'my-first-block' is the ID of the block
@@ -42,7 +42,7 @@ blockManager.}
 })

    As you see a simple HTML string is enough to create a block, the editor will do the rest. -If you want you could also pass an object representing the Component.

    blockManager.add('my-map-block', {
+If you want you could also pass an object representing the Component.
    blockManager.add('my-map-block', {
   label: 'Simple map block',
   content: {
     type: 'map', // Built-in 'map' component
@@ -52,7 +52,7 @@ If you want you could also pass an object representing the C
     removable: false, // Once inserted it can't be removed
   }
 })
-
    From the v0.3.70 it's also possible to pass the HTML string with Component's properties as attributes.
    blockManager.add('the-row-block', {
+
    From v0.3.70 it's also possible to pass the HTML string with Component's properties as attributes.
    blockManager.add('the-row-block', {
   label: '2 Columns',
   content: '<div class="row" data-gjs-droppable=".row-cell" data-gjs-custom-name="Row">' +
       '<div class="row-cell" data-gjs-draggable=".row"></div>' +
@@ -61,13 +61,13 @@ If you want you could also pass an object representing the C
 });
 
    In the example above you're defining a row component which will accept only elements which match '.row-cell' selector and cells which could be dragged only inside '.row' elements. We're also defining the custom name which will be seen inside the Layers panel.
 If you want to check the complete list of available Component's properties, check directly the Component model source:
-https://github.com/artf/grapesjs/blob/dev/src/dom_components/model/Component.js
    Edit this page on GitHub
    Last Updated: 7/10/2018, 2:27:13 AM

    +https://github.com/artf/grapesjs/blob/dev/src/dom_components/model/Component.js

    Edit this page on GitHub
    Last Updated: 11/3/2018, 1:07:59 PM

    ← Component Manager →

    - + diff --git a/docs/modules/Components-js.html b/docs/modules/Components-js.html index 87c8519c0..4f91abb43 100644 --- a/docs/modules/Components-js.html +++ b/docs/modules/Components-js.html @@ -6,10 +6,10 @@ Components & JS | GrapesJS - - + + - + @@ -27,7 +27,7 @@ Twitter
    GitHub -

    Components & JS

    In this guide you'll see how to attach component related scripts and deal with external javascript libraries (for stuff like counters, galleries, slideshows, etc.)

    Basic scripts

    Let's see how to create a component with scripts using Blocks.

    editor.BlockManager.add('test-block', {
+

    Components & JS

    In this guide you'll see how to attach component related scripts and deal with external JavaScript libraries (for stuff like counters, galleries, slideshows, etc.)

    Basic scripts

    Let's see how to create a component with scripts using Blocks.

    editor.BlockManager.add('test-block', {
   label: 'Test block',
   attributes: {class: 'fa fa-text'},
   content: {
@@ -40,8 +40,8 @@
     }
   }
 });
-

    Now if you drag the new block inside the canvas you'll see an alert popup and the message in console, as you might expected. -One thing worth noting is that this context is binded to the component element, so, for example, if you want to change some property you'd do this.innerHTML = 'inner content'.

    One thing you should take in account is how the script is binded to component once rendered in the canvas or in your final template. If you check now the generated HTML coded by the editor (via Export button or editor.getHtml()), you might see something like this:

    <div id="c764"></div>
+

    Now if you drag the new block inside the canvas you'll see an alert and the message in console, as you might expect. +One thing worth noting is that this context is bound to the component element, so if you wanted to change a property you'd do this.innerHTML = 'inner content'.

    One thing you should take in account is how the script is bound to component once rendered in the canvas or in your final template. If you check now the generated HTML coded by the editor (via Export button or editor.getHtml()), you might see something like this:

    <div id="c764"></div>
 <script>
   var items = document.querySelectorAll('#c764');
   for (var i = 0, len = items.length; i < len; i++) {
@@ -66,7 +66,7 @@ One thing worth noting is that this context is binded to the compon
     }.bind(items[i]))();
   }
 </script>
-

    Keep in mind that all component scripts are executed only inside the iframe of the canvas (isolated, just like your final template), therefore are NOT part of the current document and all your external libraries (eg. JQuery) are not there, but you'll see further how to manage scripted components with dependencies.

    One thing you might be concerned about is a string used for the script, definitely not the best way to deal with a code, for this reason GrapesJS is able also to handle functions for you, so the previous example might look like this:

    editor.BlockManager.add('test-block', {
+

    Keep in mind that all component scripts are executed only inside the iframe of the canvas (isolated, just like your final template), and therefore are NOT part of the current document. All your external libraries (eg. jQuery) are not there, but you'll see later how to manage scripted components with dependencies.

    One thing you might be concerned about is a string used for the script, definitely not the best way to deal with a code, for this reason GrapesJS is able also to handle functions for you, so the previous example might look like this:

    editor.BlockManager.add('test-block', {
   ...
   content: {
     script: function () {
@@ -76,7 +76,7 @@ One thing worth noting is that this context is binded to the compon
     ...
   }
 });
-

    Much easier now, but be aware of a string conversion, you can't use variables outside of the function scope, let's see this scenario

    var myVar = 'John';
+

    This is much better, but be aware of a string conversion, you can't use variables outside of the function scope. Take a look at this scenario:

    var myVar = 'John';
 
 editor.BlockManager.add('test-block', {
 ...
@@ -86,7 +86,7 @@ editor.BlockManager},
 ...
 });
-

    Unfortunately, this won't work as you'll get undefined myVar error. The final HTML, with script functions converted to string, will look like this:

    <div id="c764"></div>
+

    Unfortunately, this won't work. You'll get an undefined myVar error. The final HTML, with script functions converted to string, will look like this:

    <div id="c764"></div>
 <script>
   var items = document.querySelectorAll('#c764');
   for (var i = 0, len = items.length; i < len; i++) {
@@ -98,7 +98,7 @@ editor.BlockManager}.bind(items[i]))();
   }
 </script>
-

    There is actually a solution to make your scripts behave dynamically, you can interpolate properties of the component model.

    editor.BlockManager.add('test-block', {
+

    There is a solution to make your scripts behave dynamically. You can interpolate properties of the component model.

    editor.BlockManager.add('test-block', {
   ...
   content: {
     myModelPropName: 'John',
@@ -119,16 +119,16 @@ editor.BlockManager}.bind(items[i]))();
   }
 </script>
-

    You can even change tags used for the interpolation

    var editor = grapesjs.init({
+

    You can even change the tags used for the interpolation

    var editor = grapesjs.init({
   ...
   // Default values
   tagVarStart: '{[ ',
   tagVarEnd: ' ]}',
   ...
 });
-

    You can use this technique with property Traits to create highly customizable components.

    Dependencies

    As we mentioned above, scripts are executed independently inside the iframe of the canvas, where you won't find any dependency, so exactly as the final HTML generated by the editor. -If you want to make use of external libraries you have basically 2 types of approaches, component related and template related.

    If you're building, for example, a slider component based on some third-party library you probably would like to include the external file only when the component is actually dragged inside the canvas, in this case, component related approaches is the perfect one as it's loading external libraries dynamically. -All you have to do is to require the dependency when is needed and then call your script.

    ...
+

    You can use this technique with property Traits to create custom components.

    Dependencies

    As we mentioned above, scripts are executed independently inside the iframe of the canvas, without any dependencies, so exactly as the final HTML generated by the editor. +If you want to make use of external libraries you have two approaches: component-related and template-related.

    If you're building a slider component based on some third-party library you probably would like to include the external file only when the component is actually dragged inside the canvas. In this case, the component-related approach is the perfect one as it's loading external libraries dynamically. +All you have to do is to require the dependency when it is needed and then call your script.

    ...
 script: function () {
   var el = this;
   var initMySLider = function() {
@@ -143,7 +143,7 @@ script: funct
   }
 },
 ...
-

    Some dependency might be highly used along all your components (eg. JQuery) so instead requiring it inside each script you might want to inject it directly inside the canvas:

    var editor = grapesjs.init({
+

    A dependency might be used along all your components (eg. JQuery) so instead requiring it inside each script you might want to inject it directly inside the canvas:

    var editor = grapesjs.init({
   ...
   canvas: {
     scripts: ['https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js']
@@ -156,13 +156,13 @@ script: funct
     $('...');
   },
 ...
-

    Examples

    Examples of components using scripts inside

    Edit this page on GitHub
    Last Updated: 7/7/2018, 4:18:04 PM

    +

    Examples

    Examples of components using scripts inside

    Edit this page on GitHub
    Last Updated: 10/29/2018, 4:01:56 AM

    ← Trait Manager →

    - + diff --git a/docs/modules/Components.html b/docs/modules/Components.html index 55e4feb66..8f482327b 100644 --- a/docs/modules/Components.html +++ b/docs/modules/Components.html @@ -6,10 +6,10 @@ Component Manager | GrapesJS - - + + - + @@ -27,11 +27,11 @@ Twitter GitHub -

    Component Manager

    The Component is the base element for the template composition and, usually, elements like images, text boxes, maps, etc. fit perfectly in this concept. The concept of the component was made to allow the developer to bind different behaviors to different elements. Like for example, opening the Asset Manager on double click of the image.

    Built-in components

    • Default (Basic)
    • Text
    • Image
    • Video
    • Link
    • Map
    • Table
    • Row (for the table)
    • Cell (for the table)

    How Components work?

    When we pass an HTML string to the editor like this:

    <div>
+

    Component Manager

    The Component is the base element for template composition. It is atomic, so elements like images, text boxes, maps, etc. fit the definition of a Component. The concept of the component was made to allow the developer to bind different behaviors to different elements. Like for example, opening the Asset Manager on double click of the image.

    Built-in components

    • Default (Basic)
    • Text
    • Image
    • Video
    • Link
    • Map
    • Table
    • Row (for the table)
    • Cell (for the table)

    How Components work?

    When we pass an HTML string to the editor like this:

    <div>
   <img src="https://path/image" />
   <span title="foo">bar</span>
 </div>
-

    The editor will create and store, for each DOM element, its object representation and all next changes to the template will be made on top of this structure, which will then reflect on canvas. So, each object, usually called Model (or state/store), will be the source of truth for the template, but what exactly does it mean? For instance, in more practical way, once the template is rendered on the canvas, if you try to remove one of the elements using the browser inspector and then ask the editor to print the HTML (using editor.getHtml()) you'll see, from the code, that the element will still be there, this because the editor relies on Models and not on the DOM inside the canvas. This approach allows us to be extremely flexible on how to generate the final code (from the Model) and how to render it inside the canvas (from the View).

    Manage Components

    Component recognition

    But now, how does the editor recognize which Component to bind to the img element and what to do with the span one? +

    For each DOM element the editor will create and store an object representation. Every future change to the template will be made on top of this structure, which will then reflect on the canvas. So each object, usually called Model (or state/store), will be the source of truth for the template, but what exactly does that mean? In more practical example, once the template is rendered on the canvas, if you try to remove one of the elements using the browser inspector and then ask the editor to print the HTML (using editor.getHtml()) you'll see that the element will still be present. This is because the editor relies on Models and not on the DOM inside the canvas. This approach allows us to be extremely flexible on how we generate the final code (from the Model) and how to render it inside the canvas (from the View).

    Manage Components

    Component recognition

    But now, how does the editor recognize which Component to bind to the img element and what to do with the span one? Each Component inherits, from the base one, a particular static method

    /**
  * @param {HTMLElement} el
  * @return {Object}
@@ -39,18 +39,18 @@ Each Component inherits, from the base one, a particular static method
    : function(el) {
   ...
 }
-

    This method gives us the possibility to recognize and bind component types to each HTMLElement (div, img, iframe, etc.). Each HTML element introduced inside the canvas will be processed by isComponent of all available types and if it matches, the object represented the type should be returned. So, for example, with the image component this method looks like:

    // Image component
+

    This method gives us the possibility to recognize and bind component types to each HTMLElement (div, img, iframe, etc.). Each HTML element introduced inside the canvas will be processed by isComponent of all available types and if it matches, the object represented the type should be returned. For example, with the image component this method looks like:

    // Image component
 isComponent: function(el) {
   if(el.tagName == 'IMG')
     return {type: 'image'};
 }
-

    Let's try with something that might look a little bit tricky. What about a Google's Map?!? Google's maps are generally embedded as iframes, but the template can be composed by a lot of different iframes, how can I tell the editor that a particular iframe is actually a Google's Map. Well, this part is up to you to understand which is the right pattern to choose, you have the HTMLElement so you can make all checks you want and in this particular case this pattern is used:

    // Map component
+

    Let's try with something that might look a little bit tricky. What about a Google Map?!? Google Maps are generally embedded as iframes, but the template can be composed by a lot of different iframes. How can I tell the editor that a particular iframe is actually a Google's Map? Well, you'll have to figure out the right pattern, you have the HTMLElement so you can make all the checks you want. In this particular case this pattern is used:

    // Map component
 isComponent: function(el) {
 	if(el.tagName == 'IFRAME' && /maps\.google\.com/.test(el.src)) {
 		return {type: 'map', src: el.src};
 	}
 },
-

    So, as you see, in addition to tagName check, we also used the src property, but, as you'll see, you can actually override it with your own logic by extending the built-in component.

    Define new Component

    Let's see now an example, with another HTML element, which is not handled by default Component types. What about input elements?

    With the default GrapesJS configuration inputs are treated just like any other element, you can move it around, style it, etc., but usually we'd like to handle this type of element more specifically. In this case, we have to create a new Component type.

    Let's define just few specs for our new Input type:

    • Can be dropped only inside form elements
    • Can't drop other elements inside it
    • Can change the type of the input (text, password, email, etc.)
    • Can make it required for the form

    To define a new Component type you need to choose from which built-in Component inherit its properties, in our case we just gonna choose the default one. Let's see a complete example of the new type definition

    // Get DomComponents module
+

    In addition to tagName check, we also used the src property, but you can actually override it with your own logic by extending the built-in component.

    Define new Component

    Let's see an example with another HTML element that is not handled by default Component types. What about input elements?

    With the default GrapesJS configuration inputs are treated like any other element; you can move it around, style it, etc. However, we'd like to handle this type of element more specifically. In this case, we have to create a new Component type.

    Let's define few specs for our new Input type:

    • Can be dropped only inside form elements
    • Can't drop other elements inside it
    • Can change the type of the input (text, password, email, etc.)
    • Can make it required for the form

    To define a new Component type you need to choose from which built-in Component inherit its properties, in our case we just gonna choose the default one. Let's see a complete example of the new type definition

    // Get DomComponents module
 var comps = editor.DomComponents;
 
 // Get the model and the view from the default Component type
@@ -184,13 +184,13 @@ comps.addTyp
   // after all new types
   editor.render();
 </script>
-

    Solution 2: put all the stuff inside a plugin (Creating plugins)

    Edit this page on GitHub
    Last Updated: 7/10/2018, 2:27:13 AM

    +

    Solution 2: put all the stuff inside a plugin (Creating plugins)

    Edit this page on GitHub
    Last Updated: 10/26/2018, 2:03:52 PM

    ← Components & JS →

    - + diff --git a/docs/modules/Plugins.html b/docs/modules/Plugins.html index 5f15091fc..7ab292e25 100644 --- a/docs/modules/Plugins.html +++ b/docs/modules/Plugins.html @@ -6,10 +6,10 @@ Plugins | GrapesJS - - + + - + @@ -100,6 +100,6 @@ Replace Rich Text Editor →

    - + diff --git a/docs/modules/Storage.html b/docs/modules/Storage.html index a1a2d9439..378c5b94e 100644 --- a/docs/modules/Storage.html +++ b/docs/modules/Storage.html @@ -6,10 +6,10 @@ Storage Manager | GrapesJS - - + + - + @@ -192,6 +192,6 @@ editor.on →

    - + diff --git a/docs/modules/Style-manager.html b/docs/modules/Style-manager.html index 6b377bc7c..812a9ff89 100644 --- a/docs/modules/Style-manager.html +++ b/docs/modules/Style-manager.html @@ -6,10 +6,10 @@ Style Manager | GrapesJS - - + + - + @@ -45,6 +45,6 @@ Storage Manager →

    - + diff --git a/docs/modules/Traits.html b/docs/modules/Traits.html index 39ecc5047..e31e5e523 100644 --- a/docs/modules/Traits.html +++ b/docs/modules/Traits.html @@ -6,10 +6,10 @@ Trait Manager | GrapesJS - - + + - + @@ -27,7 +27,7 @@ Twitter GitHub -

    Trait Manager

    In GrapesJS, Traits could define different parameters and behaviors of a single component. The user generally will see traits as Settings of each component. A common use of traits is to customize element attributes (eg. placeholder for inputs) and in this case the editor comes already with some built-in, easy configurable, types.

    Built-in trait types

    • text
    • number
    • checkbox
    • select
    • color

    Add Traits to Components

    You can add traits to the component by extending them or while creating a new one. Let's see in this example how to make inputs more customizable by the editor. All components, by default, contain 2 traits: id and title (at the moment of writing). So, if you select an input and open the Settings panel you will see just this:

    In this case we gonna create a new Component (check here for more details about the creation of new components) with a new set of traits

    var editor = grapesjs.init({...});
+

    Trait Manager

    In GrapesJS, Traits can define different parameters and behaviors of a component. The user generally will see traits as the Settings of a component. A common use of traits is to customize element attributes (eg. placeholder for inputs) and in this case the editor comes already with some built-in, easy configurable, types.

    Built-in trait types

    • text
    • number
    • checkbox
    • select
    • color

    Add Traits to Components

    You can add traits to the component by extending them or while creating a new one. Let's see in this example how to make inputs more customizable by the editor. All components, by default, contain two traits: id and title (at the moment of writing). So, if you select an input and open the Settings panel you will see this:

    In this example we are going to create a new Component. (Check here for more details about the creation of new components with a new set of traits

    var editor = grapesjs.init({...});
 var domComps = editor.DomComponents;
 var dType = domComps.getType('default');
 var dModel = dType.model;
@@ -66,7 +66,7 @@ domComps.add
 
     view: dView,
 });
-

    Now the result will be

    By default, traits modify attributes of the model (which than reflected in canvas) but you can also have traits which change the property

    ...
+

    Now the result will be

    Traits modify attributes of the model (which than reflected in canvas), but you can also have traits which change the property

    ...
 traits: [{
     type: 'text',
     label: 'Test',
@@ -74,7 +74,7 @@ traits: [
     changeProp: 1,
 }],
 ...
-

    In this way you're able to listen this changes and react with your own logic

    editor.DomComponents.addType('input', {
+

    In this way you're able to listen for changes and react with your own logic

    editor.DomComponents.addType('input', {
     model: dModel.extend({
       init() {
         this.listenTo(this, 'change:model-prop-name', this.doStuff);
@@ -118,13 +118,13 @@ traits: [
     type: 'content',
 }],
 ...
-
    Edit this page on GitHub
    Last Updated: 7/12/2018, 6:13:47 PM

    +

    Edit this page on GitHub
    Last Updated: 10/29/2018, 4:01:56 AM

    ← Style Manager →

    - +