【问题标题】：How to keep Quill from inserting blank paragraphs (` `) before headings with a 10px top margin?如何防止 Quill 在上边距为 10 像素的标题之前插入空白段落（` `）？
【发布时间】：2017-05-02 22:16:31
【问题描述】：

背景

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 位）
Ubuntu 16.04（64 位）

【问题讨论】：

似乎事情发生了变化，因为我在 h3、h2 上遇到了问题，可能还有其他问题......不是所有的问题，也不管 margin-top 属性如何，因为你的羽毛笔操场坏了。
为了记录，我试用了 Quill，问了一些 stackoverflow 问题，报告了一些错误，然后迅速切换到 TinyMCE 并完全停止使用 Quill。

标签： javascript html css quill

【解决方案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 fork：https://codepen.io/anon/pen/LzzYoa（在 quill 1.3.0 中添加了 matchVisual 配置选项，而您原来的 pen 使用的是旧版本。）

【讨论】：

我第一次尝试在 Quill Playground 中尝试这个并没有解决问题。如果您包含显示问题的 Quill Playground 示例的固定分支，我可以接受这个答案。我使用的是 TinyMCE，它对我们来说效果更好，所以不打算花任何时间跟进。
显然我没有足够的 stackoverflow 声誉来添加另一个链接到我的答案（大声笑？），但这里有一个说明解决方案的 codepen fork：codepen.io/anon/pen/LzzYoa（在 quill 中添加了 matchVisual 配置选项1.3.0，而您原来的笔使用的是旧版本。）
不错！谢谢你。现在我可以看到它正在工作，并且您正在获得足够的积分来使用链接更新您的答案！
matchVisual 选项在以后的版本中被移除。见here。
我们遇到了这个问题，如果 matchVisual 被删除了怎么办？

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：