22

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)
Community
  • 1
  • 1
GlenPeterson
  • 4,866
  • 5
  • 41
  • 49
  • Seems things have changed because I get the issue on h3, h2, possibly others... not on all of them, and regardless of the margin-top property, and because your quill playground is broken. – Methodician Dec 02 '20 at 17:37
  • 1
    For the record, I tried out Quill, asked some stackoverflow questions, reported some bugs, then quickly switched to TinyMCE and stopped using Quill altogether. – GlenPeterson Dec 04 '20 at 14:21

3 Answers3

33

Short version

You need to disable the matchVisual feature: http://quilljs.com/docs/modules/clipboard/#matchvisual

Long version

Quill uses the clipboard module to process it's initial content.

One of the default behaviors enabled in clipboard is a feature called matchVisual, which converts margins around pasted content into newlines. The purpose is to make stuff you paste into quill look the same as its source with respect to margins. So if I copied an h1 with a ton of margin around it from a website and pasted it in quill it would automatically put some newlines above and below to keep the same overall look.

You can see the implementation itself in the matchSpacing function inside clipboard.js:

https://github.com/quilljs/quill/blob/be41c2b0639386d52b65decc557e2cf15911ccb9/modules/clipboard.js#L297

Since initialization uses the clipboard module, this was getting applied to your text.

Here's a codepen fork illustrating the solution: https://codepen.io/anon/pen/LzzYoa (the matchVisual config option was added in quill 1.3.0, and your original pen was on an older version.)

goofballLogic
  • 37,883
  • 8
  • 44
  • 62
Will
  • 482
  • 5
  • 8
  • My first attempt to try this in the Quill Playground did not fix the issue. If you include a fixed fork of my Quill Playground example showing the problem, I can accept this answer. I'm using TinyMCE instead it's working much better for us, so not intending to spend any real time following up on this. – GlenPeterson Sep 29 '17 at 22:02
  • 7
    Apparently I don't have enough stackoverflow reputation to add another link to my answer (lol?), but here's a codepen fork illustrating the solution: https://codepen.io/anon/pen/LzzYoa (the matchVisual config option was added in quill 1.3.0, and your original pen was on an older version.) – Will Oct 02 '17 at 18:30
  • Nice! Thank you. Now I can see it working and you're on your way to having enough points to update your answer with the link! – GlenPeterson Oct 03 '17 at 14:51
  • 3
    The `matchVisual` option was removed in later versions. see [here](https://github.com/quilljs/quill/blob/ee827ffb605ba491246f201d497ce0e7d9e193a0/docs/guides/upgrading-to-2-0.md#configuration). – Shaya Ulman Feb 03 '21 at 12:52
  • 1
    We are having this problem, what is the solution if matchVisual is removed? – janpeterka Mar 28 '22 at 10:11
  • I also had this problem with quill 1.3.6 . I started to set the editor content with pure HTML out of my db when loading it. Here matchVisual kicks in. If you do via API: `Save: JSON.stringify(Editor.getContents().ops)` and `Load: Editor.setContents(json)` it should be fine ! – Michael P Jul 25 '22 at 19:17
4

Just disable matchVisual option in clipboard module.

var quill = new Quill('.quill', {
    theme: 'snow',
    modules: {
        toolbar : [...]
        clipboard: {
            matchVisual: false
        }
    }
});
The Vojtisek
  • 1,282
  • 17
  • 21
1

::ng-deep .ngx-quill-editor
  p > br
    display: none
  p:not(:last-of-type)
    margin-bottom: 1rem
Tatyana Molchanova
  • 1,305
  • 5
  • 12
  • 23