diff --git a/docs/404.html b/docs/404.html index b43bebde6..3d7430a19 100644 --- a/docs/404.html +++ b/docs/404.html @@ -4,19 +4,19 @@ GrapesJS - + - - - + + + -

404

How did we get here?
+ - + diff --git a/docs/Home.html b/docs/Home.html index 0f301b887..785ff6356 100644 --- a/docs/Home.html +++ b/docs/Home.html @@ -4,14 +4,14 @@ Getting started | GrapesJS - + - - - + + + - +

Check Storage Manager API Reference

+ diff --git a/docs/api/asset.html b/docs/api/asset.html index 4c7f1bcf7..955ff60ac 100644 --- a/docs/api/asset.html +++ b/docs/api/asset.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

+

Returns String (opens new window)

← →

- + diff --git a/docs/api/assets.html b/docs/api/assets.html index 8540c9f60..4758ca073 100644 --- a/docs/api/assets.html +++ b/docs/api/assets.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

+

Returns Asset Removed asset

# getContainer

Return the Asset Manager Container

Returns HTMLElement (opens new window)

←

GrapesJS

# Block

# Properties

# getId

Get block id

Returns String (opens new window)

# getLabel

Get block label

Returns String (opens new window)

# getMedia

Get block media

Returns String (opens new window)

# getContent

Get block content

Returns (Object (opens new window) | String (opens new window) | Array (opens new window)<(Object (opens new window) | String (opens new window))>)

# getCategoryLabel

Get block category label

Returns String (opens new window)

+ (opens new window)

# Block

# Properties

# getId

Get block id

Returns String (opens new window)

# getLabel

Get block label

Returns String (opens new window)

# getMedia

Get block media

Returns String (opens new window)

# getContent

Get block content

Returns (Object (opens new window) | String (opens new window) | Array (opens new window)<(Object (opens new window) | String (opens new window))>)

# getCategoryLabel

Get block category label

Returns String (opens new window)

← →

- + diff --git a/docs/api/block_manager.html b/docs/api/block_manager.html index 3c374cbdf..bbe25e03c 100644 --- a/docs/api/block_manager.html +++ b/docs/api/block_manager.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
- + diff --git a/docs/api/canvas.html b/docs/api/canvas.html index 85b69b67e..caecb6418 100644 --- a/docs/api/canvas.html +++ b/docs/api/canvas.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

+

Returns Frame

← →

- + diff --git a/docs/api/commands.html b/docs/api/commands.html index dfa721a53..4f2657cc2 100644 --- a/docs/api/commands.html +++ b/docs/api/commands.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

+

Returns Object (opens new window)

← →

- + diff --git a/docs/api/component.html b/docs/api/component.html index 749588404..2da7de9ab 100644 --- a/docs/api/component.html +++ b/docs/api/component.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

+

Returns Boolean (opens new window)

←

GrapesJS

+Read more about this in Define New Component (opens new window)

# Parameters

Returns Object (opens new window) Component type definition, eg. { model: ..., view: ... }

# removeType

Remove component type

# Parameters

Returns (Object (opens new window) | undefined (opens new window)) Removed component type, undefined otherwise

# getTypes

Return the array of all types

Returns Array (opens new window)

←

- + diff --git a/docs/api/css_composer.html b/docs/api/css_composer.html index aed35885d..a2875946b 100644 --- a/docs/api/css_composer.html +++ b/docs/api/css_composer.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

+

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

# clear

Remove all rules

# Parameters

  • opts (optional, default {})

Returns this

←

GrapesJS

+

Returns String (opens new window) CSS string

← →

- + diff --git a/docs/api/device.html b/docs/api/device.html index dd68705e9..e3a599f5b 100644 --- a/docs/api/device.html +++ b/docs/api/device.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

# Device

# Properties

+ (opens new window)

# Device

# Properties

← →

- + diff --git a/docs/api/device_manager.html b/docs/api/device_manager.html index 5615e4802..98fb8449c 100644 --- a/docs/api/device_manager.html +++ b/docs/api/device_manager.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

+

Returns Device

←

GrapesJS

# Editor

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

