Quill: Inline styling lost after loading/pasting html

Created on 10 Jul 2017  路  8Comments  路  Source: quilljs/quill

I'm currently trying to use Quill to create an editor and be able to format an email in HTML.
In order to allow the styling of the email content I'm using only inline styling attributes instead of the quill classes.
However, when I try to load or paste the html content into the editor, some of the inline styles are ignored/removed. I noticed that some of the inline styles (like color, background-color,text-align) are kept but others are just removed (for instance some font families and text-indent).
Here is a verifiable example of this problem.

Steps for Reproduction

  1. Visit the example provided
  2. Verify that some inline fonts are applied by Quill and others are ignored.
  3. Verify that the indent specified with inline styling is ignored by Quill.

Expected behavior:
The fonts and indent specified by inline styling should be recognized and kept by Quill.

Actual behavior:
Some fonts are kept and others are removed when loading Quill. Text indent specified by inline styling is also removed.

Platforms:
Google Chrome Version 58.0.3029.110 (64-bit)

Version:
1.2.6

bug

Most helpful comment

yeah switch to a different editor lmao

All 8 comments

This is a high priority issue for us, we need the ability to initialize the editor with some pre-existing HTML with inline styling.

Is there a workaround for this?

yeah switch to a different editor lmao

Downgrade to version 1.0.3. (bug started with version 1.0.4)
or delete the whitelist.

This bug only happens when the font family has quotes.

import Quill from 'quill';

let Font = Quill.import('attributors/style/font');
delete Font.whitelist;

Quill.register(Font);

This is fixed with the fix from #1873 https://github.com/quilljs/quill/commit/fa99fa09981248ebe502be5c0f188ba2c100b94a for font family. The expected case for text indent is replace with a tab character, which it already does.

The expected case for text indent is replace with a tab character, which it already does. can't understand where you told about tab character

I am still having this issue with version 1.3.6 with code based on this example: https://stackoverflow.com/questions/43728080/how-to-add-font-types-on-quill-js-with-toolbar-options (And the issue is -- still -- with font families having white space(s) included in their names.)

The key difference compared with the test code here is how the font "module" is imported:
formats/font vs attributors/style/font .
Is one of them incorrect? Are they both correct, just serving different purpose?

how to solve this?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Yves-K picture Yves-K  路  3Comments

rsdrsd picture rsdrsd  路  3Comments

DaniilVeriga picture DaniilVeriga  路  3Comments

lastmjs picture lastmjs  路  3Comments

benbro picture benbro  路  3Comments