Importing MJML / HTML to editor without storage manager

Riley- commented 4 years ago

I'm attempting to save my working MJML code (snapshot) outside of the storageManager. While I'm aware you can use urlStore / urlLoad to handle this in the storage manager, I'm hoping there is a way to save / import progress outside of the storage manager.

Right now I have access to css / mjml / html through:

//HTML
editor.runCommand('mjml-get-code').html
//MJML
editor.getHtml()
//CSS 
editor.getCss()

I use this to store each of these fields on the database, which seems to work great.

However, the problem arises when I try to import the code back into the editor (canvas).

I'm using the following to load saved code into the grapes editor, from my database:

editor.DomComponents.clear()
editor.setComponents(htmlCode)

At first the editor loads the correct code (snapshot) in, but any further edits after it has been loaded and the next save I make results in an empty html document being saved, using editor.runCommand('mjml-get-code').html.

The stored 'empty html' looks like this:

    <!doctype html>
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
      <head>
        <title>

        </title>
        <!--[if !mso]><!-- -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--<![endif]-->
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">
          #outlook a { padding:0; }
          body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }
          table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
          img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
          p { display:block;margin:13px 0; }
        </style>
        <!--[if mso]>
        <xml>
        <o:OfficeDocumentSettings>
          <o:AllowPNG/>
          <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
        </xml>
        <![endif]-->
        <!--[if lte mso 11]>
        <style type="text/css">
          .mj-outlook-group-fix { width:100% !important; }
        </style>
        <![endif]-->

        <style type="text/css">

        </style>

      </head>
      <body>

      </body>
    </html>

I've tried to setComponents(mjmlCode) instead of setComponents(htmlCode) and this doesn't seem to work either.

Is there something I'm missing, or is this not possible?

I'm assuming the problem I'm running into has to do with the fact that loading the html output into the editor is not the same as the mjml I start with in the editor.

Many thanks, for your time and this wonderful project.

ditschedev commented 3 years ago

When initializing the editor provide the mjml code to the components option of the init method. Same applies for the style of the editor. I'd advise you to store the json formatted representation in your database too. This can be loaded easier and with less problems then loading unparsed html / mjml which needs to be interpreted by the editor everytime it loads.

You can get the json representation of your components with the following snippet:

JSON.stringify(editor.getComponents())

Here is a small snippet of the init method:

var editor = grapesJS.init({
    container : '#editor',
    fromElement: false,
    avoidInlineStyle : false,
    components: components, // your mjml code or better the json representation
    style: stylesJSON || stylesString, // your saved styles or the json representation of the styles
    // other options
});

Edit This way the setComponents method should work again! 😄

Hope this helps!

Riley- commented 3 years ago

Many thanks @ditschedev, I'll give this a shot.

alejandro-valencia14 commented 2 months ago

Alizar inicial el editor, proporcione el código mjml a la opción de componentes del initmétodo. Lo mismo se aplica al estilo del editor. Le aconsejo que también almacene la representación con formato json en su base de datos. Esto se puede cargar más fácilmente y con menos problemas al cargar HTML/mjml sin analizar que el editor debe interpretar cada vez que se carga.

Puede obtener la representación json de sus componentes con el siguiente fragmento:
JSON.stringify(editor.getComponents())
A continuación se muestra un pequeño fragmento del initmétodo:
var editor = grapesJS.init({
    container : '#editor',
    fromElement: false,
    avoidInlineStyle : false,
    components: components, // your mjml code or better the json representation
    style: stylesJSON || stylesString, // your saved styles or the json representation of the styles
    // other options
});
Editar ¡ De esta manera el setComponentsmétodo debería funcionar nuevamente! 😄

¡Espero que esto ayude!

"Hello friend, do you have the complete code, both the JS and the HTML, to see how it works rendering from the database without the store manager?"

GrapesJS / mjml

Importing MJML / HTML to editor without storage manager #194