BUG: Using imported HTML/CSS/JS into the editor shows outlines, but no content, JS Fiddle inside

GrapesJS / grapesjs

Free and Open source Web Builder Framework. Next generation tool for building templates without coding

https://grapesjs.com

BSD 3-Clause "New" or "Revised" License

22.36k stars 4.05k forks source link

BUG: Using imported HTML/CSS/JS into the editor shows outlines, but no content, JS Fiddle inside #3434

Closed advancedsoftwarecanada closed 3 years ago

advancedsoftwarecanada commented 3 years ago

You can get the version by typing grapesjs.version into the console YES: https://jsfiddle.net/75a9u1cf/2/

What is the expected behavior? I am expecting to be able to edit the HTML and content in the editor

Describe the bug detailed The screen is simply white, I can see the shapes and drag elements, but the editor is just not displaying the content

HALF-SOLVED: https://jsfiddle.net/75a9u1cf/3/

advancedsoftwarecanada commented 3 years ago

HALF SOLVED IT, found some stuff on Google:

https://jsfiddle.net/75a9u1cf/3/

But some images still don't work.

advancedsoftwarecanada commented 3 years ago

@artf Come and help me :D

Ju99ernaut commented 3 years ago

Some things to note, these usually won't cause errors since the editor is able to fix them however they can cause some unexpected behaviours:

script tags will not work by default, the editor will remove them, here's reference on how to use scripts within the editor https://grapesjs.com/docs/modules/Components-js.html
It's best not to include any html, head or body tags, they might mess up the structure of your page but usually the editor just ignores and removes them.
Also important to check and correct invalid html, for example some images have a </a>, usually the editor is also able to remove these.
You may run into CORS issues for external static files
Some images might be missing because the src can't be resolved.

Ju99ernaut commented 3 years ago

Anyways seems in your case the issue is javascript related because the parsed results looks correct, even the images, so probably the scripts are being loaded before the html/css is rendered, I'm assuming that the images are hidden onload, then their visibility is controlled by the javascript. I'd recommend you try using components https://grapesjs.com/docs/modules/Components-js.html or find a way to load the scripts after the editor is loaded.

advancedsoftwarecanada commented 3 years ago

Thanks all will try these suggestions!

advancedsoftwarecanada commented 3 years ago

Are you able to examine the JSfiddle link? It's display the exact issue

advancedsoftwarecanada commented 3 years ago

I'm not even using custom components to do this, just trying to get HTML working :/

Ju99ernaut commented 3 years ago

Are you able to examine the JSfiddle link? It's display the exact issue

I've managed to inspect the JSFiddle and the reason the images are not visible is because their container has opacity: 0, which is why I'm assuming the javascript is responsible for turning the opacity to 1, but it can't do that if it loads before the html.

advancedsoftwarecanada commented 3 years ago

Ohhh I see, yes they have a javascript fade in effect. OK this should allow me to dig in. Thanks!

advancedsoftwarecanada commented 3 years ago

This issue can be resolved. I simply switched out the HTML/JS application to flat HTML -- disabled all the stupid loading effects. I'll just have an external script when not in editor do fancy stuff.

ALL HAIL GRAPEJS.