Trouble with Quill formats: class-based output breaks in email clients #4707
Unanswered
SudeshnaBayshann
asked this question in
Q&A
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
We’re running into trouble with Quill’s inline styling when generating email content.
Our toolbar has the usual buttons (bold, italic, underline, strikethrough, font family, font size, text color, background color, headings, alignments, lists, subscript/superscript, blockquote, etc.). The issue is that by default Quill applies many of these as CSS classes instead of inline styles.
For example, with the Snow theme Quill outputs:
.snow .ql-editor h1 {
font-size: 2em;
}
This works fine in a web app, but in emails these styles are stripped or ignored because most email clients don’t preserve external CSS or class selectors. The result is that the renders with the default font size instead of 2em. What we really need is for Quill to generate something like:
h1 style="font-size: 2em;"
We’ve tried registering style attributors like color, background, align, and overriding formats for font and size using Quill.register. But not all formats (especially header, indent list) reliably output inline styles — sometimes Quill still falls back to class-based output.
Question:
Has anyone implemented a configuration where all toolbar options (bold, italic, underline, strikethrough, font, size, color, background, heading, alignment, list, script, blockquote) consistently produce inline styles or semantic tags only? This would make the exported HTML safe across all major email clients.
Any code examples, configuration tips, or best practices would be greatly appreciated!
Beta Was this translation helpful? Give feedback.
All reactions