見出しの前に10pxの余白を入れて、空白の段落（ '<p><br></p> `）を挿入しないようにするにはどうすればいいですか？クイルを開始するため

Question

背景

CSS

.ql-editor h3 { 
    margin-top: 10px !important; 
} 

HTMLソース（クイルで編集する）

<div id="editor"> 
<h1>A Title</h1> 
<p>hello</p> 
<h3>A Heading</h3> 
</div> 

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がスタイルを上書きしないようにするソリューションは本当に素晴らしいでしょう。 10pxの margin-top以上と

ノート

• .ql-editor h3スタイルは、この問題を生じさせるための重要なようです。 9pxであっても問題は解決しません。ここ
• はQuill Playground showing the issue

バージョン

• クイルバージョン1.2.4
• クロムバージョン58.0.3029.81（64ビット）
• のUbuntu 16.04（64ビット）
あります

Answer 1

短いバージョン

あなたはmatchVisual機能を無効にする必要があります。 http://quilljs.com/docs/modules/clipboard/#matchvisual

ロングバージョン

クイルが、それは最初のコンテンツのプロセスにクリップボードモジュールを使用しています。

クリップボードで有効にするデフォルトの動作の1つに、というmatchVisualという機能があります。この機能は、ペーストしたコンテンツの周りのマージンを改行に変換します。目的は、あなたがペーストしたものをマージンに関してそのソースと同じように見せることです。だから、ウェブサイトから周りに1マージンのマージンを持つh1をコピーして、それをペールで貼り付けると、同じ全体的な外観を維持するために上下の改行を自動的に入れます。

クリップボード内の​​関数で実装自体を確認できます。JS：

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

初期化がクリップボードモジュールを使用しているので、これはあなたのテキストに適用なりました。ここで

は解決策を示すcodepenフォークです：https://codepen.io/anon/pen/LzzYoa（matchVisualの設定オプションはクイル1.3.0で追加され、元のペンが古いバージョンであった。）