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

Как получить вывод 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. Спасибо еще раз.

1 ответ

Решение

Это было просто. Чтобы получить 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

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

var html = editor.getHtml();

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

var css = editor.getCss();

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

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

Это будет регистрировать желаемый встроенный HTML.

function getInline() {
   console.log(editor.Commands.run('gjs-get-inlined-html'))
 }
Другие вопросы по тегам