Adding inline scripts and updating old events
I tried to update the inline script using the following steps:Get the document of the iframe: iframeDoc = editor.Canvas.getDocument()Get the innerHTML of the body of the document: iframeDocBodyHtml = iframeDoc.body.innerHTMLReplace the innerHTML of the body: iframeDoc.body.innerHTML = iframeDocBodyHtmlReattach the inl...
Read full answer below βQuestion
In that case, I suggest you access the document of the iframe and to append manually the inline script (to get the document use editor.Canvas.getDocument()) Originally posted by @artf in https://github.com/artf/grapesjs/issues/2012#issuecomment-496304498 Hey, @artf, I was going through the issue, #2012 and I have a doubt. If a change is made to the script e.g. change in alert msg on click. Then multiple events are added. How to remove the old events and add new ones (without saving and reloading). One way is to refresh the iframe but that leads to the loss of all the events (even the predefin...
Answers (4)
I tried to update the inline script using the following steps:Get the document of the iframe: iframeDoc = editor.Canvas.getDocument()Get the innerHTML of the body of the document: iframeDocBodyHtml = iframeDoc.body.innerHTMLReplace the innerHTML of the body: iframeDoc.body.innerHTML = iframeDocBody...
I tried to add the select and hover events by running component-select command by writing editor.trigger('core:component-select') but that didn't help either and doing editor.runCommand('core:component-select') gives an error.
Am I missing something?
Well, I think it won't be bad to add an easy way to force the rerender of the iframe (not a common case but for sure might be useful in some cases). Unfortunately, right now, you should try to use private methods and check if everything works as expected, then if you confirm, I'll be happy to add a...
Thanks for reporting this, @theSC0RP. Great question about Adding inline scripts and updating old events. The recommended approach with Canvas is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look for the on() event listener method Most operation...
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3714
Partial parse
Discussed in https://github.com/artf/grapesjs/discussions/3711 <div type='discussions-op-text'> <sup>Originally posted by ltenti August 17,...
Issue #3668
Cant Reset Canvas after Moving/scaling it
WARNING READ and FOLLOW next 3 steps, then REMOVE them before posting the issueFollow CONTRIBUTING Guidelines https://github.com/artf/grape...
Issue #3405
An event to hook into before a block in dropped into the canvas
WARNING READ and FOLLOW next 3 steps, then REMOVE them before posting the issueFollow CONTRIBUTING Guidelines https://github.com/artf/grape...
Issue #3342
JQuery not working for script in component
Hi! I have tried adding jquery in canvas as well as in index.html I am adding it in canvas like this- canvas = editor.Canvas; const script1...
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.
Tutorial
How to integrate GrapesJS into an Astro app (complete guide 2026)
Embed GrapesJS in an Astro site: mount it in a client-side script, save content to an Astro API endpoint, and export clean HTML/CSS.
Tutorial
GrapesJS custom components guide (2026)
Define custom GrapesJS components with DomComponents.addType: detection with isComponent, a model with traits and defaults, and a view for canvas behavior.
Tutorial
How to integrate GrapesJS into a Django app (complete guide 2026)
Embed GrapesJS in a Django project: render the editor in a template, persist content to a view with CSRF, store the project JSON, and export HTML/CSS.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.