Calling updateScript from the script section of a pluging
@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)
@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:

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.
Amazing work @daniel-farina excited to see it done 😍
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.
Issue #769
Need further info to create backend for Asset Manager
I'm trying to figure out how to write a backend (in ASP.NET Core) for the Asset Manager. I've looked at a few of the Wiki pages, but still...
Issue #362
How to create custom link components that prompts users to type link/choose link similar to Images Component Modal
Image Components have logic to call Modal and prompt user's interaction for options/configuration of image url. Would like to do similar to...
Issue #1864
[QUESTION] Best way to listen to changes on the final HTML?
Hi, I just had a quick question because I could not figure out how to do it or did not find an issue related to it. I am just trying to cal...
Issue #429
custom component save
hi @artf sorry to be a pain i really didn't want to open a issue ticket but i have been stuck for days trying to achieve my end goal i have...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →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.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.