How can I get styled HTML from Quill for display in an email?

See original GitHub issue

Quill 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:closed
  • Created 6 years ago
  • Reactions:16
  • Comments:16 (2 by maintainers)

github_iconTop GitHub Comments

46reactions
inzingacommented, Aug 21, 2019

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.

        // configure Quill to use inline styles so the email's format properly
        var DirectionAttribute = Quill.import('attributors/attribute/direction');
        Quill.register(DirectionAttribute,true);

        var AlignClass = Quill.import('attributors/class/align');
        Quill.register(AlignClass,true);

        var BackgroundClass = Quill.import('attributors/class/background');
        Quill.register(BackgroundClass,true);

        var ColorClass = Quill.import('attributors/class/color');
        Quill.register(ColorClass,true);

        var DirectionClass = Quill.import('attributors/class/direction');
        Quill.register(DirectionClass,true);

        var FontClass = Quill.import('attributors/class/font');
        Quill.register(FontClass,true);

        var SizeClass = Quill.import('attributors/class/size');
        Quill.register(SizeClass,true);

        var AlignStyle = Quill.import('attributors/style/align');
        Quill.register(AlignStyle,true);

        var BackgroundStyle = Quill.import('attributors/style/background');
        Quill.register(BackgroundStyle,true);

        var ColorStyle = Quill.import('attributors/style/color');
        Quill.register(ColorStyle,true);

        var DirectionStyle = Quill.import('attributors/style/direction');
        Quill.register(DirectionStyle,true);

        var FontStyle = Quill.import('attributors/style/font');
        Quill.register(FontStyle,true);

        var SizeStyle = Quill.import('attributors/style/size');
        Quill.register(SizeStyle,true);

        // create new Quill instance here...
6reactions
andlcoolcommented, Jun 4, 2017

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found