const editor = grapesjs.init({
+You get the Editor instance on init method and you can pass options via its Configuration Object (opens new window)
 
const editor = grapesjs.init({
    // options
 });
 
# Available Events
 
You can make use of available events in this way
 
editor.on('EVENT-NAME', (some, argument) => {
@@ -153,7 +153,7 @@ The callback will be executed immediately if the method is called on the already
 const safeStr = '<b>Hello</b>';
 // Use `$${var}` to avoid escaping
 const strHtml = editor.html`Escaped ${unsafeStr} unescaped $${safeStr}`;
-
Returns String (opens new window)

+

Returns String (opens new window)

← →

- + diff --git a/docs/api/frame.html b/docs/api/frame.html index 11ffe7af7..d87e13b1a 100644 --- a/docs/api/frame.html +++ b/docs/api/frame.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

# Frame

# Properties

+ (opens new window)

# Frame

# Properties

← →

- + diff --git a/docs/api/i18n.html b/docs/api/i18n.html index c9975f878..658d8062c 100644 --- a/docs/api/i18n.html +++ b/docs/api/i18n.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
- + diff --git a/docs/api/index.html b/docs/api/index.html index 8566e0894..28de121bd 100644 --- a/docs/api/index.html +++ b/docs/api/index.html @@ -4,14 +4,14 @@ API Reference | GrapesJS - + - - - + + +
GrapesJS

# API Reference

Here you can find the documentation about GrapesJS' APIs. Mainly, you would use them for your editor to extend the basic functionality of the framework or you could also create a plugin and make those extensions reusable and available to others.

+ (opens new window)

# API Reference

Here you can find the documentation about GrapesJS' APIs. Mainly, you would use them for your editor to extend the basic functionality of the framework or you could also create a plugin and make those extensions reusable and available to others.

Editor →

- + diff --git a/docs/api/keymaps.html b/docs/api/keymaps.html index 5ea7835d2..b2fc69bd6 100644 --- a/docs/api/keymaps.html +++ b/docs/api/keymaps.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

+

Returns Object (opens new window) Removed keymap

# removeAll

Remove all binded keymaps

Returns this

←

- + diff --git a/docs/api/layer.html b/docs/api/layer.html index 6d525dbbe..86368af3b 100644 --- a/docs/api/layer.html +++ b/docs/api/layer.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

# getId

Get layer id.

Returns String (opens new window)

# getIndex

Get layer index.

Returns Number (opens new window)

# getValues

Get layer values.

# Parameters

Returns Object (opens new window)

# getLabel

Get layer label.

Returns String (opens new window)

# isSelected

Check if the layer is selected.

Returns Boolean (opens new window)

# select

Select the layer.

# remove

Remove the layer.

# move

Move layer to a new index.

# Parameters

# getStylePreview

Get style object for the preview.

# Parameters

Returns Object (opens new window) Style object

# hasPreview

Check if the property has the preview enabled for this layer.

Returns Boolean (opens new window)

+ (opens new window)

# getId

Get layer id.

Returns String (opens new window)

# getIndex

Get layer index.

Returns Number (opens new window)

# getValues

Get layer values.

# Parameters

Returns Object (opens new window)

# getLabel

Get layer label.

Returns String (opens new window)

# isSelected

Check if the layer is selected.

Returns Boolean (opens new window)

# select

Select the layer.

# remove

Remove the layer.

# move

Move layer to a new index.

# Parameters

# getStylePreview

Get style object for the preview.

# Parameters

Returns Object (opens new window) Style object

# hasPreview

Check if the property has the preview enabled for this layer.

Returns Boolean (opens new window)

← →

- + diff --git a/docs/api/layer_manager.html b/docs/api/layer_manager.html index 52961841f..2469b1118 100644 --- a/docs/api/layer_manager.html +++ b/docs/api/layer_manager.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

+

Returns Object (opens new window) Object containing the layer data.

← →

- + diff --git a/docs/api/modal_dialog.html b/docs/api/modal_dialog.html index 1a24941cf..6e8704592 100644 --- a/docs/api/modal_dialog.html +++ b/docs/api/modal_dialog.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

+

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

← →

- + diff --git a/docs/api/page.html b/docs/api/page.html index f7b0975cd..1b77f0a53 100644 --- a/docs/api/page.html +++ b/docs/api/page.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

+

Returns Component

← →

- + diff --git a/docs/api/pages.html b/docs/api/pages.html index 1b3cb6f66..339ee0365 100644 --- a/docs/api/pages.html +++ b/docs/api/pages.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

+

Returns Page

← →

- + diff --git a/docs/api/panels.html b/docs/api/panels.html index d91be7a84..0c2ae2df4 100644 --- a/docs/api/panels.html +++ b/docs/api/panels.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

+

Returns (Button | null)

← →

- + diff --git a/docs/api/parser.html b/docs/api/parser.html index f96aa3d59..01043336b 100644 --- a/docs/api/parser.html +++ b/docs/api/parser.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

+

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

←

- + diff --git a/docs/api/property.html b/docs/api/property.html index 836349717..66370d3bd 100644 --- a/docs/api/property.html +++ b/docs/api/property.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

+The change is also propagated to the selected targets (eg. the css property is cleared).

# Parameters

# canClear

Indicates if the current value comes directly from the selected target and so can be cleared.

Returns Boolean (opens new window)

# getParent

If the current property is a sub-property, this will return the parent Property.

Returns ([Property] | null)

# isFull

Indicates if the property is full-width in UI.

Returns Boolean (opens new window)

← →

- + diff --git a/docs/api/property_composite.html b/docs/api/property_composite.html index f3bcbb469..fe2d29d51 100644 --- a/docs/api/property_composite.html +++ b/docs/api/property_composite.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

+

Returns Object (opens new window)

# getSeparator

Get property separator.

Returns RegExp (opens new window)

# getJoin

Get the join value.

Returns String (opens new window)

← →

- + diff --git a/docs/api/property_number.html b/docs/api/property_number.html index ea12c5233..7d3c8e9e3 100644 --- a/docs/api/property_number.html +++ b/docs/api/property_number.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

# PropertyNumber

Extends Property

# Properties

# getUnits

Get property units.

Returns Array (opens new window)<String (opens new window)>

# getUnit

Get property unit value.

Returns String (opens new window)

# getMin

Get min value.

Returns Number (opens new window)

# getMax

Get max value.

Returns Number (opens new window)

# getStep

Get step value.

Returns Number (opens new window)

# upUnit

Update property unit value. -The change is also propagated to the selected targets.

# Parameters

Returns String (opens new window)

+The change is also propagated to the selected targets.

# Parameters

Returns String (opens new window)

←

→

- + diff --git a/docs/api/property_select.html b/docs/api/property_select.html index b7b40102d..a2c7783b2 100644 --- a/docs/api/property_select.html +++ b/docs/api/property_select.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

+

# getOptions

Get available options.

Returns Array (opens new window)<Object (opens new window)> Array of options

# getOption

Get current selected option or by id.

# Parameters

Returns (Object (opens new window) | null)

# setOptions

Update options.

# Parameters

# addOption

Add new option.

# Parameters

# getOptionId

Get the option id from the option object.

# Parameters

Returns String (opens new window) Option id

# getOptionLabel

Get option label.

# Parameters

Returns String (opens new window) Option label

← →

- + diff --git a/docs/api/property_stack.html b/docs/api/property_stack.html index 69aedf20c..b97ce5219 100644 --- a/docs/api/property_stack.html +++ b/docs/api/property_stack.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

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

# Parameters

Returns Object (opens new window) Style object

# getLayerSeparator

Get layer separator.

Returns RegExp (opens new window)

← →

- + diff --git a/docs/api/rich_text_editor.html b/docs/api/rich_text_editor.html index 07c61b136..95c9922b3 100644 --- a/docs/api/rich_text_editor.html +++ b/docs/api/rich_text_editor.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

+

Returns Object (opens new window) Removed action

# getToolbarEl

Get the toolbar element

Returns HTMLElement (opens new window)

←

GrapesJS

# Sector

# Properties

# getId

Get sector id.

Returns String (opens new window)

# getName

Get sector name.

Returns String (opens new window)

# setName

Update sector name.

# Parameters

# isOpen

Check if the sector is open

Returns Boolean (opens new window)

# setOpen

Update Sector open state

# Parameters

# isVisible

Check if the sector is visible

Returns Boolean (opens new window)

# getProperties

Get sector properties.

# Parameters

Returns Array (opens new window)<Property>

+ (opens new window)

# Sector

# Properties

# getId

Get sector id.

Returns String (opens new window)

# getName

Get sector name.

Returns String (opens new window)

# setName

Update sector name.

# Parameters

# isOpen

Check if the sector is open

Returns Boolean (opens new window)

# setOpen

Update Sector open state

# Parameters

# isVisible

Check if the sector is visible

Returns Boolean (opens new window)

# getProperties

Get sector properties.

# Parameters

Returns Array (opens new window)<Property>

← →

- + diff --git a/docs/api/selector.html b/docs/api/selector.html index ecd440e8a..5e0996209 100644 --- a/docs/api/selector.html +++ b/docs/api/selector.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

+

# getActive

Get selector active state.

Returns Boolean (opens new window)

# setActive

Update selector active state.

# Parameters

← →

- + diff --git a/docs/api/selector_manager.html b/docs/api/selector_manager.html index 55d9bfacc..40fb43b3a 100644 --- a/docs/api/selector_manager.html +++ b/docs/api/selector_manager.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

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

# Parameters

# getComponentFirst

Get the value of component-first option.

Returns Boolean (opens new window)

# getAll

Get all selectors

Returns Collection<Selector>

←

GrapesJS

# State

# Properties

# getName

Get state name

Returns String (opens new window)

# getLabel

Get state label. If label was not provided, the name will be returned.

Returns String (opens new window)

+ (opens new window)

# State

# Properties

# getName

Get state name

Returns String (opens new window)

# getLabel

Get state label. If label was not provided, the name will be returned.

Returns String (opens new window)

← →

- + diff --git a/docs/api/storage_manager.html b/docs/api/storage_manager.html index 98b6a571d..21419b6bd 100644 --- a/docs/api/storage_manager.html +++ b/docs/api/storage_manager.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

+

Returns Object (opens new window) Loaded data.

← →

- + diff --git a/docs/api/style_manager.html b/docs/api/style_manager.html index da0fa4556..fcf69f4bf 100644 --- a/docs/api/style_manager.html +++ b/docs/api/style_manager.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

+

# getType

Get type

# Parameters

Returns Object (opens new window) Type definition

# getTypes

Get all types

Returns Array (opens new window)

←

→

- + diff --git a/docs/api/undo_manager.html b/docs/api/undo_manager.html index 9a4a9324c..80caf8bbb 100644 --- a/docs/api/undo_manager.html +++ b/docs/api/undo_manager.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

←

+ diff --git a/docs/getting-started.html b/docs/getting-started.html index 1d4f1e443..73d7fcce7 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -4,15 +4,15 @@ Getting Started | GrapesJS - + - - - + + +
GrapesJS

← →

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

+

# Plugins

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

←

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

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

# Plugins

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

← →

- + diff --git a/docs/index.html b/docs/index.html index 16aa00a26..6e8fddc4c 100644 --- a/docs/index.html +++ b/docs/index.html @@ -4,14 +4,14 @@ Introduction | GrapesJS - + - - - + + +
GrapesJS
- + diff --git a/docs/modules/Assets.html b/docs/modules/Assets.html index 3db66ca9b..72bb9e2ff 100644 --- a/docs/modules/Assets.html +++ b/docs/modules/Assets.html @@ -4,14 +4,14 @@ Asset Manager | GrapesJS - + - - - + + +
GrapesJS

+

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

# Events

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

←

- + diff --git a/docs/modules/Blocks.html b/docs/modules/Blocks.html index 1f56d2c1c..01b6fa436 100644 --- a/docs/modules/Blocks.html +++ b/docs/modules/Blocks.html @@ -4,14 +4,14 @@ Block Manager | GrapesJS - + - - - + + +
GrapesJS

+

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

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

# Events

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

←

GrapesJS

+

# Conclusion

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

←

GrapesJS

+

Keep in mind that the editor won't render those dependencies in the exported HTML (eg. via editor.getHtml()), so it's up to you how to include them in the final page where the final HTML is rendered.

← →

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

DANGER

Keep the isComponent function as simple as possible

Be aware that this method will probably receive ANY parsed element from your canvas (eg. on load or on add) and not all the nodes have the same interface (eg. properties/methods). If you do this:

// ...
 // Print elements
 isComponent: el => {
@@ -559,7 +559,7 @@ editor.addCo
     “@babel/plugin-transform-react-jsx”
   ]
 }
-

You can also customize the pragma function which executes the transformation [“@babel/plugin-transform-react-jsx”, { “pragma”: “customCreateEl” }], by default React.createElement is used (you'll need a React instance available in the file to make it work).

A complete example of this approach can be found here (opens new window)

+

You can also customize the pragma function which executes the transformation [“@babel/plugin-transform-react-jsx”, { “pragma”: “customCreateEl” }], by default React.createElement is used (you'll need a React instance available in the file to make it work).

A complete example of this approach can be found here (opens new window)

← →

- + diff --git a/docs/modules/I18n.html b/docs/modules/I18n.html index 17b6bab8d..fa2250ab8 100644 --- a/docs/modules/I18n.html +++ b/docs/modules/I18n.html @@ -4,14 +4,14 @@ I18n (Internationalization) | GrapesJS - + - - - + + +
GrapesJS

+

← →

- + diff --git a/docs/modules/Layers.html b/docs/modules/Layers.html index 314c56ea7..6c2ac2b9e 100644 --- a/docs/modules/Layers.html +++ b/docs/modules/Layers.html @@ -4,14 +4,14 @@ Layer Manager | GrapesJS - + - - - + + +
GrapesJS

+

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

# Events

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

←

GrapesJS

+

Here an example of using the Bootstrap modal.

# Events

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

←

GrapesJS

+

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

# Boilerplate

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

  • https://github.com/artf/grapesjs-preset-webpage
  • https://github.com/artf/grapesjs-preset-newsletter

← →

- + diff --git a/docs/modules/Selectors.html b/docs/modules/Selectors.html index c5016b2e7..f13b4e855 100644 --- a/docs/modules/Selectors.html +++ b/docs/modules/Selectors.html @@ -4,14 +4,14 @@ Selector Manager | GrapesJS - + - - - + + +
GrapesJS

+

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

# Events

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

←

GrapesJS

WARNING

You should only rely on the JSON project data in order to load your project properly in the editor.

The editor is able to parse and use HTML/CSS code, you can use it as part of your project initialization but never rely on it as a persitance layer in the load of projects as many information could be stripped off.

# Storage strategy

Project data are automatically stored every time the amount of changes (editor.getDirtyCount()) reaches the number of steps before save (editor.Storage.getStepsBeforeSave()). On any successful store of the data, the counter of changes is reset (editor.clearDirtyCount()).

TIP

When necessary, you can always trigger store/load manually.

// Store data
+

DANGER

You should only rely on the JSON project data in order to load your project properly in the editor.

The editor is able to parse and use HTML/CSS code, you can use it as part of your project initialization but never rely on it as a persitance layer in the load of projects as many information could be stripped off.

# Storage strategy

Project data are automatically stored every time the amount of changes (editor.getDirtyCount()) reaches the number of steps before save (editor.Storage.getStepsBeforeSave()). On any successful store of the data, the counter of changes is reset (editor.clearDirtyCount()).

TIP

When necessary, you can always trigger store/load manually.

// Store data
 const storedProjectData = await editor.store();
 
 // Load data
@@ -106,7 +106,7 @@ npx json-server --watch db.json
     }
   }
 });
-

WARNING

Be sure to configure properly CORS (opens new window) on your server API. The json-server (opens new window) is not intended to be used in production and therefore enables all of them automatically.

# Server setup

Server configuration might differ case to case so usually, it's up to you to know how to configure it properly. +

DANGER

Be sure to configure properly CORS (opens new window) on your server API. The json-server (opens new window) is not intended to be used in production and therefore enables all of them automatically.

# Server setup

Server configuration might differ case to case so usually, it's up to you to know how to configure it properly. The default remote storage follows a simple REST API approach with project data exchanged as a JSON (Content-Type: application/json).

  • On load (GET method), the JSON project data are expected to be returned directly in the response. As from example above, you can use options.remote.onLoad to extract the project data if the response contains other metadata.
  • On store (POST method), the editor doesn't expect any particular result but only a valid response from the server (status code 200).

# Storage API

The Storage Manager module has also its own set of APIs that allows you to extend and add new functionalities.

# Define new storage

Defining a new storage is a matter of passing of two asyncronous methods to the editor.Storage.add API. For a sake of simplicity, the example below illustrates the API usage for defining the session storage by using sessionStorage API (opens new window).

const sessionStoragePlugin = (editor) => {
   // As sessionStorage is not an asynchronous API,
   // the `async` keyword could be skipped
@@ -251,7 +251,7 @@ In case you have a strict requirement to execute also other logic connected to t
     storageManager: { type: 'inline' },
   });
 </script>
-

In the example above we're relying on two hidden inputs, one for containing the project data and the another one for the HTML/CSS.

# Events

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

+

In the example above we're relying on two hidden inputs, one for containing the project data and the another one for the HTML/CSS.

# Events

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

← →

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

+

# Events

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

← →

- + diff --git a/docs/modules/Traits.html b/docs/modules/Traits.html index c7d5ee94a..21b0efad9 100644 --- a/docs/modules/Traits.html +++ b/docs/modules/Traits.html @@ -4,14 +4,14 @@ Trait Manager | GrapesJS - + - - - + + +
GrapesJS