How to Preserve Inline Styles When Importing HTML from Another WYSIWYG Editor?

[nimitbhagat]

I have an existing WYSIWYG editor where the content is saved as HTML with styles applied directly as inline CSS.

For example, the saved content looks like:

<p style="color: red; font-size: 20px; text-align: center;">
    Sample text
</p>

When I load this saved HTML into GrapesJS, the inline styles are removed from the elements or converted into CSS rules managed by GrapesJS.

Since the HTML is generated and saved by another WYSIWYG editor, I need to preserve the existing inline styles exactly as they are when importing the content into GrapesJS.

Is there a recommended GrapesJS configuration or approach to:

1. Preserve the existing style attributes on imported elements.
2. Prevent GrapesJS from removing/absorbing inline styles during HTML import.
3. Ensure that styles such as color, font-size, text-align, background, etc. remain associated with the original elements.

For example, I would like this:

<p style="color: red; font-size: 20px;">
    Sample text
</p>

to remain with its inline styles after importing into GrapesJS, rather than having the styles moved into the GrapesJS CSS Composer.

What is the recommended way to handle this when importing HTML from another WYSIWYG editor?

[lexoyo]

GrapesJS parses inline styles into the CSS Composer by design

If you need the exported HTML to have styles inline again, I believe you can use the "inlineCss" approach from "grapesjs-preset-newsletter", but I didn't try it myself

In silex.me I added a "publish" button to do similar things / poat processing. Maybe https://www.npmjs.com/package/juice can be useful

[GLec1er]

There is a legacy configuration that keeps the imported declarations inline, but it needs both options:

const editor = grapesjs.init({
  container: '#gjs',
  storageManager: false, // for this example
  avoidInlineStyle: false,
  forceClass: false,
});

editor.setComponents(`
  <p style="color: red; font-size: 20px; text-align: center;">
    Sample text
  </p>
`);

console.log(editor.getHtml());

avoidInlineStyle: false alone is insufficient: forceClass defaults to true, and the component-add handler then moves the styles into a generated class. The handler explains that second conversion.

I tested this with GrapesJS 0.23.8 in Chrome. With both options disabled, getHtml() retained the paragraph's color, font-size, text-align and background in its style attribute. Adding a style through component.addStyle() and saving/reloading project JSON also retained inline output. With only avoidInlineStyle: false, the imported styles moved into a class instead.

The caveat is that avoidInlineStyle is explicitly deprecated, so this is tested legacy behavior, not a future-proof supported inline-editing mode. For a maintained rule-based editor plus inline HTML at export time, the inlining approach mentioned above is the better boundary.

Also, “keep the declarations inline” is different from preserving the original HTML exactly. GrapesJS parses and serializes it: whitespace in the style string is normalized, for example. If you require byte-for-byte source preservation, retain the original source separately; neither this configuration nor a CSS inliner provides that guarantee.

The described behavior was checked in a local Chrome fixture.

The source and local browser-fixture checks are described above.