web-dev-qa-db-ja.com

上マージンが10pxの見出しの前に、Quillが空白の段落（ `<p> <br> </ p>`）を挿入しないようにするにはどうすればよいですか？

バックグラウンド

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-top以上の10pxスタイルは、この問題を引き起こすために重要であるように思われます。 9pxを使用しても、問題は解決します。
  • これが 問題を示す羽ペンの遊び場

バージョン

  • クイルバージョン1.2.4
  • Chromeバージョン58.0.3029.81（64ビット）
  • Ubuntu 16.04（64ビット）
javascripthtmlcssquill
11
GlenPeterson

ショートバージョン

MatchVisual機能を無効にする必要があります： http://quilljs.com/docs/modules/clipboard/#matchvisual

ロングバージョン

Quillは、クリップボードモジュールを使用して初期コンテンツを処理します。

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

実装自体は、clipboard.js内のmatchSpacing関数で確認できます。

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

初期化はクリップボードモジュールを使用するため、これはテキストに適用されていました。

ソリューションを説明するコードペンフォークは次のとおりです。 https://codepen.io/anon/pen/LzzYoa （matchVisual configオプションはクイル1.3.0で追加され、元のペンは古いバージョンでした。）

21
Will

クリップボードモジュールでmatchVisualオプションを無効にするだけです。

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