Search code examples
quill

New lines are not WYSIWYG

In the editor, the Enter key has the following visual effect:

enter image description here

Hitting the Enter key once in the Quill editor results in <p>...</p> in quill.root.innerHTML.

With two consecutive Enter's, the output is now <p><br/></p>.

This resultant HTML from the above entered text would become:

enter image description here

This is quite different from how it looks when in the editor. How do people out there manage this? Do you have to massage quill.root.innerHTML or do you use some other method to display the entered content?

Solution

  • Adding the following style:

    p { margin-bottom: 0 }

    will produce the almost same look as in the editor.