grapejs storage
Opened this issue · 0 comments
Hello,
We need to store template/ page in grapejs remote storage. load function work well but store function not work and we create db.json file to store data. please tell us what we done wrong in this following code.
const projectEndpoint = your_url/db.json;
const editor = grapesjs.init({
height: "100%",
container: "#editor",
showOffsets: true,
fromElement: true,
noticeOnUnload: false,
pageManager: true, // This should be set to true
type: 'remote',
autosave: true,
autoload: true,
stepsBeforeSave: 1,
contentTypeJson: true,
urlStore: projectEndpoint,
urlLoad: projectEndpoint,
params: {},
selectorManager: {
componentFirst: true
},
plugins: ["grapesjs-component-code-editor", "grapesjs-parser-postcss","gjs-preset-webpage","grapesjs-project-manager"],
pluginsOpts: {
"grapesjs-component-code-editor": {
/* Test here your options */
},
"grapesjs-project-manager": {
loadFirst: true,
},
}
});
const pn = editor.Panels;
const panelViews = pn.addPanel({
id: "views"
});
panelViews.get("buttons").add([
{
attributes: {
title: "Open Code"
},
className: "fa fa-file-code-o",
command: "open-code",
togglable: false, //do not close when button is clicked again
id: "open-code"
}
]);
const tp = editor.Panels;
const panelOpts = tp.addPanel({
id: 'options'
});
tp.addButton('views', {
id: 'open-pages',
className: 'fa fa-file-o',
attributes: {
title: 'Take Screenshot'
},
command: 'open-pages',
togglable: false
});
panelOpts.get('buttons').add([{
attributes: {
title: 'Open projects and templates'
},
className: 'fa fa-folder-o',
command: 'open-templates',//Open modal
id: 'open-templates'
}, {
attributes: {
title: 'Save As Template'
},
className: 'fa fa-save white-color',
command: 'save-as-template',//Save page as template
togglable: false,
id: 'save-as-template'
}]);
editor.on('storage:load', function(e) {
console.log('Loaded ', e);
editor.render();
//autorender: 0;
});
editor.on('storage:store', function(e) {
var htmldata = editor.getHtml();
var cssdata = editor.getCss();
console.log(htmldata);
console.log(cssdata);
console.log('store', e);
});
Thank you...