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

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

背景

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>

问题

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

备注

版本

短版

您需要禁用 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 中,而您的原始笔使用的是旧版本。)

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

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

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