Allow real WYSIWYG - allow option to not override common styles when editing

Quill is fantastic, but the tagline says “Quill is a modern WYSIWYG editor…” but it’s not. WYSIWYG means what you see is what you get, not almost, not 90%.

Since the core theme overrides a lot of styles, (as well as all other themes) one must copy the core + theme and manually remove the overrides if they want true WYSIWYG. (which can be an issue if quill is updated)

e.g. see here https://github.com/quilljs/quill/blob/develop/assets/core.styl#L52

  p, ol, ul, pre, blockquote, h1, h2, h3, h4, h5, h6
    margin: 0
    padding: 0

If my target content is in a page with margin / padding to these tags, then by editing them with quill, I’m losing this. (e.g. I’m making sure the same style is in both the editor page and the target display page)

Similarly for h tags

https://github.com/quilljs/quill/blob/develop/assets/base.styl#L117

Related Issue: https://github.com/quilljs/quill/issues/1266

Steps for Reproduction

1. Use quill with any html content that has different global styles for h1, h2, p etc
2. Edit the content using quill (either provided themes)

Expected behavior:

1. p tags margins and padding is preserved
2. h1,h2… styles are preserved
3. etc…

Actual behavior:

1. p tags margins and padding is reset
2. h1,h2… styles are not preserved
3. etc…

Workaround:

Generate a new css stylesheet myself (cumbersome, and not upgradable if new editor buttons are added etc)

Requested solution:

Separate toolbar/editor CSS styles from content styles, so I can include what I need.

e.g. core.css -> extract to core-editor.css + core-content.css as well as snow.css -> extract to snow-editor.css + snow-content.css

for backward compatibility core.css can import both etc, but now I can import only *-editor.css to only style the buttons etc but not the content.

Platforms:

All platforms

Version:

All recent versions

[Methodician]

Same, agreement, +1.

I’m not clear on why this behaves as it does. Why would I want things to look different inside and outside the editor? Why can’t I just implement the Quill editor styles in my app without re-writing them? Better yet, make the editor styles importable and easy to override so I can optionally change the styles but still have them reflected in the editor (and outside it)?

Is there a reason behind this counter-intuitive (and seemingly counterproductive) behavior someone could explain?

[VedresDavid]

I want to use the quill editor to be able to create email templates. unfortunately the quill developers think they are gods and they think everyone (including outlook) should just include their godly css which results in settings like font size not applying in emails since the generated html looks like this… <span class="ql-size-small">small text</span>. Is there a chance that after 4 years we get an asnwer if this is ever going to be fixed or not?