How to keep Quill from inserting blank paragraphs (`<p> <br> </p>`) before headings with 10px top margin?
Background
CSS
.ql-editor h3 {
margin-top: 10px !important;
}
HTML source (editable with Quill)
<div id="editor">
<h1>A Title</h1>
<p>hello</p>
<h3>A Heading</h3>
</div>
JavaScript to run Quill:
var quill = new Quill('#editor', {
theme: 'snow'
});
Quill.js turns it into this (I am adding lines 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 it come from <p><br></p>
and how can I get rid of it? I want the changes to look real and we are using top margin in all of our titles. A solution that stops Quill from overwriting our styles would be really nice.
Notes
- Styling
.ql-editor h3
withmargin-top
of10px
or greater seems to be critical to this problem. Even with the9px
problem disappears. - Here is a Quill playground showing the problem
Version
- Quill version 1.2.4
- Chrome version 58.0.3029.81 (64-bit)
- Ubuntu 16.04 (64-bit)
source to share
Short version
You need to disable the matchVisual function: http://quilljs.com/docs/modules/clipboard/#matchvisual
Long version
Quill uses the clipboard module to process its initial content.
One of the default behavior modes enabled on the clipboard is the matchVisual function, which converts the fields around the pasted content to new lines. The goal is to make the material you insert into the pen look the same as its source in terms of margins. So if I copied the thin margin h1 around it from the website and pasted it into the pen, it automatically put some new lines above and below to keep the overall look.
You can see the implementation yourself in a function matchSpacing
inside clipboard.js:
Since the initialization uses the clipboard module, this has been applied to your text.
Here's a pony fork illustrating the solution: https://codepen.io/anon/pen/LzzYoa (matchVisual config was added in quill 1.3.0 and the original handle was in an older version.)
source to share