javascript - 从 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 中一样。再次感谢。

Answer 1

仅获取 HTML：

var html = editor.getHtml();

仅获取 CSS：

var css = editor.getCss();

使用 CSS inline 获取 HTML：

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

Answer 2

这很简单。为了获得页面的 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 3

这将记录您所需的内联 HTML。

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