从 Javascript 的 grapes.js 时事通讯编辑处获取 HTML 和 CSS

Question

如何在 Javascript 中获取 grapes.js 的输出 HTML 和 CSS？

我正在为时事通讯编写一个 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.Thanks 一样。

Answer 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#gethtml

Answer 2

仅获取 HTML:

var html = editor.getHtml();

仅获取 CSS:

var css = editor.getCss();

使用 CSS 内联获取 HTML:

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

Answer 3

这个将记录您想要的内联 HTML。

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

从 Javascript 的 grapes.js 时事通讯编辑处获取 HTML 和 CSS

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

javascript

django

grapesjs