Получить HTML и CSS из редактора новостной рассылки grapes.js в Javascript - PullRequest
Новая
       24

Получить HTML и CSS из редактора новостной рассылки grapes.js в Javascript

0 голосов
/ 31 декабря 2018

Как получить выходные данные HTML и CSS из grapes.js в Javascript?

Я пишу приложение Django для новостной рассылки, в котором мне нужен редактор новостной рассылки, для которого я использовал "grapes.js" информационный бюллетень.Все хорошо, но я застрял в части, где мне нужно получить HTML и CSS шаблона, созданного с его помощью.
У меня есть: 

<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();

Этот код дает мнеhtml шаблона, но без css!

Я попробовал https://github.com/artf/grapesjs-mjml/issues/2. Может кто-нибудь подсказать, что мне не хватает?Спасибо.

РЕДАКТИРОВАТЬ: у меня есть ответ ниже, но мне нужно, как это с HTML и CSS вместе, как в экспорте HTML. Спасибо еще раз.https://screenshots.firefox.com/u752bu0nNN97rXlr/127.0.0.1

Ответы [ 2 ]

0 голосов
/ 29 июля 2019

Получение только HTML: 

var html = editor.getHtml();

Получение только CSS: 

var css = editor.getCss();

Получение HTML с помощью встроенного CSS : 

var htmlWithCss = editor.runCommand('gjs-get-inlined-html');
0 голосов
/ 31 декабря 2018

Это было просто.Чтобы получить CSS страницы, я сделал editor.getCss() Она дала странице css, затем соединила HTML и CSS, чтобы получить полный код.

наконец, у меня есть что-то вроде этого. 

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

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

...