GrapesJS / preset-newsletter

GrapesJS preset configuration for the newsletter editor.
https://grapesjs.com/demo-newsletter-editor.html
BSD 3-Clause "New" or "Revised" License
193 stars 143 forks source link

Create and Edit Template into Database #17

Closed kamleshkatpara closed 7 years ago

kamleshkatpara commented 7 years ago

This is my code to Create a new template and insert the inline html with style into the database :

       var editor = grapesjs.init
           ({
              height: '100%',
              container : '#gjs',
              plugins: ['gjs-preset-newsletter'],
          storageManager: {
              id:'',
              type: 'remote',
              autosave: false,
              urlStore: '<?php base_url(); ?>/dragdropeditor/dragdrop/add',
              contentTypeJson: true,
              },
          });

          editor.Panels.addButton('options', [{
               id: 'save',
                    className: 'fa fa-floppy-o icon-blank',
                    command: function (editor, sender) {
                        if (sender)
                            sender.set('active', 0);
                          var html = editor.runCommand('gjs-get-inlined-html');
                          var storageManager = editor.StorageManager;
                          storageManager.store({"template-data":html})
                         // editor.store();
                          alert('Draft');

                        editor.on('storage:store', function (e) {

                            console.log('CompleteHTML: ', html);
                        });
                    },

                    attributes: {title: 'Save Template'}
                }]);        

I am able to insert the template-data into database in this manner :

created_at id template-name template-data
2017-10-05 12:13:09 3 first Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

My edit template code :

var id = '<?php echo $this->uri->segment('3'); ?>';

     var editor = grapesjs.init
           ({
             height: '100%',
              container : '#gjs',
              plugins: ['gjs-preset-newsletter'],
          storageManager: {
              type: 'remote',
              autosave: false,
              urlStore: '<?php echo base_url(); ?>dragdropeditor/dragdrop/add',
              urlLoad: '<?php echo base_url(); ?>dragdropeditor/dragdrop/fetch/'+id,
              contentTypeJson: true,
              },
          });

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

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

Wonder why its not loading it into urlLoad

@artf @sonnylloyd

arthuralmeidap commented 7 years ago

@mekamleshk you can debug with the Developer Tools. Open the developer tools and run the grapesjs and see if the XHR is happening and what is the body of the response

artf commented 7 years ago

@mekamleshk first of all, learn how to post your code on GitHub please https://guides.github.com/features/mastering-markdown/ I'm wasting my time just by reading/fixing them

kamleshkatpara commented 7 years ago

@artf I have updated my code. I am sending and retrieving the template data like this :

                     `var html = editor.runCommand('gjs-get-inlined-html');
                      var storageManager = editor.StorageManager;
                      storageManager.store({"template-data":html})`

I am able to store it into database but while editing the template urlLoad does not take that format which I had sent while saving it into database

artf commented 7 years ago

just load it manually then