javascript - 如何避免Quill在顶部空白距为10px的标题前插入空白段落(` `)？

背景
的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覆盖我们的样式的解决方案会非常不错。
笔记

.ql-editor h3等于或大于margin-top的10px样式似乎对于引起此问题至关重要。即使有了9px，问题也消失了。

这是Quill Playground showing the issue

版本号

Quill版本1.2.4

Chrome版本58.0.3029.81(64位)

Ubuntu 16.04(64位)

最佳答案

短版

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

长版

Quill使用剪贴板模块处理其初始内容。

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

您可以在剪贴板.js内的matchSpacing函数中看到实现本身:

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

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

这是一个说明解决方案的codepen分支:https://codepen.io/anon/pen/LzzYoa(在羽毛笔1.3.0中添加了matchVisual config选项，并且您的原始笔使用的是旧版本。)

关于javascript - 如何避免Quill在顶部空白距为10px的标题前插入空白段落(` `)？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43748108/

Quill

javascript - 如何避免Quill在顶部空白距为10px的标题前插入空白段落(`<p><br></p>`)？