GrapesJS / grapesjs

Free and Open source Web Builder Framework. Next generation tool for building templates without coding
https://grapesjs.com
BSD 3-Clause "New" or "Revised" License
22.36k stars 4.05k forks source link

BUG: Can not get inline css code. how to use this? #3198

Closed mprince2k18 closed 3 years ago

mprince2k18 commented 3 years ago

When I runCommand for inline CSS, It's giving me a warning and undefined.

artf commented 3 years ago

There is no built-in command to get inlined CSS, but you can find how it was implemented in the newsletter plugin here: https://github.com/artf/grapesjs-preset-newsletter/blob/master/src/openExportCommand.js

The core functionality is a few lines of code by using the juice package

import juice from 'juice';
// ...
const getInlined = (editor) => {
 const html = editor.getHtml();
 const css = editor.getCss();
 return juice(`${html}<style>${css}</style>`, { /* juice options */ });
}

How and where to put that function, is up to you