Save to mysql

[nhanlego1]

Hi Is it possible to save to mysql instead storage? Thanks

[martcot]

Hi, I think you have to use the remote store manager save data like explained here https://github.com/artf/grapesjs/wiki/API-Storage-Manager

storageManager.add('local2', { load: function(keys){ var res = {}; for (var i = 0, len = keys.length; i < len; i++){ var v = localStorage.getItem(keys[i]); if(v) res[keys[i]] = v; } return res; }, store: function(data){ for(var key in data) localStorage.setItem(key, data[key]); }

//Send ajax to save data to mysql

});

storageManager.setCurrent('local2');

[artf]

Sure @nhanlego1 you just have to send data via remote storage to some back-end script which stores data in mysql

var editor = grapesjs.init({
    container : '#gjs',
    ...
    storageManager: {
      type: 'remote',
      urlStore: 'http://store/endpoint',
      urlLoad: 'http://load/endpoint',
      params: {},   // For custom values on requests
    }
});

[martcot]

@artf I did what you just said but I have some problem.

Is load url suppose to trigger automatically like the save url?

I get data manually with something like:

var storageManager = editor.StorageManager; storageManager.load('gjs-assets')

it return data like this:

[{"type":"image","src":"http://localhost:8000/media/userimages/hdc-accueil_yB5aNNB.jpg","unitDim":"px","height":0,"width":0}]

But images are not loaded in images components.

I'm looking a way to save images added and deleted by users. I'm able to upload images but not manage it in images components.

[martcot]

I got it!

[virazura]

@martcot how do you do that? i want to save it to mysql and then post it do you know how?

[nhanlego1]

Hi @virazura I did it, and will share to you

