Search code examples
javascriptquill

How to add inline style in element with Quill Text Editor?

Jsfiddle

When inserting content using dangerouslyPasteHTML, inline styles are not inserted?

For example, margin-right is not applied to p element.

How to set inline styles on p element? enter image description here

Solution

  • Quoting from the docs:

    dangerouslyPasteHTML

    Inserts content represented by HTML snippet into editor at a given index. The snippet is interpreted by Clipboard matchers, which may not produce the exactly input HTML.

    Quill was made as the new generation of WYSIWYG text editor and, by design, prevents arbitrary html insertion which often made previous editors buggy and unreliable.

    When you use dangerouslyPasteHTML, Quill is trying to build a representation of the content that makes sense and will strip anything that doesn't fit this representation (which inline-styles are a part of).

    If you want to read more about this, here is an interesting conversation on this exact issue: https://github.com/quilljs/quill/issues/1896