quilljs/delta
Delta
Deltas是一種簡單而富有表現力的格式，可以用來描述Quill的內容和改變，這種格式本質上是JSON，是人類可讀的，也很容易被機器決議，Deltas可以描述任何Quill檔案，包括所有的文本和格式資訊，其中沒有HTML的歧義和復雜性，
不要混淆它的名字Delta-Deltas代表檔案和檔案的變化，如果你Deltas是一個檔案到另一個檔案的說明，Deltas代表檔案的方式是通過一個空檔案開始說明的，
Deltas是作為一個獨立庫實作的，允許在Quill之外使用，它適用于操作轉換，可以實時使用像Google Docs一樣的應用程式，有關Deltas的更深入解釋，請參閱Delta格式的設計，
注意：不建議手動構建Deltas，可以使用鏈式方法insert()、delete()和retain()呼叫來創建新的Deltas，
檔案
Delta的格式是顯而易見的，例如下面的例子："Gandalf the Grey"的字串其中"Gandalf"加粗，"Grey"的顏色是#cccccc，
{
ops: [
{ insert: 'Gandalf', attributes: { bold: true } },
{ insert: ' the ' },
{ insert: 'Grey', attributes: { color: '#cccccc' } }
]
}
正如名字所表達的那樣，描述內容對于Deltas來說實際上是一個特例，上面的例子很具體的說明了如何插入一個粗體字符‘Gandalf’，一個未格式化的字串‘the’，和一個顏色為#cccccc的‘Gray’，當使用Deltas來描述檔案時，如果將Delta應用于空白檔案，則可以將其視為創建的內容，
由于Delta是一種資料格式，因此attribute對應的值，沒有固定的意義，例如：Delta格式中沒有規定顏色值必須在十六進制中，這個是Quill的選擇，如果需要可以使用Parchment進行修改，
Embeds
對于非文本內容（如影像或者公式），插入值可以是物件，該物件應該有一個唯一鍵，用來確定他的型別，如果你使用Parchment構建自定義內容，則為blotName，與文本類似，embeds仍然可以使用屬性鍵來描述要應用于內容格式，所有的Embeds的長度都為1，
{
ops: [{
// An image link
insert: {
image: '<https://quilljs.com/assets/images/icon.png>'
},
attributes: {
link: '<https://quilljs.com>'
}
}]
}
行級格式（Line Formatting）
與換行符相關聯的屬性，描述了該行的格式，
{
ops: [
{ insert: 'The Two Towers' },
{ insert: '\\n', attributes: { header: 1 } },
{ insert: 'Aragorn sped on up the hill.\\n' }
]
}
所有的Quill檔案都必須以換行符結尾，即使沒有格式應用于最后一行，這樣，你將始終有一個字符位置來應用行格式，
許多行格式是獨占的，例如Quill不允許一行同時作為標題和串列，盡管可以使用Delta格式表示，
改變（changes）
在注冊Quill的text-chagne事件時，你會獲得一個描述Delta改變了什么的引數，除了insert操作，這個Delta可能有delete或者retain操作，
Delete
洗掉操作明確的指出它意味著：洗掉下一個字符數，
{
ops: [
{ delete: 10 } // Delete the next 10 characters
]
}
由于洗掉操作不包含被洗掉的內容，因此Delta不可逆，
Retain
保留操作僅僅意味著保留下一個字符數，而不需要修改，如果指定了attributes，它仍然意味著保留這些字符，但應用由屬性物件指定的格式，如果屬性值為null用戶洗掉指定格式，
以一個‘Gandalf the Grey’的例子開始：
// {
// 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 }
]
}
請注意，Delta的說明始終始于檔案的開頭，由于保留操作的簡單性，我們永遠不需要為洗掉或者插入指定索引，
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/250765.html
標籤：其他