Issue #1583Opened November 15, 2018by sambarnes901 reactions

[Question] Amending urlStore and urlLoad dynamically.

Question

Hi Everyone

I'm loving Grapesjs so far - thanks for all your work on it.

I'm in the process of trying to set up storage for whole page templates which will be written to a MongoDB via mongoose.

  • GrapesJS Version: 0.14.40
  • OS: Ubuntu 17.10

Looking at the HTTP responses I seem to be able to store and receive them ok.

My Express server routes look like this:

app.post('/store/:name',function(req,res){
  var template = req.body;
  template.name = req.params.name;
  template.id = req.params.name
  Template.findOneAndUpdate({name:template.name},req.body,{"new":true,"upsert":true},function(err,item){
    if(err){console.log(err);} else {
      Template.find({},function(err,templates){
        if(err){console.log("Error in Template Find Callback:");console.log(err);res.send(err);} else {
          res.send(templates);
        }
      })      
    }
  });

The idea being that I can post to /store/my-template-name to create a new template with the name "my-template-name".

My first hunch was to try and update the urlStore and urlLoad variables from the storageManager object which currently looks like this:

      storageManager: {
        type: 'remote',          // Type of the storage
        id: '',
        urlStore: 'http://server/store/default', // Endpoint to store the templates (Must have a name after the final /)
        urlLoad: 'http://server/store/default', // Endpoint to load the templates (Must have a name after the final /)
        autosave: true,         // Store data automatically
        autoload: false,         // Autoload stored data on init
        stepsBeforeSave: 1,     // If autosave enabled, indicates how many changes are necessary before store method is triggered
        contentTypeJson: true
      },

Using some kind of function:

  function getNewTemplateName() {
    return document.querySelector('#new-template-name').value;
  };
  function handleNewTemplate(event){
    event.preventDefault();
    console.log(event);
    var newTemplateName = getNewTemplateName();
    var newTemplate = editor.store();
    newTemplate.name = newTemplateName;
    editor.StorageManager.getConfig().urlStore = 'http://server/store/' + newTemplateName,
    editor.StorageManager.getConfig().urlLoad = 'http://server/store/' + newTemplateName,
    editor.store();
  };

However - I'm sure I'm missing a trick somewhere as it's not functioning as I expect at the moment.

The post that happens on the editor.store() is still going to the old URL, not the new one I've set in the handleNewTemplate function.

I'm presuming I need to reinit the editor somehow when those values have changed?

But then won't I lose the current template as it'll just revert to my initial one?

Or am I just barking up the wrong tree completely and should be focusing on a different server setup?

Thanks for any help you can give all!

Answers (2)

sambarnes90November 16, 20181 reactions

Ok here's what I missed for future reference.

The way I've set the 'new' store URL is incorrect here:

    editor.StorageManager.getConfig().urlStore = 'http://server/store/' + newTemplateName,
    editor.StorageManager.getConfig().urlLoad = 'http://server/store/' + newTemplateName,

That's not actually setting the variable correctly.

I needed to use the .get() method on StorageManager to get the storage I was working with, then use .set() on StorageManager to amend the values instead:

editor.StorageManager.get('remote').set({
     urlStore: 'http://server/store/' + name, 
     urlLoad: 'http://server/store/' + name
});
lock[bot]November 16, 20190 reactions

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.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.