Browse Source

Added `projectData` option

pull/4223/head
Artur Arseniev 5 years ago
parent
commit
cd825006d2
  1. 38
      docs/modules/Storage.md
  2. 20
      src/editor/config/config.js
  3. 6
      src/editor/model/Editor.js

38
docs/modules/Storage.md

@ -313,6 +313,44 @@ Here you can find some of the plugins extending the Storage Manager
## Common use cases
### Init without first load
In case you're using a `remote` storage, you might probably want to skip the initial remote call by loading the project instantly. In that case, you can specify the `projectData` on initialization.
```js
// Get the data before initializing the editor (eg. printed on server-side).
const projectData = {...};
// ...
grapesjs.init({
// ...
// If projectData is not defined we might want to load some initial data for the project.
projectData: projectData || {
pages: [
{
component: `
<div class="test">Initial content</div>
<style>.test { color: red }</style>
`
}
]
},
storageManager: {
type: 'remote',
// ...
},
})
```
In case `projectData` is defined, the initial storage load will be automatically skipped.
### HTML code in project data
### Inline data
## Events ## Events

20
src/editor/config/config.js

@ -2,15 +2,29 @@ export default {
// Style prefix // Style prefix
stylePrefix: 'gjs-', stylePrefix: 'gjs-',
// HTML string or object of components /**
* HTML string or object of components
* @deprecated Rely on `projectData` option
*/
components: '', components: '',
// CSS string or object of rules /**
* CSS string or object of rules
* @deprecated Rely on `projectData` option
*/
style: '', style: '',
// If true, will fetch HTML and CSS from selected container /**
* If true, will fetch HTML and CSS from selected container
* @deprecated
*/
fromElement: 0, fromElement: 0,
/**
* Initial project data
*/
projectData: null,
// Show an alert before unload the page with unsaved changes // Show an alert before unload the page with unsaved changes
noticeOnUnload: true, noticeOnUnload: true,

6
src/editor/model/Editor.js

@ -155,7 +155,11 @@ export default class EditorModel extends Model {
// Defer for storage load events. // Defer for storage load events.
setTimeout(async () => { setTimeout(async () => {
if (this.get('StorageManager').canAutoload()) { const projectData = this.getConfig('projectData');
if (projectData) {
this.loadData(projectData);
} else if (this.get('StorageManager').canAutoload()) {
try { try {
await this.load(); await this.load();
} catch (error) { } catch (error) {

Loading…
Cancel
Save