1. Add button in panel http://prntscr.com/ftp6wd var pnm = editor.Panels; pnm.addButton('options', [ { id: 'save-database', className: 'fa fa-floppy-o', command: 'save-database', attributes: {title: 'Save to database'} } ])
2. Add action for this button then get all setting then save db cmdm.add('save-database', { run: function (em, sender) { sender.set('active', true); var InnerHtml = this.frameEl.contentDocument.activeElement.innerHTML; $.post("/components/save/component", {html: InnerHtml}, function (result) { //do some code }); }, });

Good luck to you Friend!

[martcot]

Hi @virazura ,

I did exactly what @artf said:

storageManager: { autosave: false, //setStepsBeforeSave: 2, type: 'remote', urlStore: '/app/save_gjs_data/', urlLoad: '/app/load_gjs_data/', },

[virazura]

@nhanlego1 i tried the code, it works to add the button but im kinda stuck with the function. Can you be more specific or show me your code so it'll enlighten me. Sorry to bother you

[virazura]

@nhanlego1 i tried the code, it works to add the button but im kinda stuck with the function. Can you be more specific or show me your code so it'll enlighten me. Sorry to bother you

[nhanlego1]

Hi @virazura This is full my code

1. Add button save var pnm = editor.Panels; pnm.addButton('options', [{ id: 'save-db', className: 'fa fa-flopy icon-flopy', command: 'save-db', attributes: {title: 'Save DB'} }

2. Function code to action command var cmdm = editor.Commands; cmdm.add('save-db', { run: function (em, sender) { sender.set('active', true); //get full HTML structure after design var InnerHtml = this.frameEl.contentDocument.activeElement.innerHTML; //set post to save all HTML structure after design to DB $.post("save.php", {html: InnerHtml}, function (result) { //action after save success }); }, });

3. Function code to save db The code is in file save.php if (isset($_POST['html'])) { $created = time(); $sql = "INSERT INTO templates ( html, created) VALUES ( '$_POST['html']', $created)"; if (mysqli_query($conn, $sql)) { echo 'done'; } else { die("Error:" . mysqli_error($conn)); } }

[artf]

@virazura As already mentioned and suggested by @martcot all you have to do is setup the remote storage

var editor = grapesjs.init({
    container : '#gjs',
    ...
    storageManager: {
      type: 'remote',
      params: {},   // For custom values on requests
      // your SERVER endpoints
      urlStore: 'http://store/endpoint',
      urlLoad: 'http://load/endpoint',
    }
});

You can add a button to trigger the storage, as suggested by @nhanlego1

// Add the button
editor.Panels.addButton('options', [{ 
  id: 'save-db', 
  className: 'fa fa-flopy icon-flopy', 
  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();
    }
  });

@nhanlego1 if you want your custom storage logic is ok, but don't do this

var InnerHtml =  this.frameEl.contentDocument.activeElement.innerHTML

you'll also store stuff related to the editor (styles, scripts, etc.), to get the full template you might use this:

var InnerHtml =  editor.getHtml() + '<style>' + editor.getCss()  + '</style>';

[virazura]

@artf what does urlstore and urlload supposed to be? I tried it but the button didnt do any action

[virazura]

@artf when i put the type: 'remote' it ruined the look of my website

[artf]

urlStore and urlLoad are endpoints of your server scripts which supposed to store stuff in DB

[irshadalif]

Can anyone let me know how to store and retrieve the template from mysql in php ? As per my requirement i had list of clients and each client have editor area, so i need to store and fetch the editor for each client. Also let me know how to store and upload images.

Thanks

[dmodules]

Here my code JS and python. In my case I save only assets.

js code: ----------------

editor = grapesjs.init({
        clearOnRender: true,
        height: '100%',
        fromElement: 1,
        clearOnRender: true,
        assetManager: {
          //assets: images,
          upload: '/app/upload_image/2/', // Set to false to disable it
          uploadText: 'Cliquez ici pour télécharger une image',

        },
        storageManager: {
            autosave: false,
            //setStepsBeforeSave: 2,
            type: 'remote',
            urlStore: '/app/save_gjs_data/',
            urlLoad: '/app/load_gjs_data/',
        },
        container : '#gjs',
        plugins: ['gjs-preset-newsletter', 'gjs-aviary'],
        pluginsOpts: {
          'gjs-preset-newsletter': {
            modalLabelImport: 'Paste all your code here below and click import',
            modalLabelExport: 'Copy the code and use it wherever you want',
            codeViewerTheme: 'material',
            //defaultTemplate: templateImport,
            importPlaceholder: '<table class="table"><tr><td class="cell">Hello world!</td></tr></table>',
            cellStyle: {
              'font-size': '12px',
              'font-weight': 300,
              'vertical-align': 'top',
              color: 'rgb(111, 119, 125)',
              margin: 0,
              padding: 0,
            }
          },

        }
    });

python code: ---

store, created = GrapesStorage.objects.get_or_create(site=request.cuser.site)
store.data = request.POST.get('gjs-assets')
store.save()

In POST you have others information.

[irshadalif]

Thanks dmodules.

[irshadalif]

Can anyone let me know how to set the background image in grapesjs?

I am able to add image element and upload it, but i am not able to set background image, please help for the same.

My code is as below:

var editor = grapesjs.init({ fromElement: 1, container : '#gjs', plugins: ['gjs-plugin-forms','gjs-blocks-basic'], pluginsOpts: { 'gjs-plugin-forms': {/ ...options /}, 'gjs-blocks-basic': {/ ...options /} }, assetManager: { assets: lp+'1503660158_781.jpg', upload: '<?php echo base_url('').'Prom_ed/uploadimage'; ?>', // Set to false to disable it uploadText: 'Upload image', contentTypeJson: true, }, storageManager: { autosave: false, //setStepsBeforeSave: 1, type: 'remote', urlStore: '<?php echo base_url('').'Prom_ed/save_ed/'.$moduleId; ?>', urlLoad: '<?php echo base_url('').'Prom_ed/get_ed/'.$moduleId; ?>', 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();
    }
});

[artf]

@irshadalif for other kinds of problems please open another issue, by the way, you set background images via style manager (check the demo page if you need it)

[irshadalif]

@artf thanks for the reply, this helped me, i'll take care of it.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.