如何让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覆盖我们的样式的解决方案非常好.

Answer 1

精简版

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

长版

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

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

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

由于初始化使用剪贴板模块,因此将其应用于您的文本.

这是一个说明解决方案的codepen fork:https://codepen.io/anon/pen/LzzYoa(在quill 1.3.0中添加了matchVisual配置选项,而你原来的笔是旧版本.)

显然我没有足够的stackoverflow声誉来添加我的答案的另一个链接(大声笑？),但这是一个说明解决方案的codepen分支:https://codepen.io/anon/pen/LzzYoa(添加了matchVisual配置选项)在quill 1.3.0中,你原来的笔是旧版本.) (4认同)
在后续版本中删除了“matchVisual”选项。请参阅[此处](https://github.com/quilljs/quill/blob/ee827ffb605ba491246f201d497ce0e7d9e193a0/docs/guides/upgrading-to-2-0.md#configuration)。 (3认同)