grapejs can't edit external html loaded on the fly or from an iframe, having content to edit on the same page with grapejs leads to conflict with the content's css/js

[givanz]

Hi

I'm trying to impelement grapejs into an open source cms and I ran into some serious limitations that currently prevents me to use it.

I could not find another way to load html into the editor other than using container in editor.init method, there is no way to load a separate html page to edit (through an iframe or other method). Grapejs and the html to edit must be in the same page, this obviously leads to js/css and layout conflicts for complex pages that will mix with grapejs css/js.

Another limitation is editor.getHtml that loses indentation and some attributes (I don't see some data-test attributes that were in the original html)

Can you please provide some advice on how to change the container into an iframe to avoid these issues?

For example https://jetstrap.com/demo uses an iframe to keep the edited html separate and even hightlight and toolbar elements are overlayed over the iframe using pointer-events: none; this method keeps the original html intact and can be used to edit any html no matter how complex.

[artf]

README shows exactly what you're asking:

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      components: '<div class="txt-red">Hello world!</div>',
      style: '.txt-red{color: red}',
  });
</script>

All the html and css is loaded inside an iframe (exactly as you described with jetstrap) so no conflicts there.

'getHtml' returns the html without indentation as expected. For missing attributes, you have to provide some code because I'm unable to reproduce it

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.