CODEWITHSUNDEEP
htmlcssquill
Umut
Umut

Reputation: 131

How to use inline styles instead of classes for color and background-color in quill editor

The color and background-color do not apply properly to content that is shown outside of quill editor. For example, I use the html content to send out emails, and the colors do not work in the emails sent out.

I found out that The color and background-color are applied to content with quill's own classes, while other settings (i.e. font-size) apply with inline styles.

What can I do to make quill use inline styles for color and background-color as well?

devtools screenshot about how quill class applies

Upvotes: 1

Views: 1479

Answers (2)

Sebi
Sebi

Reputation: 460

You can manually create a new StyleAttributor with parchment directly:

import { Scope, StyleAttributor } from 'parchment'

const SizeStyle = new StyleAttributor('size', 'font-size', { scope: Scope.INLINE })
Quill.register(SizeStyle, true)

I got the idea from here: https://github.com/slab/quill/issues/4262#issuecomment-2231359742

Upvotes: 0

Alster
Alster

Reputation: 73

The documentation for the product suggests that this is an easy task. There is an interactive playground which demonstrates how this should be done. You can see this here.

In reality, the task is far from simple. Saving html with purely inline styles, rather than proprietary class style definitions, for persistence, then re-use as templates for email or other messaging implementations, you would have thought was a fairly common requirement.

If you want to do this, be prepared for hours of frustration.

Switching off the insertion of class into html is fairly straight forward, as the documentation suggests, and getting Quill editor to insert inline styles into the html is fairly straight-forward.

enter image description here

So your html becomes: enter image description here

So far, so good. Once you begin to customise the toolbar options, it then becomes problematic. Using the example in the documentation, you will quickly find that the edtor no longer inserts the inline styling: enter image description here

Upvotes: 3

Related Questions