如何防止 Quill 在顶部边距为 10px 的标题前插入空白段落（` `）？

Question

背景

CSS

.ql-editor h3 {
  margin-top: 10px !important;
}

HTML 来源（用 Quill 编辑）

<div id="editor">
<h1>A Title</h1>
<p>hello</p>
<h3>A Heading</h3>
</div>

启动 Quill 的 JavaScript 是：

var quill = new Quill('#editor', {
  theme: 'snow'
});

Quill.js 把它变成这样（为了清楚起见，我添加了换行符）：

<div class="ql-editor" contenteditable="true">
<h1>A Title</h1>
<p>hello</p>
<p><br></p>
<h3>A Heading</h3>
</div>

问题

  是从哪里来的，我该如何摆脱它？我希望编辑看起来像真实的东西，我们在所有标题上都使用了上边距。阻止 Quill 覆盖我们的样式的解决方案会非常好。

备注

margin-top 为 10px 或更大的 .ql-editor h3 样式似乎是导致此问题的关键。即使使用 9px，问题也会消失。
这里是Quill Playground showing the issue

版本

Quill 版本 1.2.4
Chrome 版本 58.0.3029.81（64 位）
Ubuntu16.04（64 位）

Answer 1

短版

您需要禁用 matchVisual 功能： http://quilljs.com/docs/modules/clipboard/#matchvisual

长版

Quill 使用剪贴板模块来处理它的初始内容。

剪贴板中启用的默认行为之一是名为 matchVisual 的功能，它将粘贴内容周围的边距转换为换行符。目的是使您粘贴到 quill 中的内容在边距方面看起来与其来源相同。因此，如果我从网站复制一个带有大量边距的 h1 并将其粘贴到羽毛笔中，它会自动在上方和下方放置一些换行符以保持相同的整体外观。

您可以在 clipboard.js 中的 matchSpacing 函数中看到实现本身：

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

由于初始化使用了剪贴板模块，因此它已应用于您的文本。

这是一个说明解决方案的 codepen 分支：https://codepen.io/anon/pen/LzzYoa（matchVisual 配置选项已添加到 quill 1.3.0 中，而您的原始笔使用的是旧版本。）

Answer 2

只需禁用剪贴板模块中的 matchVisual 选项。

var quill = new Quill('.quill', {
    theme: 'snow',
    modules: {
        toolbar : [...]
        clipboard: {
            matchVisual: false
        }
    }
});

Answer 3

::ng-deep .ngx-quill-editor
  p > br
    display: none
  p:not(:last-of-type)
    margin-bottom: 1rem

如何防止 Quill 在顶部边距为 10px 的标题前插入空白段落（`<p><br></p>`）？

How to keep Quill from inserting blank paragraphs (`<p><br></p>`) before headings with a 10px top margin?

javascript

html

css

quill

背景

问题

备注

版本