如何防止Quill在10 p上边距的标题前插入空白段落(<p><br></p>)？
如何防止Quill在10 p上边距的标题前插入空白段落(<p><br></p>)？
提问于 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>问题
<p><br></p>是从哪里来的，我如何摆脱它呢？我希望编辑看起来像真实的东西，我们在所有标题上都使用一个最高的页边距。一个解决方案，阻止奎尔覆盖我们的风格将是非常好的。
备注
.ql-editor h3样式具有margin-topof10px或更高版本，似乎是导致此问题的关键。即使有了9px，这个问题也消失了。- 这是Quill游乐场展示了这个问题
版本
- Quill版本1.2.4
- Chrome版本58.0.3029.81 (64位)
- Ubuntu 16.04 (64位)
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-09-26 20:26:33
短版
您需要禁用matchVisual特性：http://quilljs.com/docs/modules/clipboard/#matchvisual
长版本
Quill使用剪贴板模块来处理它的初始内容。
剪贴板中启用的默认行为之一是名为matchVisual的功能，它将粘贴内容周围的边距转换为换行符。这样做的目的是让你粘贴到羽毛笔上的东西看起来和毛边的来源一样。因此，如果我从一个网站上复制了一个有着大量毛利的h1，并将它粘贴在毛笔中，它会自动在上面和下面添加一些新的线条，以保持相同的整体外观。
您可以在matchSpacing函数中看到clipboard.js中的实现本身：
由于初始化使用剪贴板模块，这将应用于您的文本。
下面是说明解决方案的代码分叉：https://codepen.io/anon/pen/LzzYoa ( matchVisual配置选项是在quill 1.3.0中添加的，您的原始笔是在旧版本上)。
Stack Overflow用户
发布于 2019-12-19 07:30:04
只需在剪贴板模块中禁用matchVisual选项即可。
var quill = new Quill('.quill', {
theme: 'snow',
modules: {
toolbar : [...]
clipboard: {
matchVisual: false
}
}
});Stack Overflow用户
发布于 2021-07-21 17:02:53
::ng-deep .ngx-quill-editor
p > br
display: none
p:not(:last-of-type)
margin-bottom: 1rem
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43748108
复制相关文章
相似问题
腾讯云开发者
