Background

CSS

.ql-editor h3 {

  margin-top: 10px !important;

}

HTML source (to be edited with Quill)

<div id="editor">

<h1>A Title</h1>

<p>hello</p>

<h3>A Heading</h3>

</div>

The JavaScript for starting Quill is:

var quill = new Quill('#editor', {

  theme: 'snow'

});

Quill.js turns it into this (I'm adding line feeds for clarity):

<div class="ql-editor" contenteditable="true">

<h1>A Title</h1>

<p>hello</p>

<p><br></p>

<h3>A Heading</h3>

</div>

Question

Where did the <p><br></p> come from and how can I get rid of it? I want the edits to look like the real thing and we use a top margin on all our headings. A solution that stops Quill from overwriting our styles would be really nice.

Notes

• The .ql-editor h3 style with a margin-top of 10px or greater seems critical for causing this issue. Even with 9px the issue goes away.


• Here is the Quill Playground showing the issue

Versions

• Quill version 1.2.4


• Chrome Version 58.0.3029.81 (64-bit)


• Ubuntu 16.04 (64-bit)