How can I get styled HTML from Quill for display in an email?
See original GitHub issueQuill outputs nice plain HTML.
But when I display this in an HTML email it looks rather clunky because it is effectively unstyled.
It would be good if it looked similar to the way it is displayed in the Quill editor control.
I’ve seen this link which maybe seems to be talking about the same topic? https://quilljs.com/playground/#class-vs-inline-style
So I modify my code to include this:
let AlignStyle = Quill.import('attributors/style/align')
let BackgroundStyle = Quill.import('attributors/style/background')
let ColorStyle = Quill.import('attributors/style/color')
let DirectionStyle = Quill.import('attributors/style/direction')
let FontStyle = Quill.import('attributors/style/font')
let SizeStyle = Quill.import('attributors/style/size')
Quill.register(AlignStyle, true);
Quill.register(BackgroundStyle, true);
Quill.register(ColorStyle, true);
Quill.register(DirectionStyle, true);
Quill.register(FontStyle, true);
Quill.register(SizeStyle, true);
There’s no errors and it seems to run OK, but the output from Quill is precisely the same.
Is there mean to be some way to render Quill output in a manner similar to the editor control display?
Is there meant to be a way that I can get the HTML out in a way suitable for display in an HTML email which requires inline styling?
thanks
Issue Analytics
- State:
- Created 6 years ago
- Reactions:16
- Comments:16 (2 by maintainers)
Top Results From Across the Web
Quill: how to get html data with the styling included?
Currently I get the html using editor.root.innerHTML . It works, but when I open the html file in browser the styling isn't there....
Read more >How to get HTML content from Quill editor? | Lulu's blog
How to get and post raw HTML with Quill rich text editor? This page explains how to get HTML content from the editor...
Read more >Mail differently - Quill JS. - CodePen
Adding Classes. In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template....
Read more >Using Quill to Build a WYSIWYG Editor [Step-by-Step Tutorial]
For some formats, Quill.js uses inline style on the HTML nodes. For others, it uses custom CSS classes. This is important because if...
Read more >How to Customize Quill - Quill Rich Text Editor
Quill uses classes, instead of inline style attributes, when possible, but both are implemented for you to pick and choose. A live example...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
For those that might stumble across this in the future, here is what I added to enable Quill styling attributes to be inline. I needed inline style attributes so that Quill created documents sent via email would maintain the formatting defined in Quill.
First, using
console.log(Quill.imports);(discovered when reading this Quill documentation page), I was able to list all the imported attributors Quill imported.Adding the following for all of those listed by the logging of
Quill.imports, the result was inline html styles rather than Quill classes.Great, the example does work as intended. I am also looking to get the html output to be sent as email and requires all styling to be inlined.
How do we get a list of items that we can configure to be inline? The example shows for size only and I am searching for the whole list.
Thanks.