デルタ

デルタは、Quill の内容と変更を説明するために使用できる、シンプルでありながら表現力豊かな形式です。この形式は JSON の厳密なサブセットであり、人間が判読でき、マシンでも簡単に解析できます。デルタは、HTML のあいまいさや複雑さなしに、すべてのテキストと書式設定情報を含む任意の Quill ドキュメントを記述することができます。

デルタという名前に混同しないでください。デルタはドキュメントとドキュメントへの変更の両方を表します。デルタを、あるドキュメントから別のドキュメントに移動するための指示と考えると、デルタがドキュメントを表す方法は、空のドキュメントから始まる指示を表現することになります。

デルタは別個に実装されますスタンドアロンライブラリ、Quill の外での使用を可能にします。に適しています運用の変革Google ドキュメントのようなアプリケーションをリアルタイムで使用できます。デルタの詳細については、を参照してください。デルタフォーマットの設計。

ノート：デルタを手動で構築することはお勧めできません。むしろ、チェーン可能なinsert()、delete()、 とretain()新しいデルタを作成するメソッド。使用できますimport()Quill から デルタにアクセスします。

書類

デルタ形式はほとんど一目瞭然です。以下の例では、文字列「Gandalf the Grey」について説明しています。「Gandalf」は太字で、「Grey」は #cccccc で色付けされています。

{
  ops: [
    { insert: 'Gandalf', attributes: { bold: true } },
    { insert: ' the ' },
    { insert: 'Grey', attributes: { color: '#cccccc' } }
  ]
}

その名前が示すように、コンテンツの説明は実際にはデルタの特殊なケースです。上記の例は、より具体的には、太字の文字列「Gandalf」、書式設定されていない文字列「the」、その後に文字列「グレー」色の #cccccc を挿入する命令です。デルタを使用してコンテンツを記述する場合、デルタを空のドキュメントに適用した場合に作成されるコンテンツと考えることができます。

デルタはデータ形式であるため、次の値には本質的な意味はありません。attributeキーペア。たとえば、デルタ形式では、色の値が 16 進数でなければならないという規定はありません。これは Quill が選択するものであり、必要に応じて次のように変更できます。羊皮紙。

埋め込む

画像や数式などの非テキスト コンテンツの場合、挿入キーをオブジェクトにすることができます。オブジェクトには、そのタイプを決定するために使用されるキーが 1 つある必要があります。これはblotNameカスタムコンテンツを構築している場合羊皮紙。テキストと同様に、埋め込みにもattributes埋め込みに適用する書式設定を記述するキー。すべての埋め込みの長さは 1 です。

{
  ops: [{
    // An image link
    insert: {
      image: 'https://quilljs.com/assets/images/icon.png'
    },
    attributes: {
      link: 'https://quilljs.com'
    }
  }]
}

行の書式設定

改行文字に関連付けられた属性は、その行の書式設定を記述します。

{
  ops: [
    { insert: 'The Two Towers' },
    { insert: '\n', attributes: { header: 1 } },
    { insert: 'Aragorn sped on up the hill.\n' }
  ]
}

すべての Quill ドキュメントは、最後の行に書式設定が適用されていない場合でも、改行文字で終わる必要があります。こうすることで、行の書式設定を適用する文字位置が常に決まります。

多くの行フォーマットは排他的です。たとえば、Quill では、デルタ形式で表現できるにもかかわらず、行を同時にヘッダーとリストの両方にすることはできません。

変更点

Quill’sにリスナー登録するとtext-changeイベントの場合、取得する引数の 1 つは、何が変更されたかを説明するデルタです。に加えてinsert作戦では、このデルタもdeleteまたretainオペレーション。

消去

のdeleteこの操作は、その意味するところを正確に指示します。つまり、次の数の文字を削除します。

{
  ops: [
    { delete: 10 }  // Delete the next 10 characters
  ]
}

以来delete操作には含まれない何削除された場合、デルタは元に戻せません。

保持

あretain操作は単に次の数の文字を変更せずに保持することを意味します。もしもattributesが指定されている場合でも、それらの文字は保持しますが、指定された書式設定を適用することを意味します。attributes物体。あnull属性キーの値は、フォーマットの削除を指定するために使用されます。

上記の「灰色のガンダルフ」の例から始めます。

// {
//   ops: [
//     { insert: 'Gandalf', attributes: { bold: true } },
//     { insert: ' the ' },
//     { insert: 'Grey', attributes: { color: '#cccccc' } }
//   ]
// }

{
  ops: [
    // Unbold and italicize "Gandalf"
    { retain: 7, attributes: { bold: null, italic: true } },

    // Keep " the " as is
    { retain: 5 },

    // Insert "White" formatted with color #fff
    { insert: "White", attributes: { color: '#fff' } },

    // Delete "Grey"
    { delete: 4 }
  ]
}

デルタの指示は常に文書の先頭から始まることに注意してください。そしてプレーンのせいでretain操作では、インデックスを指定する必要はありません。deleteまたinsert手術。

遊び場

Quill を試して、そのコンテンツと変更がどのように見えるかを見てください。開発者コンソールを開いて、デルタの別のビューを表示します。