Grapesjs: [BUG] Scripts do not work when added dynamically added to iframe <head>

Created on 7 Oct 2019 · 4Comments · Source: artf/grapesjs

I am using the latest version of grapesjs (0.15.8) and running it on Windows 10 x64 on Electron (this is not a issue with electron) and am facing a problem when I try to dynamically attach scripts to the editor iframe, I have included a link to CodePen for more on this issue. In my project I have to dynamically change scripts. Scripts only work when I add them through canvas: {scripts: ['...']} not when I $(editor.Canvas.getDocument().head).append("...");

CodePen

Please suggest fix or workaround. (love the project btw)

Source

TheComputerM

All 4 comments

Hi there! see if this can help you out:

const scriptEl = document.createElement('script');
scriptEl.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js';
editor.Canvas.getDocument().head.appendChild(scriptEl);

cheers!

pouyamiralayi on 7 Oct 2019

👍1

Thank you very much, the fix worked, but why does it not work with jQuery?

TheComputerM on 8 Oct 2019

👍1

why does it not work with jQuery?

when you use canvas: {scripts: ['...']} to inject a script like _jQuery_, it will be exposed inside editor Canvas not inside your _development environment_.
cheers!

pouyamiralayi on 8 Oct 2019

Ok thanks a lot.

TheComputerM on 9 Oct 2019

👍1

Was this page helpful?

0 / 5 - 0 ratings