Issue #358✓ SolvedOpened October 1, 2017by daniel-farina3 reactions

Calling updateScript from the script section of a pluging

快速解答by daniel-farina2

@artf Thank you for clarifying that. It makes perfect sense. What I ended up doing is: Making a function within my plugin's script that is called based on the user's interaction with a modal. so I can refresh it now when I detect the user completed the API access request (when he clicks the done button). I still have...

Read full answer below ↓

Question

Hi guys,

I've been stuck for a few hours trying to figure out how to call updateScript from the script section of a custom plugin. So far I was able to create my own plugin which I would like to share once it's stable. I need to refresh it once it connects to an external API and retrieves specific data.

export default function(editor, opt = {}) {
    const c = opt;
    const editr = editor;
    const domc = editor.DomComponents;
...
    domc.addType(COMPONENT_TYPE, {
        model: defaultModel.extend({
            defaults: ....
            script: function()
    {
       // ** ********** HOW DO I CALL IT   FROM HERE**
        this.updateScript

    }
}

    view: defaultView.extend({
        init()
        {
            this.listenTo(this.model, 'change:clienId change:limitImages', this.updateScript);
            const comps = this.model.get('components');

        }

any help is appreciated !

Thank you!

Answers (3)

👍 Most helpfuldaniel-farinaOctober 4, 2017

@artf Thank you for clarifying that. It makes perfect sense. What I ended up doing is:

Making a function within my plugin's script that is called based on the user's interaction with a modal. so I can refresh it now when I detect the user completed the API access request (when he clicks the done button).

I still have many things to add/fix/finish but it's taking shape!

Instagram plugin preview: ezgif com-video-to-gif

Todo:

  • Give user the options to select how many pictures per row on different screen sizes
  • Select between Gallery or Slider
  • Allow user to select a limit of images he would like to display
  • Add video, likes and link to see original on hover.
artfOctober 4, 2017

Amazing work @daniel-farina excited to see it done 😍

artfOctober 3, 2017

Hi @daniel-farina this is something might confuse a lot of people, especially when you see the script as a function. Everything inside script is completely out of the scope of GrapesJS, there is nothing to access (model/view/methods) all the transformations should be inside that script. Let's just take as an example some new custom component with js, the editor will generate a code similar to this:

...
<!-- Generated HTML -->
<div id="c123">Your component content...</div>
<script>
     ...
     // Generated JS
     var el = document.getElementById('c123');
     el.updateScript() // <-- This will obviously throw an error
     // This is your final template with JS, there is no GrapesJS, no models/views
</script>

Just take a look on how I've made the script part in Countdown Component There you can see a trick used to grab a property from the model.

...
script: function() {
     // will be replaced by GrapesJS with `model.get('startfrom')`
     var startfrom = '{[ startfrom ]}';
     ...

This is the only way you can pass "stuff" I hope this helps

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...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.