Grapesjs: Save the template into Database

[kamleshkatpara]

Hi artf,

thanks for creating such a wonderful framework, I am using it for newsletter.
I just had a question on how can I store the template into my database and retrieve it for different types of newsletter I create.

[cmcintosh]

Take a look at https://github.com/artf/grapesjs/wiki/API-Storage-Manager

You can define a new type of storage, and use AJAX to store the template info in the database. TBH im working on the loading part still myself.

It would be good @artf if we could get a wiki page added for an example tutorial around this or expand the documentation a bit around what things can be done with Remote storage.

[kamleshkatpara]

Thank you @cmcintosh

[artf]

For an example on how to configure the Remote Storage, check here #122 Hope to post soon some wiki about it

[kamleshkatpara]

I am not able to find in which function or object is the data of html, css and js of the template been stored, In case I want to send that data via ajax post what needs to be done please provide some inputs
@cmcintosh

[cmcintosh]

you can use editor.getHtml() or editor.getCss() respectively to get that part. What i am doing is storing the json returned when it sends to post to my endpoint, then just returning when the editor calls my load endpoint.

[kamleshkatpara]

This is my code :

   var editor = grapesjs.init
       ({
          height: '100%',
          fromElement: 1,
          clearOnRender: true,
          container : '#gjs',
          plugins: ['gjs-preset-newsletter'],
          storageManager: {
          autosave: false,
          setStepsBeforeSave: 1,
          type: 'remote',
          urlStore: 'http://cimailer.dev/templates/template',
          urlLoad: 'http://cimailer.dev/templates/template',
          contentTypeJson: true,
          },
      });

      editor.Panels.addButton
      ('options',
        [{
          id: 'save-db',
          className: 'fa fa-floppy-o',
          command: 'save-db',
          attributes: {title: 'Save DB'}
        }]
      );

    // Add the command
    editor.Commands.add
    ('save-db',
    {
        run: function(editor, sender)
        {
          sender && sender.set('active', 0); // turn off the button
          editor.store();

          var htmldata = editor.getHtml();
          var cssdata = editor.getCss();
          console.log(htmldata);
          console.log(cssdata);
          $.post("templates/template",
          {
            html: htmldata,
            css: cssdata
          });
        }
    });

Little Confused with https://github.com/artf/grapesjs/issues/122
@cmcintosh @artf

[artf]

@mekamleshk your code should work, where is the problem?

[kamleshkatpara]

Updated my code sitll not working, Not receiving data in POST @artf

[artf]

Not receiving data in POST

Well, might be just a problem with your server script, so it's not helping. Check what it's sending in devtools

[kamleshkatpara]

Hi @artf

It was just the double quotes, now I can get the data in post

 var editor = grapesjs.init
       ({
          height: '100%',
          fromElement: 1,
          clearOnRender: true,
          container : '#gjs',
          plugins: ['gjs-preset-newsletter'],
          storageManager: {
          autosave: false,
          setStepsBeforeSave: 1,
          type: 'remote',
          urlStore: 'http://cimailer.dev/lets_dragdrop',
          urlLoad: 'http://cimailer.dev/lets_dragdrop',
          contentTypeJson: true,
          },
      });

      editor.Panels.addButton
      ('options',
        [{
          id: 'save-db',
          className: 'fa fa-floppy-o',
          command: 'save-db',
          attributes: {title: 'Save DB'}
        }]
      );

    // Add the command
    editor.Commands.add
    ('save-db',
    {
        run: function(editor, sender)
        {
          sender && sender.set('active', 0); // turn off the button
          editor.store();

          var htmldata = editor.getHtml();
          var cssdata = editor.getCss();
          console.log(htmldata);
          console.log(cssdata);
          $.post("http://cimailer.dev/lets_dragdrop",
          {
            "html": htmldata,
            "css": cssdata
          });          
        }
    });

I have a question on store Manager it doesn't seem to work:

storageManager: { autosave: false, setStepsBeforeSave: 1, type: 'remote', urlStore: 'http://cimailer.dev/lets_dragdrop', urlLoad: 'http://cimailer.dev/lets_dragdrop', contentTypeJson: true, },

[artf]

@mekamleshk please use ``` for posting formatted code, anyway I don't understand where is your problem...

[kamleshkatpara]

@artf If you see at the bottom of the code I am using ajax post, I don't want to use it.
I have a question why are the urlLoad and urlStore urls in the storageManager not being used :

 var editor = grapesjs.init
       ({
          height: '100%',
          fromElement: 1,
          clearOnRender: true,
          container : '#gjs',
          plugins: ['gjs-preset-newsletter'],
          storageManager: {
          autosave: false,
          type: 'remote',
          urlStore: 'http://cimailer.dev/lets_dragdrop',
          urlLoad: 'http://cimailer.dev/lets_dragdrop',
          contentTypeJson: true,
          },
      });


    // Add the command
    editor.Commands.add
    ('save-db',
    {
        run: function(editor, sender)
        {
          sender && sender.set('active', 0); // turn off the button
          editor.store();

          var htmldata = editor.getHtml();
          var cssdata = editor.getCss();
          console.log(htmldata);
          console.log(cssdata);
          $.post("http://cimailer.dev/lets_dragdrop",
          {
            "html": htmldata,
            "css": cssdata
          });          
        }
    });

I want to only use the storageManager

[artf]

Are you able to see the ajax call in inspector?
Have you tried to add storage listeners?

editor.on('storage:load', function(e) {
      console.log('Loaded ', e);
})
editor.on('storage:store', function(e) {
      console.log('Stored ', e);
})

[kamleshkatpara]

Thanks alot it worked guys ! :+1:
@artf @cmcintosh

      var editor = grapesjs.init
           ({
              height: '100%',
              fromElement: 1,
              clearOnRender: true,
              container : '#gjs',
              plugins: ['gjs-preset-newsletter'],
              storageManager: {
              autosave: false,
              setStepsBeforeSave: 1,
              type: 'remote',
              urlStore: 'http://cimailer.dev/templates/template',
              urlLoad: 'http://cimailer.dev/templates/template',
              contentTypeJson: true,
              },
          });

          editor.Panels.addButton
          ('options',
            [{
              id: 'save-db',
              className: 'fa fa-floppy-o',
              command: 'save-db',
              attributes: {title: 'Save DB'}
            }]
          );

        // Add the command
        editor.Commands.add
        ('save-db', {
            run: function(editor, sender)
            {
              sender && sender.set('active'); // turn off the button
              editor.store();
            }
        });
        editor.on('storage:load', function(e) { console.log('Loaded ', e);});
        editor.on('storage:store', function(e) { console.log('Stored ', e);});  

[shareefhiasat]

@kamleshkatpara i dont understand on your last post you said it worked , i noticed you removed the post part.
while at first post or second you say is storeurl or loadurl is even used !.

what happend since you discarded your post part, dose the store automatically send the html and css objects/jsons, because in my case it dose not send it

@artf can you comment please thanks , docs dose not clearly say what it will send to store/load url as parameter

[artf]

@shareefhiasat read this https://github.com/artf/grapesjs/wiki/Storage

[abdodeve]

Thank you my problem was i missed this -----> before retrieving html editor.store();