Adding inline scripts and updating old events

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

theSC0RP · Accepted Answer

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 inline script Doing this leads to a loss of the inbuilt grapesjs events like hover or component select (this is obvious as all the events are lost). Is there a way to reattach these g...

theSC0RP · Answer

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?

artf · Answer

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 listener for something like frame.trigger('rerender'). For now I'd ask you to try something like this

Adding inline scripts and updating old events

Question

Answers (4)

Related Questions and Answers

Partial parse

Cant Reset Canvas after Moving/scaling it

An event to hook into before a block in dropped into the canvas

JQuery not working for script in component

Paid Plugins That Match This Issue

Related tutorials

Claude Skill for GrapesJS: How AI Is Changing the Way We Build Visual Editors

Vanilla GrapesJS vs GrapesJS With Plugins: What You Actually Get Out of the Box (2026)

Lighthouse for GrapesJS: Audit Accessibility and SEO Without Leaving the Editor

Browse Plugin Categories