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 projectID = 1;
const projectEndpoint = url../my-server/db.json;
const editor = grapesjs.init({
height: "100%",
container: "#editor",
showOffsets: true,
fromElement: true,
noticeOnUnload: false,
pageManager: true, // This should be set to true
storageManager: {
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"
}
]);
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 projectID = 1; const projectEndpoint =
url../my-server/db.json; const editor = grapesjs.init({ height: "100%", container: "#editor", showOffsets: true, fromElement: true, noticeOnUnload: false, pageManager: true, // This should be set to true storageManager: { 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...