デルタ

Quillが使用するのは、リッチ文章エディターのコンテンツを表す形式、および変更点それらの内容。ほとんどの場合、デルタに直接対処することは可能です。避けられた。ただし、強力なインターフェイスを提供するために利用できます。羽根ペン。

エディターのコンテンツを表すデルタは次のようになります。これ：

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

変更は次のようになります。

{
  ops: [
    { retain: 12 },
    { delete: 4 },
    { insert: 'White', attributes: { color: '#fff' } }
  ]
}

この 2 つに実際には違いがないことに注意してください。内容表現は単に空のドキュメントからの変更です。

オペレーション

操作は単一の変更を記述します。彼らは、入れる、消去また保持。操作にはインデックスが必要ないことに注意してください。彼らはいつも現在のインデックスでの変化を説明します。「保持」または「スキップ」するには、retains を使用します。文書の特定の部分。

入れる

挿入操作には、insertキーが定義されました。文字列値が表すのは、テキストを挿入しています。 Number 値は、埋め込みの挿入を表します。埋め込みタイプ (画像やビデオなど) に対応する値。

Quill は次の埋め込みタイプを認識します。

{
  image: 1
}

テキストと埋め込みの両方の場合、オプションattributesキーはオブジェクトで定義できます追加の書式設定情報を説明します。改行の形式文字は行の形式を説明します。形式は次のように変更できます。の保持手術。

// Insert a bolded "Text"
{ insert: "Text", attributes: { bold: true } }

// Insert a link
{ insert: "Google", attributes: { link: 'https://www.google.com' } }

// Insert an image
{
  insert: 1,
  attributes: {
    image: 'https://octodex.github.com/images/labtocat.png'
  }
}

// Aligned text example
{
  ops:[
    { insert: 'Right align' },
    { insert: '\n', attributes: { align: 'right' } },
    { insert: 'Center align' },
    { insert: '\n', attributes: { align: 'center' } }
  ]
)

消去

削除操作には番号が付いていますdeleteの数を表すキーが定義されています。削除する文字。すべての埋め込みの長さは 1 です。

// Delete the next 10 characters
{ delete: 10 }

保持

保持操作には番号が付いていますretainの数を表すキーが定義されています。保持する文字 (他のライブラリでは keep または Skip という名前が使用される場合があります)。アンオプションattributesキーは可能です文字に対する書式変更を記述するためにオブジェクトで定義されます。範囲。の値が nullattributesオブジェクトはその削除を表します鍵。

注: 最後の文字を保持する必要はありません。これが暗示されているとおりに文書化します。

// Keep the next 5 characters
{ retain: 5 }

// Keep and bold the next 5 characters
{ retain: 5, attributes: { bold: true } }

// Keep and unbold the next 5 characters
// More specifically, remove the bold key in the attributes Object
// in the next 5 characters
{ retain: 5, attributes: { bold: null } }