Get HTML and CSS from grapes.js newsletter editor in Javascript

Question

How to get output HTML and CSS of grapes.js in Javascript ?

I am writing a Django app for newsletter, in which I need a newsletter editor for which I used "grapes.js" newsletter. Everything is fine but I am stuck in part where I need to get the HTML and CSS of the template created with it.
I have:

<script type="text/javascript">
  var editor = grapesjs.init({
  container : '#gjs',
  plugins: ['gjs-preset-newsletter'],
  pluginsOpts: {
    'gjs-preset-newsletter': {
      modalTitleImport: 'Import template',
    'grapesjs-plugin-export': { /* options */ }
      // ... other options
    }
  }
});
function returnHtml(){ 
    console.log('test')
    const mjml = editor.getHtml;
    preview = editor.getHtml
    $("#myiframe").contents().find("body").html(mjml)
}
returnHtml();

This code gives me the html of the template but without the css !

I have tried https://github.com/artf/grapesjs-mjml/issues/2. Can someone please suggest me what i am missing ? Thanks.

EDIT: I have an answer below but what i need is like this with html and css together like in export HTML.Thanks again.

score 20 · Accepted Answer · answered Jul 29 '19 at 10:37

20

Getting only HTML:

var html = editor.getHtml();

Getting only CSS:

var css = editor.getCss();

Getting HTML with CSS inline:

var htmlWithCss = editor.runCommand('gjs-get-inlined-html');

answered Jul 29 '19 at 10:37

svalenciano

371
2
6

may I ask you to have a look at a GrapesJS related question here : https://stackoverflow.com/questions/61679919/grapesjs-and-php-store-and-load-data-to-show-in-editor-and-as-html-page-as-wel ? – Istiaque Ahmed May 08 '20 at 16:21
Hi, is it still actual? I am trying to look the docs for `gjs-get-inlined-html` command and can't find any yet. I just wanted to know if this will include the javascripts of the page – fedd May 12 '20 at 09:01
3

gjs-get-inlined-html function is only available for "grapesjs-preset-newsletter" plugin: https://github.com/artf/grapesjs-preset-newsletter – svalenciano Jun 10 '20 at 08:00

score 2 · Answer 2 · answered Dec 31 '18 at 09:01

2

It was simple. To get the CSS of the page,i did editor.getCss() It gave the page css, then joined HTML and CSS to get the complete Code.

finally i have something like this.

function returnHtml(){ 
    const mjml = editor.getHtml;
    css = editor.getCss()
    $("#myiframe").contents().find('head').append(`<style>${css}</style>`)
    $("#myiframe").contents().find("body").html(mjml)
}

From https://grapesjs.com/docs/api/editor.html#gethtml

answered Dec 31 '18 at 09:01

Ansuman

428
1
4
15

may I ask you to have a look at a grapesJS related question here :https://stackoverflow.com/questions/61679919/grapesjs-and-php-store-and-load-data-to-show-in-editor-and-as-html-page-as-wel ? – Istiaque Ahmed May 08 '20 at 16:20

score 0 · Answer 3 · answered Mar 16 '20 at 12:15

0

This one will log your desired inline HTML.

function getInline() {
   console.log(editor.Commands.run('gjs-get-inlined-html'))
 }

answered Mar 16 '20 at 12:15

Khondoker Zahidul Hossain

447
5
9

It's work only with "grapesjs-preset-newsletter" plugin. – Alexandr Kazakov Apr 13 '22 at 07:36

Get HTML and CSS from grapes.js newsletter editor in Javascript

3 Answers3